Sent by Philippe Wittenbergh on 5 February 2010 08:08
On Feb 5, 2010, at 7:07 AM, Ari Army wrote:
> So I had a repeating background on the body tag.
> and had 2 child divs. The 1st one must be positioned absolutely to match the
> repeating background on body tag...
> so i put a 'position: relative' on the body tag,
> and a 'position: absolute' on the #picture div... the #picture may end up
> going behind the 2nd sibling content div #content so hence why another
> season why its absolutely positioned.
>
> Anyway, the 2nd div (#content) has margins that shouldnt affect the
> absolutely positioned div (i think?), but it does for some crazy reason I
> cant figure out (in FireFox 3.5.7 btw).
>
> If I remove the 'position: relative;' tag off body and apply it to the #blah
> containing div, same result...
>
> if i remove 'position: relative' and allow it to default at the
> viewport/body then it works... i just am wondering why it doesnt work when i
> put 'position:relative' it on body tag.
>
> So basically here is a test case:
> http://arianhojat.com/temp/test.html
The joys of margin-collapse through. Nothing wrong, everything according to spec.
Try adding a border to your #blah.
or add this to your stylesheet
html {background: lime;}
See ? you AP div goes right where you want it: 10px of the top-edge of <body>.
What is happening: the margin-top of your #content 'collapses' through the edge of body, as there is
nothing to prevent it, and pushes the body downwards.
If you add a border to #blah, it prevent that margin-top on from collapsing through the edge of
body.
Adding a background-color to <html> visualises what is actually happening in your test case
Philippe
---
Philippe Wittenbergh
http://l-c-n.com/
______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
