Re: [css-d] IE6 vertical margin and padding differences
James Smith wrote:
Hi there, this is hopefully an easy one, but I'm struggling to find a clean
solution for IE6 without resorting to adding an extra div, floating the h1
element, or removing the container's width (all of which are inconvenient for
various reasons) -
Problem here is that IE6 doesn't honour both the container's padding-top and
the child's margin-top. Compare the following result in FF and IE6:
Nothing is easy.
* html #content{
padding-top:200px;
}
--
http://chelseacreekstudio.com/
__
css-discuss [EMAIL PROTECTED]
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/
Re: [css-d] IE6 vertical margin and padding differences
What about adding the underscore hack ?
h1 {
...
_margin-top:200px;
}
That will get the same result in IE6 as the one in FF.
James Smith wrote:
Hi there, this is hopefully an easy one, but I'm struggling to find a clean
solution for IE6 without resorting to adding an extra div, floating the h1
element, or removing the container's width (all of which are inconvenient for
various reasons) -
Problem here is that IE6 doesn't honour both the container's padding-top and
the child's margin-top. Compare the following result in FF and IE6:
Markup:
Heading 1
CSS:
*{margin:0;padding:0;}
#content{
width:500px;
padding-top:100px;
background:red;
}
h1{
margin-top:100px;
background:blue;
}
any help much appreciated,
James
__
css-discuss [EMAIL PROTECTED]
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/
__
css-discuss [EMAIL PROTECTED]
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/
Re: [css-d] IE6 vertical margin and padding differences
Thanks, I'll use one of those.
Do you know why this is happening? I thought I had encountered most IE bugs
before, but this doesn't seem to fall under any I've heard of - it doesn't even
seem to be down to the box model differences since I've not specified a height
on anything. It seems that the margin and padding are collapsing together since
IE6 will obey whichever one is higher in value, but not both.
Date: Fri, 23 May 2008 18:05:11 +0300
From: [EMAIL PROTECTED]
To: [EMAIL PROTECTED]
CC: css-d@lists.css-discuss.org
Subject: Re: [css-d] IE6 vertical margin and padding differences
What about adding the underscore hack ?
h1 {
...
_margin-top:200px;
}
That will get the same result in IE6 as the one in FF.
James Smith wrote:
Hi there, this is hopefully an easy one, but I'm struggling to find a clean
solution for IE6 without resorting to adding an extra div, floating the h1
element, or removing the container's width (all of which are inconvenient
for various reasons) -
Problem here is that IE6 doesn't honour both the container's padding-top
and the child's margin-top. Compare the following result in FF and IE6:
Markup:
div id=content
h1Heading 1/h1
/div
CSS:
*{margin:0;padding:0;}
#content{
width:500px;
padding-top:100px;
background:red;
}
h1{
margin-top:100px;
background:blue;
}
any help much appreciated,
James
__
css-discuss [EMAIL PROTECTED]
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/
Re: [css-d] IE6 vertical margin and padding differences
--- James Smith [EMAIL PROTECTED] wrote: Do you know why this is happening? I thought I had encountered most IE bugs before ... it doesn't even seem to be down to the box model differences since I've not specified a height on anything. It definitely looks like a hasLayout problem - this is probably the flavour of bug you're thinking of. As you say, setting height triggers hasLayout, but so does setting width (1). Looks like margin / padding is one of the victims (2). I *despise* hacks, though it may be your only option in this case. Are you sure you can't make semantic use out of a wrapper div? That, to me, would seem the lesser of two evils. - Bobby (1) See the 'classic': http://www.satzansatz.de/cssd/onhavinglayout.html#prop (2) http://www.brunildo.org/test/IEMarginCollapseLayout.html __ css-discuss [EMAIL PROTECTED] 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/
