IE layout problem
Isn't it always an IE problem? I didn't see this problem at home at all with IE7 so perhaps this is only an IE6 problem, but I'm not sure. In any case, I redesigned my homepage with a horizontal navigation menu from Dynamic Drive. In Firefox the bottom of the header (and my name) are flush against the top of the navigation menu. In IE6 (on WinNT) there is a large gray bar between the header and the menu. I don't think this has anything to do with the menu itself, but probably about the div that the menu resides in.
Other than some inline css on the page itself, the rest of the CSS layout is determined by my stylesheet which can be found at the normal location of /style.css
First, can others please confirm that it looks fine in both Firefox and IE7 (and purely out of curiosity, in Opera too)? And confirm that it does 'break apart' in IE6? Then the all important question... can this be easily fixed without the need for a sniffer and multiple style sheets?
Thanks
P.S. Once I get this fixed and more of the site up and running I'll bring it over to the critique area for some peer review. (It's been a while but I still remember the 'review others first' rule.)
Brooke posted this at 17:31 — 12th February 2007.
She has: 681 posts
Joined: Feb 1999
Hey - try removing the space and the / after alt="" in this line:
use this:
demonhale posted this at 02:21 — 13th February 2007.
He has: 3,278 posts
Joined: May 2005
Let me help you out... See you can't have an "image" tag hanging with a "span" inside a single div. IE doesn't understand it... (I checked and there are errors for IE)...
The solution is to wrap an image with a div and declare it's height, forcing it to position itself properly...
Don't touch the CSS, it's ok... Just see your html...
Heres a before and after shot:
Just below the tag...
Before<div id="container">
<div id="header">
<img src="/graphics/headers/rotator.php" width="900" height="150" alt="" />
<span style="position:absolute; top: 94px; left: 20px">Mike Sussman</span>
</div>
<div id="menu">
Add this
After<div id="container">
<div id="header">
<strong><div style="height:150px;"></strong><img src="/graphics/headers/rotator.php" width="900" height="150" alt="" /><strong></div></strong>
<span style="position:absolute; top: 94px; left: 20px">Mike Sussman</span>
</div>
<div id="menu">
Everything is fixed after that...
fifeclub posted this at 14:17 — 13th February 2007.
He has: 688 posts
Joined: Feb 2001
You are a genius. I had never heard that rule before, and that totally fixed it with ease. Thank you!
For the record, if I had (for some unknown reason) decided to put the second part in a div instead of a span, would that have been a problem? Now I'm trying to figure out if there's ever a need to use instead of in the first place, but that's a whole 'nother ball of wax.
Roo posted this at 06:57 — 13th February 2007.
She has: 840 posts
Joined: Apr 1999
Brooke,
The image tag has to be written that way when using XHTML. All tags get closed in XHTML and the way you close tags that were not closed in HTML 4X is like that:
Line breaks get closed too:
meta tags also get the space and the /> added to them.
Roo
Brooke posted this at 13:37 — 13th February 2007.
She has: 681 posts
Joined: Feb 1999
Thank you Roo! I learn something new every day!
demonhale posted this at 02:56 — 14th February 2007.
He has: 3,278 posts
Joined: May 2005
If you changed the spans on that area to divs that would also work in this case, but semantically, it would be better to use a div to wrap multiple tags wouldn't it?...
Just remember spans are useful for specific element formatting, see w3c.org...
Want to join the discussion? Create an account or log in if you already have one. Joining is fast, free and painless! We’ll even whisk you back here when you’ve finished.