Forum Moderators: not2easy
Mozilla 1.3 renders some of my pages differently to all other browsers. After I raised it in HTML & Browsers, I received emails from a Boris Zbarsky stating that Mozilla 1.3 is correct - which makes all other browsers incorrect!
He quoted as an example (which is near enough to my xhtml):
div style="position: relative" id="one">
<div style="float:left; height: 100px" id="left" />
<div style="float:right; height: 100px" id="right" />
</div>
<div style="position: relative" id="two" />The _correct_ (per CSS) rendering of this is that the div with id="one" has a height of "0", the div with id="two" starts right where the one with id="one" ends, and the floats overlap it.
Mozilla prior to 1.0 would incorrectly make the div with id="one" 100px tall, based on its contents.
I maintained that the div id="one" encloses the two divs id="left" and id="right" and is supposed to expand to accomodate the height of the floated divs.
But he came back with:
If they were not floated, that would be true. But floated elements are taken out of flow and do not affect the heights of parents. See [w3.org...] which says:Since a float is not in the flow, non-positioned block boxes created before and after the float box flow vertically as if the float didn't exist.
Also see the second illustration in that section, which clearly shows that a float is not contained by its parent.
Is there a CSS guru here who can tell me which interpretation is correct?
[edited by: Nick_W at 1:59 pm (utc) on April 28, 2003]
[edit reason] no 'sticky' references please [/edit]
I'm sorry Harry, but I think that your interpretation is not the correct one!
Your Mr Z has explained the problem very well..the floats are out of the flow so the container in your is empty..therefore it has no height, so if you position your next block div relative to it it will go right up under the floats...
You could add in <div style="clear: both"></div> (above and below the floated divs) to give the container div (id="one" in the example")some "actual" content..usually this done so that the container div can be formatted in some way..I presume it would work for positioning reasons too..
Suzy
I was beginning to come to that conclusion. :(
But at least the fix is quite easy.
Harry
Mozilla 1.3 was cuasing me great confusion over this very issue, but you guys let me pinpoint my problem.
Thanks alot ;)
You have to set width with values other than `auto` to `float:left¦right`. However, this is permitted by CSS2.1.
[w3.org...]
You could add in <div style="clear: both"></div> (above and below the floated divs) to give the container div (id="one" in the example")some "actual" content.
I assume you mean:
<div class="container">
<div style="clear: both"></div>
<div style="float:left"> blah, blah </div>
<div style="float:right"> blah, blah </div>
<div style="clear: both"></div>
</div>
I have tried this and it works fine in everything except IE4.7 where the browser freezes when it tries to render the area with <div style="clear: both"></div>.
Is this normal? Or am I doing something wrong :(
first I've heard of this I wonder if adding a   or a"." into the div would help, maybe it's choking on the empty div
CSS:
.clear{
clear: both; height: 0px;
font-size: 0px; line-height: 0px;
}
HTML
<div class="wrapper">
<div class="clear"> </div>
<div class="floatl">left float</div>
<div class="floatr">right float</div>
<div class="clear">.</div>
</div>
I don't have IE4.7 to test on, can't keep up with all these browsers...
Anyone else know of a way?
Suzy
I wonder if adding a   or a"." into the div would help, maybe it's choking on the empty div
I tried that but eventually came to the conclusion it was just that IE4 didn't like "clear:both". A google search confirmed it.
[codestyle.org...]
My solution is yet another browser-specific style-sheet. This one contains just the "clear-both" attributes for the relevant divs and gets linked to any browser with a major version of 5 or above.
It would be nice to get away from this sort of workarounds. :(
[edit] Thankfully "clear:both" isn't needed in IE4 because like all current IE browsers, container divs expand to contain the floated divs [/edit]
[edited by: Nick_W at 7:05 am (utc) on Mar. 21, 2003]
[edit reason] Tidied up link [/edit]
<div id="main">
<div style="clear: both"></div>
<div class="floats_left>img</div>
<div class="floats_right>
<div class="title">title</div>
<div class="article">article text</div>
</div>
<div style="clear: both"></div>
</div>
The clear:both is not correcting the problem in mozilla.
The floated divs are still escaping the "main" div, which is my container.
Is it just that I am positioning the clear:both divs incorrectly?
I have tried them with and without content.
