Padding differences in IE vs FF

[Hello World]

Why can't I get the padding to look the same? here (http://www.classymannequins.com/our-guarantee.php)

Here is the HTML:


<div style="text-align:center" class="guaranteeBox">

<h1 class="guaranteePageHeading">100% Money-Back<br />Satisfaction Guarantee</h1>

<p class="guaranteePageText">We stand behind all of our products. If, for any reason you are unsatisfied with your purchase, you may return any undamaged item to us within 10 days of the delivery date and we will issue you a prompt and courteous refund for the full cost of the item.</p>

<p class="guaranteePageText"><a href="[~554~]" title="Membership benefits">Learn about our extended 30 and 60-day money back guarantees!</a></p>

</div>

...and the CSS:


h1.guaranteePageHeading {
font-size: 22pt;
font-family: georgia,verdana, arial, serif;
line-height: normal;
margin: 0;
padding: 65px 0 20px 0;
text-align: center;
font-weight: normal;
letter-spacing: 1px;
font-variant: small-caps;
}
p.guaranteePageText {
font-size: 8pt;
font-family: verdana, arial, serif;
line-height: 1.3em;
margin: 0;
padding: 5px 10px 5px 50px;
text-align: left;
width: 420px;
}
p.guaranteePageText a {
color: #7C6E01;
font-weight: normal;
text-decoration: underline;
}
p.guaranteePageText a:hover {
color: #000000;
}


div.guaranteeBox {
background-image:url('guarantee_certificate.jpg');
background-repeat: no-repeat;
background-position: top center;
text-align: center;
width: 555px;
height: 422px;
margin: 15px 15px 15px 5px;
padding: 0;
/* background-color: #E4E3B6;
border: 2px solid #877C00;
padding-bottom: 10px;
margin: 20px 20px 0 20px; */
}

Thank you for any help.

[Wickham]

I looked at your page in IE7 and Firefox and could see a slightly thinner font in Firefox with slightly less padding or line-height in the center Guarantee box.

This is normal for Firefox as it shows font slightly differently. You have styled the font-size and the padding for p tags and the line-height.

Your line-height is in em which will change in proportion to Firefox's smaller font, so try line-height in px just for this p tag in the guarantee box. You have line-height: normal for other text and this may be the reason for the difference as normal may be related to font-size in px but em is related to the font-size in em which is slightly different in Firefox. I'm guessing a bit because I've never fully tested this.

Another thing is that you have font in pt which is an old print-based size and most people use px now or em, but I don't think this has anything to do with the problem, which seems to be the line-height.

Or you could try a conditional comment just for IE with different font-size, padding or line-height or a combination of them, but most people don't bother as a viewer will only be using one browser at a time.