On Mar 19, 2006, at 6:35 AM, <[EMAIL PROTECTED]>
<[EMAIL PROTECTED]> wrote:
Test site: www.designbyatfb.com/designs/golfintro.html
The background-image in the
}
#containerDiv{
position: relative;
top: 0px;
width: 800px;
margin-top: auto;
height: 100%;
color: rgb(128, 128, 128);
overflow: visible;
background: transparent url(css-images/swing.gif) no-repeat ;
background-position: bottom;
}
disappears when the page is resized in Fire Fox v 1.0.7 and Mozilla
1.7.12. It does not even appear at all in Opera 8.02
If page is opended at 800x600 it is fine. If it is opened at
1024x768 or higher, it is fine.
If you resize after the initial view it disappears until your
refresh. I have tried different Doc types, and encodings, nothing
makes any difference.
it simply never appears on my side (Firefox 1.5, Camino 1.0, Safari
2.03, Opera 9 TP2). And that is correct.
Your #containerDiv is pretty much empty, because it mainly contains
two floated blocks, which by definition are taken out of the flow.
That #containerDiv collapses in height, and hence can't show your image.
And no, your 'height:100%' won't do anything, as it is impossible to
calculate that height, given that no height has been specified on any
parent.
It happens to wrok in IE windoze, because declaring a height in that
browser gives the element 'layout' [2], and contains the floated
blocks.
#containerDiv {display:table}
will fix your problem, by establishing a new block formatting context
[1], which will contain your floated blocks.
[1] <http://dev.l-c-n.com/IEW/simulations.php>
<http://www.w3.org/TR/CSS21/visuren.html#block-formatting>
[2] <http://www.satzansatz.de/cssd/onhavinglayout.html>
Philippe
---
Philippe Wittenbergh
<http://emps.l-c-n.com>
******************************************************
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help
******************************************************
