Another example:
.outer {background: green; }
.inner {background: red; padding: 1em; border: 1px solid black;}
<span class="outer"> outer <span class="inner"> inner </span></span>
should let stick the red out of the green, and Fx and Opera do confirm.
But not in IE: the green is expanded by the red.
Now, when this outer span gets "layout"
(in Quirks mode, with a width, in standards mode, via zoom:1)
.outer {background: green; zoom:1}
.inner {background: red; padding: 1em; border: 1px solid black;}
The red inner span is cut off.
But when you add position:relative to the inner span
.outer {background: green; zoom:1}
.inner {background: red; padding: 1em; border: 1px solid black;}
The inner span is complete.
Or a nice illustration of the true evil face of 'hasLayout'.
It also illustrates serious shortcomings in MSIE's line-box model.
But there is not much information on the subject out there.
There is the very theoretical article by Eric Meyer [1], which, while
not very recent, is still pretty accurate for CSS 2.1. There is equally
theoretical article by David Baron [2]. Besides that, there isn't much
out there, as far as I could see.
Serious browsers (Gecko, Opera, Webkit) do follow this model fairly
correctly.
IE Win is another matter.
Does anyone know of an article that analyses the working of the
line-box model in MSIE browsers ?
[1] <http://www.meyerweb.com/eric/css/inline-format.html>
[2] <http://dbaron.org/css/2000/01/dibm>
Philippe
---
Philippe Wittenbergh
<http://emps.l-c-n.com/>
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
