IE8 and IE9 beta bidi-direction and block formatting context

Testing 8th March 2010.

If you use rtl text flow in a default page of ltr text flow, the setting on an element of the attribute dir="rtl" establishes a new block formating context or triggers hasLayout in IE8. If the <html> has the attribute dir="rtl" (normal for a page with rtl text flow), then the setting on an element of the attribute dir="ltr" establishes a new block formating context or triggers hasLayout in IE8.

Many thanks to Bruno Fassino for confirmation that querying the property for the box with dir="rtl" shows hasLayout = true in IE8. Also please see his test IE8, direction and new block formatting contexts.

Floats with a wrapper

1a. Float Left
This wrapper has the direction attribute rtl which triggers hasLayout in IE8 and causes this wrapper to contain the float

This should happen if the element had overflow with values other than visible such as auto, hidden or scroll (properties that establish a new block formating context).

1b. Float Left
This wrapper has overflow:auto which causes this wrapper to contain the float. This is correct.

A a new variant of the Guillotine bug. The content following will jump up if you hover the wrapper from the top, but only on the first instance. This is reset by refreshing the page.

1c. Float Left
This wrapper has the direction attribute rtl with text direction ltr in the CSS. This stops the bug in IE8

Toggling the above text direction ltr in the CSS by a hover transition produces an affect reminiscent of the Guillotine bug. The content following will jump up if you hover the wrapper from the top, but only on the first instance. This is reset by refreshing the page.

1d. Float Left
This wrapper has the direction attribute rtl with text direction ltr in the CSS. Since such amazing things happen, we can see or create an affect reminiscent of the Guillotine bug by changing the text direction to ltr on :hover

Floats with a sibling element in normal flow

2a. Float Left
This wrapper has the direction attribute rtl which triggers hasLayout in IE8 and causes this sibling element to not flow around the float

With text direction ltr in the CSS.

2b. Float Left
This wrapper has the direction attribute rtl with text direction ltr in the CSS. This stops the bug in IE8

This should happen if the element had overflow with values other than visible such as auto, hidden or scroll (properties that establish a new block formating context).

2c. Float Left
This wrapper has overflow:auto which causes this sibling element to not flow around the float

Collapsing margins

With example 3a, IE8 shows correct behavior. The top margins of these descendant elements collapses and stick out beyond the container, thus pushing the container down from the grey div by 20 pixels and pushing the bottom grey div away from the container by 20 pixels.

3a. Paragraph (with default vertical margins)

With example 3b IE8 shows wrong behavior. The paragraphs' and divs' top margin does not collapse into the adjoining vertical margin of the container and stick out beyond the container, but are contained by the containers' content/padding edge since hasLayout has been triggered on the wrapper element. This should only happen if the container has padding or a border. Please see further test cases for IE7-hasLayout and margins.

3b. Paragraph within wrapper with direction attribute rtl

Collapsing margins and floats

Please see further test cases for IE7- with floats and block elements not aligning due to non collapsing margins.

Float left

4a. Paragraph

Space
Float left

4b. Paragraph within wrapper with direction attribute rtl

Space

Collapsing margins and absolutely positioned elements

Please see further test cases for IE7- with absolute positioning with block elements not aligning due to non collapsing margins.

ap.

5a. Paragraph

Space
ap.

5b. Paragraph within wrapper with direction attribute rtl