Re: [css-d] Firefox behaviour - Child element margins applied to parent elements instead
Philippe Wittenbergh wrote: > On Jul 25, 2007, at 8:05 PM, Tony Haddon wrote: > > >> My problem lies in the margin I've applied to the h1 element here. >> It ought >> to offset the h1 block from the containing #inner element. In IE6 >> it works >> as planned, but Firefox appears to apply the margin to the element >> two steps >> up the tree e.g. the #outer element. >> > > The behaviour in Firefox, and Opera, Safari, iCab, Konqueror and all > other modern browsers is correct and expected. It is called escaping > margins sometimes. > IE is wrong because your parent container (#outer) has a width > applied, which trigger the dreaded 'hasLayout' property. > Tony, For more information about the concept Philippe is talking about, see this article: http://www.complexspiral.com/publications/uncollapsing-margins/ Zoe -- Zoe M. Gillenwater Design Services Manager UNC Highway Safety Research Center http://www.hsrc.unc.edu __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Firefox behaviour - Child element margins applied to parent elements instead
On 25/07/2007 12:05, Tony Haddon wrote: > My problem lies in the margin I've applied to the h1 element here. > It ought to offset the h1 block from the containing #inner element. > In IE6 it works as planned, but Firefox appears to apply the margin > to the element two steps up the tree e.g. the #outer element. The XML prologue is causing IE to go into quirks mode, so you may want to remove this. Secondly, to get the spacing you want, instead of using margins on the h1 element, you could try padding your #outer element instead, and zeroing the margins on the h1 element. -- http://antanova.blogspot.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Firefox behaviour - Child element margins applied to parent elements instead
On Jul 25, 2007, at 8:05 PM, Tony Haddon wrote:
> My problem lies in the margin I've applied to the h1 element here.
> It ought
> to offset the h1 block from the containing #inner element. In IE6
> it works
> as planned, but Firefox appears to apply the margin to the element
> two steps
> up the tree e.g. the #outer element.
The behaviour in Firefox, and Opera, Safari, iCab, Konqueror and all
other modern browsers is correct and expected. It is called escaping
margins sometimes.
IE is wrong because your parent container (#outer) has a width
applied, which trigger the dreaded 'hasLayout' property.
> The only fix I have been able to find is putting a border on the
> #inner
> element (see example at
> http://www.tonyhaddon.com/cssbug/test2.html) www.tonyhaddon.com/cssbug/test2.html>.
That is one way to solve your problem.
> This seems to apply the padding in all the right places...
I think you mean 'margin' there (padding is _not_ the same a margin).
> but now I have a
> border on my #inner that I don't want!
In your case, you also could also use a tinny amount of padding-top
for #inner.
#inner {padding-top:1px;}
Philippe
---
Philippe Wittenbergh
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Firefox behaviour - Child element margins applied to parent elements instead
Hi All,
I hope this isn't something that's come up before. Seeing as it's not in the
lists of usual bugs in browsers, I'm guessing it might be my ignorance
rather than a poorly implemented recommendation. I hope someone can
enlighten me as it's something that's repeatedly come up and I've never
found a way around it other than the one I'll outline which isn't what I
want at all...
I've built a proof of concept. See link below
http://www.tonyhaddon.com/cssbug/test.html
Markup here is
-
http://www.w3.org/TR/2000/REC-xhtml1-2126/DTD/xhtml1-strict.dtd
">
http://www.w3.org/1999/xhtml"; xml:lang="en" lang="en">
@import url('includes/cssbug.css');
Test Page
Header
-
And my CSS is:
body {
background: #cc;
padding: 0;
margin: 0;
}
#outer {
width: 900px;
background: #ff;
}
#inner {
height: 100px;
/*border: solid 1px;*/
}
h1 {
margin: 50px 0 0 10px;
padding: 0;
background-color: Red;
}
-
My problem lies in the margin I've applied to the h1 element here. It ought
to offset the h1 block from the containing #inner element. In IE6 it works
as planned, but Firefox appears to apply the margin to the element two steps
up the tree e.g. the #outer element.
The only fix I have been able to find is putting a border on the #inner
element (see example at
http://www.tonyhaddon.com/cssbug/test2.html).
This seems to apply the padding in all the right places... but now I have a
border on my #inner that I don't want!
Can anyone make any suggestions?
Thanks in advance
Tony
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
