Sent by Michael Landis on 25 January 2004 23:11
Ken wrote (about http://kpmartin.com/quickies/sri.test6.html):
> The layout looks good in PCIE, Mac Mozilla, Opera and Safari. In
> Mac IE5: utter and absolute destruction.
Hi, Ken,
Although I don't have a Mac readily available, since you're using
font-based dimensions and positions for your absolute elements, I'd guess
that the issue is with defining the font size on BODY, not HTML. The quick
fix is to move the font-size declaration from BODY to HTML. (On another
note, I'd also suggest changing it to a percentage instead of ems, to
prevent IE PC from freaking out when you change font sizes. IE needs a
non-em base for all em-based font sizes, or else users who have "larger" or
"largest" get freakishly large fonts, and those with "small" or "smaller"
get type that is only readable by bacteria.)
Basically, IE Mac improperly equates "parent element" with "containing
block". According to the specs[1], em dimensions are based upon the
computed font size of the element. Font sizes are based upon the computed
font size of the element's parent (as determined by looking at the source
code). In this case, BODY should be considered the parent element.
IE Mac apparently gets confused when dealing with the fact that absolute
elements get their positioning based upon the element's containing block,
not the element's parent. According to the specs[2], the containing block
for normal and relative elements are those element's parents. The
containing block for absolute elements, however, is the closest ancestor
that is also positioned, or the initial containing block (HTML) if there is
not positioned ancestor.
According to the specs, then, an absolute element that isn't in another
absolute element should determine its top and left position based upon
HTML. That absolute element's em-based dimensions, however, should be
computed according to the font size of that element's parent based upon the
document source, not the containing block. IE Mac messes that up.
By defining your font size on HTML instead of BODY, though, you get around
this. All other browsers work fine with this, too, since the font size
simply inherits through BODY as usual.
HTH,
MikeL
[1] http://www.w3.org/TR/REC-CSS2/syndata.html#em-width
[2] http://www.w3.org/TR/REC-CSS2/visudet.html#containing-block-details
______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
http://www.css-discuss.org/mailman/listinfo/css-d
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/