I'm trying to get the width of my header (set to orange) and nav to be the same in Mozilla, IE and Opera. At the moment, IE and Opera are rendering the header and nav correctly (ie. there is a 34px margin at left and right of the site).
Did you have a glance with Opera8 too? Here, the td "contains" the #nav.
In Mozilla, the header and nav extend too far to the right.
<body> <table class="tableouter" ><tbody><tr> <td class="column-left"> <img src="shadow_left.jpg" class="shadow-left" alt="" width="34"> </td>
<td class="column-center">... <div id="header">...</div> <div id="nav">...</div> </td>
<td class="column-right"> <img src="shadow_right.jpg" class="shadow-right" alt="" width="34"> </td> </tr></tbody></table></body>
#header { position: absolute; left: 34px; top: 0; right: 34px; width: 100%; ...} /* btw. this is over-constrained */
#nav { ... position: absolute; left: 0pt; top: 118px; right: 0pt; ... height: 25px; margin-left: 34px; margin-right: 34px; width: 100%; }
I think Moz is right by calculating a.p. header's width:100% with respect to the containing block, and the c.b. is not the td:
CSS2.1 10.1.4 "If the element has 'position: absolute', the containing block is established by the nearest ancestor with a 'position' of 'absolute', 'relative' or 'fixed'"
IE6, Opera7.54 and (sigh) Opera8 are wrong. They stagnate at CSS1: they calculate the offset (top:0, left:34px) with respect to the c.b. (body), but width:100% with respect to the parent (td.column-center)
http://www.satzansatz.de/cssd/tmp/apboxpercentagewidth.html
As mentioned before, in Op8, the td "contains" the a.p. nav. I would file this as a bug or regression from 7.54, but I'm not sure, is this a Acid2 line? Can anyone explain this to me? What is Safari showing?
Also, my background images for the shading at left and right are not repeating vertically although they are set to do so. Not sure what's going on there.
.shadow-left { margin: 0pt; padding: 0pt; background: rgb(255, 255, 255) url('shadow_left.jpg') repeat-y; width: 34px; height: auto;}
I do not understand how this should ever work: a bg-img on a <img> (with a heigth="32px")?
Also, there seems to be some padding somewhere as the logo is further inset to the right in IE.#header p.logo { margin: 60px 0pt 0pt 30px; float: left; ... /*ic:*/display:inline;}
http://positioniseverything.net/explorer/doubled-margin.html
http://www.virtuallee.co.uk/KFS/index_kfs.htm
IMHO, I would question the layout by a.p. elements within a table in this early stage, looks like the differences in the browsers are too big. And the clocks are showing the wrong time.
Ingo ______________________________________________________________________ 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/
