Internet Explorer 5 Mac: oddities

Jump to navigation

Float weirdness : wrong interaction between floated block level elements and static <div>s.

According to the CSS2 specifications [1] the floated block should be displayed against the edge(s) of the containing block, and then the static element will be displayed against the same edge(s). The contents of that static block should flow around the floated container; the floated block is positioned over the static block.

In IE Mac, if the static block is a <div> it is pushed to the side by the (left–) floated block that precedes it in the code, even if the static <div> has no width declared [2]. It is as if the static div has a margin equal to the total width of the floated block. This only applies to <div>s; other elements behave according to the specs in this. Note also that both left– and right–floated boxes behave the same way.

Case #1: static elements without a width defined.

A simple 2 column layout. The left column is a left–floated <div>: #box1 (lime green border), with a declared width of 250px and a margin-right set to 15px. No width is declared on the static <div>: #box2, that follows the floated box in the code; the static elements have a light yellow background. On purpose, the floated <div> has a transparent background. Expected behaviour for the non–floated <div>: the contents wraps around the floated box.

testfile 1: The right column is a <div>: box2. The whole <div> (with a red border), various paragraphs long, is pushed to the side, including border, padding. The contents does not wrap around the left floated box1, contrary to what should be expected. And watch the background colour on the first element in the static <div> extend under the floated box. HTML structure below:

<html>.....<body>
	<div id="box1">tada</div>
	<div id="box2><p>contents</p></div>
</body></html>

testfile 2: a left floated <div>, followed by a series of paragraphs <p>. The contents of those paragraphs flows around the floated box1, as would be expected, according to CSS2 rules.

<html>.....<body>
	<div id="box1">tada</div>
	<p>contents</p>
	<p>contents</p>
</body></html>

testfile 3: Similar to the previous test, for good measure, lets add a <div>, box3, in there. Box3 (dark green background), contains only one paragraph, and is pushed aside by the floated box1 (see the border and the background-colour), but watch the contents of that box3 flow around the floated <div> (resize the window if needed). Notice that, contrary to what happened in test1, the margin on the floated div has no effect on this <div>. If we add more paragraphs to the <div>, then it becomes really weird; only the text for the first paragraph wraps around the floated box. See testfile3_2.

<html>.....<body>
	<div id="box1">tada</div>
	<p>contents</p>
	<div id="box3">tada</div>
	<p>contents</p>
</body></html>

All above test can be repeated with a right floated box (sample testfile 4), with the same results. Other blocklevel tags (blockquote, pre, p, headings, lists, and more) are unaffected. Solutions ? None really so far. Avoid the offending combinations by using more semantic mark up......

Screenshots form the various testpages;
all screenshots: IE5.23/OS x 10.3

Case #2: static elements with a width defined.

A fixed width <div> acts as a wrapper for a floated <div> and some paragraphs of text. The <p>'s have a fixed width that matches the parent <div>. The paragraphs actually expand out of the parent <div>, see testfile 5. IE mac applies the width to the inline box created by the text, and as the specs suggest, to the content box. Expected behaviour: the <p> remain within the boundaries of the parent <div>. The workaround is easy, don't specify a width.

But with width defined static boxes things can get a bit more complicated. In the case of a left–floated box follow by a width–defined static <div>; the behaviour is fairly consistent with the above testfile(s): the static <div> is neatly positioned next to the floated box (sample). But in case of a right–floated box, the floated box is positioned in the top right corner of its parent, and in case the window is not wide enough to put both floated box and static box side by side, the floated box overlays the static box (sample). Nearly correct behaviour ? Nearly, IE mac displays a serious horizonal scrollbar, equivalent to the space occupied by the floated box if it was put to the side of the static <div>. And watch the background color on the paragraph in the static box expand to the full width of the viewport (the text could wrap under the floated box).

With other width–defined block elements, the behaviour is even more interesting. Sample 5–22 shows a <p> and a <blockquote> following a floated box. Both should be 550px wide. However, they expand to the full width of the viewport, and the first line of text displays partly under the floated box. Magic magnetism? The floated block is pulling at the contentsblock of the static elements. So far I haven't been able to able to control this magic.

Screenshots form the various testpages;
all screenshots: IE5.23/OS x 10.3

See also the next page for miscellaneous float bugs.

notes

section - contents

Also around here
[ Empty spaces ]
a weblog

This collection of documents and test cases related to Internet Explorer 5 for Mac is no longer maintained and is only kept online for historical reasons.

Comments and suggestions: are not needed anymore. Thanks to all who provided info and tips in the past.

File created: July 21, 2002. Last modified: September 09, 2009

back to top

permanent location: http://www.l-c-n.com/IE5tests/float/index.shtml.