IE Headings and space

[ninja2001k]

Can someone please explain to me why in IE heading have more space above them than when using FFox OP etc.

I have the following css set

body, html, form, h1, h2, h3 {
padding:0;
margin:0;
}

Just in a simple div with do margin or paddings (set 0)

<div>
<h1>IE IS A PAIN</h1>
</div>


the text is aligned at the top of the div, no space in everything other than IE, please can someone help.

IE has about a 7px space from the top of the div and the text.



http://www.funkel.co.uk/ieproblem/aftercare2.html

if you can see where it says "After Care Advice" the H1's in IE7 anf FF there is a gap appears between the top the the containing div.

thanks

[rangana]

Try to reset the margins:


*{margin:0;padding:0;}


The snippet you've provided works fine at my end (with a DTD (http://alistapart.com/articles/doctype)).

For your problem, doing the reset will work. Or alternatively, try to add highlighted:


.content-bg h1 {
margin-top:0px;
}

.content-bg h2 {
color: #d3794a;
padding: 0 25px 1em 25px;
font-size: 1em;
margin-top:0px;
}

[ninja2001k]

Try to reset the margins:


*{margin:0;padding:0;}


The snippet you've provided works fine at my end (with a DTD (http://alistapart.com/articles/doctype)).

For your problem, doing the reset will work. Or alternatively, try to add highlighted:


.content-bg h1 {
margin-top:0px;
}

.content-bg h2 {
color: #d3794a;
padding: 0 25px 1em 25px;
font-size: 1em;
margin-top:0px;
}

Thanks for your time looking at my issue, and providing that usefull link ;) cheers