Inline object drops down in IE6 and IE& ... HELP! |
Inline object drops down in IE6 and IE& ... HELP! |
abruzzopat |
Jan 12 2011, 05:17 PM
Post
#1
|
Group: Members Posts: 5 Joined: 12-January 11 Member No.: 13,582 |
I would really appreciate any help on this issue. I have a header DIV working fine in IE8, Chrome and Firefox, but in IE6 and IE7 it behaves differently and nothing I have tried helps.
I suspect I am not the only one with this issue, and there must be a fix, but I have tried searching the forum and any related topics don't seem to help. Here's the site: http://www.belloabruzzo.com/sandbox/sandbox.html Here is the issue: In Chrome, IE8 and Firefox, the logo and the menu appear side-by-side (this is what I want), but in IE7 and IE7, the menu drops down below the logo. I have tried "display:inline" and some other tweaks with no success. If someone knows about this issue and the correct fix, I would be very grateful! -pat PS: Here's the actual HTML/CSS <html> <head> <STYLE type="text/css"> #header {width:900px; text-align:left; background:cornsilk; } ul.menu {width:80px; text-align:left; float:right; border:2px solid black; } body {background:gray; } </STYLE> </head> <div id="header"> <a href="index.html"><img src="logo.jpg" alt="missing" border="0"/></a> <ul class=menu> <li>Choice 1</li> <li>Choice 2</li> <li>Choice 3</li> <li>Choice 4</li> <li>Choice 5</li> </ul> </div> </html> |
Darin McGrew |
Jan 13 2011, 12:28 AM
Post
#2
|
WDG Member Group: Root Admin Posts: 8,365 Joined: 4-August 06 From: Mountain View, CA Member No.: 3 |
Your page has no doctype declaration, which throws browsers into quirks mode. See also:
http://hsivonen.iki.fi/doctype/ |
abruzzopat |
Jan 13 2011, 09:09 AM
Post
#3
|
Group: Members Posts: 5 Joined: 12-January 11 Member No.: 13,582 |
Thanks for the response Darin.
Unfortunately that's not the cause of the problem. What I posted was just a stripped down version of my web page which does have doctype declared. I added it to the sandbox version anyway, and ran it through http://validator.w3.org, and it's clean. Any other suggestions? -pat |
pandy |
Jan 13 2011, 10:01 AM
Post
#4
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
Float drops are always because there isn't room enough for the float. So make some more room.
FYI the float drops not only in IE6 but also in the gecko version I happened to try first. When I tried a newer FF it stayed put. |
abruzzopat |
Jan 13 2011, 10:38 AM
Post
#5
|
Group: Members Posts: 5 Joined: 12-January 11 Member No.: 13,582 |
Thanks Pandy.
Pretty sure that's not the problem either as my DIV is 900px wide, and the two elements (logo and menu) are less than 400px together, so there's plenty of room. And it works fine (with lots of space between elements) in IE8, Chrome and Firefox. It's something specific to early IE which drops this float no matter how much space there is to the right of the element it comes after. Here's the example: http://www.belloabruzzo.com/sandbox/sandbox.html Thanks again. |
pandy |
Jan 13 2011, 10:42 AM
Post
#6
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
If there was enough room the float wouldn't drop. Have you taken all margins, padding and borders into account?
IE also has bugs related to floats that among other things in some situations make it add extra margin to a float. QUOTE It's something specific to early IE which drops this float That may very well be, but it doesn't explain why it drops in my gecko. |
abruzzopat |
Jan 13 2011, 10:50 AM
Post
#7
|
Group: Members Posts: 5 Joined: 12-January 11 Member No.: 13,582 |
Hi Pandy. Did you have a chance to look at the HTML/CSS? It's ultra simplified with no padding or margins. Just for grins I removed the only border, and it still drops.
Here's the code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Sandbox</title> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <style type="text/css"> #header {width:900px; text-align:left; background:cornsilk; } ul.menu {width:80px; text-align:left; float:right;} body {background:gray; } img {border: 0px none; } </style> </head> <div id="header"> <a href="index.html"><img src="logo.jpg" alt="missing"></a> <ul class=menu> <li>Choice 1</li> <li>Choice 2</li> <li>Choice 3</li> <li>Choice 4</li> <li>Choice 5</li> </ul> </div> </html> |
pandy |
Jan 13 2011, 10:53 AM
Post
#8
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
Oops! I hadn't looked at the HTML. You are right, there really isn't much there.
If you put the list before the image in the source it will fix your problem. Alternatively you can float the link left. FF must have changed behavior with this recently. A little odd, must check on that. Anyway, IE is not the only browser that do it the way it does. |
abruzzopat |
Jan 13 2011, 12:13 PM
Post
#9
|
Group: Members Posts: 5 Joined: 12-January 11 Member No.: 13,582 |
Pandy said: "If you put the list before the image in the source it will fix your problem."
Interesting... you're right. It never occurred to me to do that. Seems odd. Thanks! |
pandy |
Jan 13 2011, 02:48 PM
Post
#10
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
Well, that's the way it used to work and I thought it still did, so thank YOU.
It used to be that a float moved as far out as it could from the position it would have been at had it not been floated. Since UL is a block level element, that would be below the image. I faintly recall, after lots of brooding, that maybe it turned out this wasn't the correct behavior and browser behavior started to change, but I'm not sure. That part of the spec is somewhat esoteric. Have to read it again. |
Lo-Fi Version | Time is now: 23rd April 2024 - 09:49 AM |