Forum Moderators: not2easy
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Sample</title>
<style type="text/css">
#nav {
float: left;
width: 9em;
}
#content {margin: 0em 0em 0em 9em;}
</style>
</head>
<body>
<div id="nav">
here be some text and some links and something to make space
here be some text and some links and something to make space
here be some text and some links and something to make space
</div>
<div id="content">
<p>text above</p>
<p><img src="desk.jpg" width="400" height="300" alt=""></p>
</div>
</body>
</html>
I'd expect the navigation div to be floated into the margin of the content div, and then not affect the formatting of element inside the content div, but in IE6 if the window is too narrow for the image, the image is pushed below the navigation division, leaving an ugly gap. Firefox renders the page as I expect
In the full design, I also see peek-a-boo type bugs, the text above the image vanishes, but that doesn't happen in the example above. (The full design has more content, a top div, a bottom div and colours, and is in Japanese.)
I've read up on peekaboo bug, but I can't fix this behaviour with line-height, height: 1% or other tricks.
James Kilfiger
Sounds to me like the doubled margin bug :)
So I searched for Doubled margin bug, and I don't think that's it. That seems to deal with strange horizontal space. In my case it seems the image is being cleared below the the float when the window is made too narrow; creating strange vertical space.
Anyway I tried the fix recommended for the doubled margin bug (make float display:inline) but it had no effect.
James Kilfiger
and what a start :)
It is, believe or not, IE's "peculiar" Float Model and the 3px Text jog [positioniseverything.net] Bug combined..
put some background colors onto the body and divs in your code and you'll see the 3px gap between the image and the nav..
Unfortunately there's not a cure (that I know of) for this manifestation of the bug.. the page above details a way to fix it which works on the block element immediately following the float. This manifestation of the bug is triggered on any dimensioned element that comes into contact with the float not just the container..
IE then thinks that the width of the image (in your case, but I also tested it with a <p> ) + the width of the nav is 3px more than their container (body in your case, I also tried a wrapper) so it moves the image down to where *it* thinks there is enough room for it.. and that's below the float where the bug stops triggering!
even if you trigger the IE5.5 float model by trying to "fix" the bug on the container It then just moves the whole of the content down below the float.
not sure about solutions in this case, yet ;)
Suzy
I'm going to bite the bullet and try using absolute positioning to place the navigation box. I'd been shunning positioning as "too difficult", but maybe easier than this.
Thanks again
James Kilfiger.
