Sidebar Sidebar
Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

Troubleshooting Layout for IE

Mal

Mal

macrumors 603
Original poster
Jan 6, 2002
6,253
30
Orlando
http://www.japancpi.com/

I need help troubleshooting this layout for IE 6+. It appears that the width of the main content div is about a third of what it should be, which is really messing up the layout. I haven't been able to find the problem, but I also don't have a test system of my own, which doesn't help.

Any advice would be greatly appreciated!

Feel free to comment on the other design elements too.

Thanks!

jW
 
Mal, I am no expert and this is my first attempt at answering a question by looking through code. So I may be way off and if so I apologize. I am just trying to participate.

Should #content have a width set? I didn't see one, but there is a width set in the page code for the object ( <object width="600" height="400"> ) . At a glance, and with my limited skills, it seems like that might be an issue.

Thanks
 
Well I assume you tested your site on real browsers such as Firefox, Safari, Opera?

If the problem only appears in IE, I suggest you to do IE specific hacks or create another CSS file only for lamo IE.

IE is the worst browser in the world and should be put down from the internet, its slowing down web development and making more people getting stressed up. Screw IE!!! :mad:
 
torndownunit said:
Mal, I am no expert and this is my first attempt at answering a question by looking through code. So I may be way off and if so I apologize. I am just trying to participate.

Should #content have a width set? I didn't see one, but there is a width set in the page code for the object ( <object width="600" height="400"> ) . At a glance, and with my limited skills, it seems like that might be an issue.

Thanks
Click to expand...

Thanks for that, that's the type of thing I knew I was probably missing. I'll try that later today and post back.

wheelhot said:
Well I assume you tested your site on real browsers such as Firefox, Safari, Opera?

If the problem only appears in IE, I suggest you to do IE specific hacks or create another CSS file only for lamo IE.

IE is the worst browser in the world and should be put down from the internet, its slowing down web development and making more people getting stressed up. Screw IE!!! :mad:
Click to expand...

Sorry dude, I know IE's bad, but if I want real people to read it, I unfortunately can't yet code only for real browsers.

I think in this case I likely won't need IE hacks, but the problem now isn't so much whether I can make the code work in IE as what's not working.

jW
 
Just looking at your code real quick and IE is doing what you're telling it to do.

A couple of things I would fix.

- Use a global reset
- You have some unnecessary div. Don't need a top and pageHeader. Don't need the select div. Just the few I looked at.
- For all floated content add display:inline;
- Search google for the IE version of min-height. Its pretty easy.

You don't need another style sheet for IE, if you code it right they will all play together.
 
So I added the width to the content div, plus a few of the other suggestions (didn't implement a global reset yet, will have to read up on that and make sure I do it right), so can anyone check if this is working correctly now? Thanks!

jW
 
wheelhot said:
Well I assume you tested your site on real browsers such as Firefox, Safari, Opera?

If the problem only appears in IE, I suggest you to do IE specific hacks or create another CSS file only for lamo IE.

IE is the worst browser in the world and should be put down from the internet, its slowing down web development and making more people getting stressed up. Screw IE!!! :mad:
Click to expand...

Unfortunately IE isn't going away any time soon.
 
Mal, on IE 7 the display is matching what I see on Camino and Safari. So it appears to be fixed.

The only difference being a VERY small difference in the gap below the "You can also visit the Japan CPI organization's website at JCPI.net." text.

But to be honest, the spacing of the text, and the gaps above and below actually look a little bit better in IE.

Sorry I can't give a report on IE6, but I don't have it installed.
 
Thanks! I'm not too worried about the exact spacing, though I expect if I get around to installing a global reset it would help me take care of that. I wouldn't even have worried about it if I didn't know for sure I had people needing to view the site in IE 6-7.

jW
 
Mal said:
Thanks! I'm not too worried about the exact spacing, though I expect if I get around to installing a global reset it would help me take care of that. I wouldn't even have worried about it if I didn't know for sure I had people needing to view the site in IE 6-7.

jW
Click to expand...

The spacing issue I mentioned is likely not even worth worrying about. I mean, I'm talking about maybe a 5-10 pixel difference in the 2 layouts. There is no way most people would even notice it.

I don't have IE 6 as I mentioned, but you could probably just run the site through one of those browsershot sites to see what it looks like. They are good enough for testing something that small. I think the address of one of them is browsershots.org .
 
I submitted the request to browsershots.org, and got back two screenshots from IE 7 and IE 6, but the video has now been bumped down below the menu. Maybe I just need to play with the widths a bit, but I'll have to look at the sizes.

jW
 
You must log in or register to reply here.
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.
Top Bottom
Back