Help - Search - Members - Calendar
Full Version: Inline object drops down in IE6 and IE& ... HELP!
HTMLHelp Forums > Web Authoring > Markup (HTML, XHTML, XML)
abruzzopat
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
Your page has no doctype declaration, which throws browsers into quirks mode. See also:
http://hsivonen.iki.fi/doctype/
abruzzopat
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
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
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
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
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
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
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
Well, that's the way it used to work and I thought it still did, so thank YOU. smile.gif

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.
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2018 Invision Power Services, Inc.