The reason I placed the site within a table with 3 columns is because I'm wanting the site to have shading at left and right (34px width for each). Easy to do if the site is a fixed width (just create a background image with shading), but not so easy if the site is expandable as the shading should obviously expand with the site but stick to the outer edges. I thought that I could set the left hand shading in the first <td> and then put the rest of the site in a middle <td> and then the right hand side shading in another <td>. However as you said it may be the absolute positioning that's making it difficult.
Lee
Ingo Chao wrote:
Virtuallee schrieb:
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
-- No virus found in this outgoing message. Checked by AVG Anti-Virus. Version: 7.0.308 / Virus Database: 266.11.0 - Release Date: 29/04/2005
______________________________________________________________________ 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/
