CSS Margin/Height - IE & Firefox - Please help!

[cdmwebs]

I'm trying to convert a PSD to CSS and all was well until this... Here is the page:

[cdmwebs.homedns.org...]

The problem is with the green block on the left column for rate quotes. It looks fine in Firefox, but in IE there is 1 pixel of additonal height that I can't seem to eliminate. If I set the height to 88px, all is well in IE, but Firefox is then 1px too short.

This is the only css that applies to it:

 #leftcol #promo {
 margin: 0;
 padding: 0;
 width: 100%;
 height: 89px;
 float: left;
 clear: both;
 position: relative;
 background-color: #719f7f;
 background-image: url('images/quote_bg_09.jpg');
 background-repeat: repeat-x;
 }
 
 #leftcol #promo #quotebg {
 left: 7px;
 top: 5px;
 position: relative;
 text-align: center;
 border: none;
 margin: 0;
 padding: 0;
 }
 #leftcol #promo #qetquotelink {
 top: 56px;
 left: 140px;
 position: absolute;
 margin: 0;
 padding: 0;
 }

Thanks in advance!
Chris

[doodlebee]

Why don't you use a conditional comment to target IE? That would solve your problem in a snap :)

[cdmwebs]

The thought crossed my mind, but it's nice to hear it from someone else. At least I'm not crazy...

[cdmwebs]

Here it is...

  #leftcol #promo {
   margin: 0;
   padding: 0;
   width: 100%;
   height: 89px;
   float: left;
   clear: both;
   position: relative;
   background-color: #719f7f;
   background-image: url('images/quote_bg_09.jpg');
   background-repeat: repeat-x;
  }
  /* For IE ONLY */
  * html #leftcol #promo {
   height: 88px;
  }

[doodlebee]

The thought crossed my mind, but it's nice to hear it from someone else. At least I'm not crazy...

LOL you're not crazy. IE defines margins and padding different than standards-compliant browsers. Weird padding and margin glitches are *exactly* one of the reasons you should use a conditional comment :)