Extra Margin with Firefox Not with IE

Hi All,

Can anyone figure out why I’m getting some extra margin-bottom (3px) in Firefox, but not in IE 6? I have looked at this from every angle but to no avail.

The extra margin (I think it’s margin) appears below the image contained in the catImage div (no it’s not an image of a cat) and is about 3px high.

There are other images contained within the focusArea div that this does not happen to and I have control over.

Here’s the page code:

[code=html]<div class=”focusArea” style=”margin:0px”>
<div class=”catImage” style=”margin:0px”>
<img src=”../img/landing/img1_vector.gif” alt=”Image” width=”240″ height=”135″ style=”margin:0px”/>
</div>
<div class=”quote” style=”margin:0px”>
<p id=”quote” style=”margin:0px”>Some great things to say.</p>
<p id=”ref” style=”margin:0px”>Some Guy<br>Some Title<br>Some Company<br>Some Location</p>
</div>
<div class=”links” style=”margin:0px”>
<p><a href=”transcription.asp” id=”transcription”>Transcription Platforms</a></p>
<p><a href=”speech.asp” id=”speech”>Real-Time Speech Recognition</a></p>
<p><a href=”testResults.asp” id=”testResults”>Critical Test Results Management</a></p>
</div>
</div>[/code]

BTW I added the style directly to the divs etc, trying to get rid of the margin.

Here’s the CSS:

[CODE]/* Right Column flash and links */
.focusArea {
margin: 0px;
padding: 0px;
width: 240px;
}

.focusArea .catImage {
padding: 0px;
border-bottom: solid 3px #fff;
margin: 0 0 0 0;
}

.focusArea .quote {
background-color:#353c4e;
padding: 10px 10px 10px 10px;
color:#fff;
border-bottom: solid 3px #fff;
margin: 0px;
font-size:1.15em;
font-weight:normal;
}

.focusArea .quote img{
float:left;
}

.focusArea .quote p#quote {
font-style:normal;
}

.focusArea .quote p#ref {
margin-top:10px;
text-align:right;
font-style:italic;
}

.focusArea .links p a {
display: block;
height:85px;
text-indent:-9000em;
margin: 0 0 3px 0;
}

.focusArea .links p a#transcription {
background: url(../../img/landing/transcriptionLanding.jpg) top left no-repeat;
}

.focusArea .links p a#speech {
background: url(../../img/landing/speechLanding.jpg) top left no-repeat;
}

.focusArea .links p a#radiology {
background: url(../../img/landing/radiologyLanding.jpg) top left no-repeat;
}

.focusArea .links p a#testResults {
background: url(../../img/landing/criticalLanding.jpg) top left no-repeat;
}[/CODE]

Thanks in advance for your help.

_t

Also in #CSS _↴