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)<http:// 
> 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
<http://emps.l-c-n.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/

Reply via email to