Removing extra gap under image in firefox

[rjonk]

I have a floating image inside a layer.

<div class="blockimage"><img src="/images/myimage.jpg" class="fleft"/></div>

When I have no scrollbar in the window for firefox and don't resize the window I get a whitespace gap under the image.

I haven't seen the sollution on internet so I tried to figure this out myself;

the sollution: for the containing div set the style for display to table
for the image set the display style to table-cell

example
.blockimage {display:table;border:1px solid #f00}
.blockimage image.fleft {display:table-cell;float:left;width:125px;height:100px;}

[SpirtOfGrandeur]

*snip*

the sollution: for the containing div set the style for display to table
for the image set the display style to table-cell

*snip*



Actually the correct solution is to have the image as the background of the div. But in case you need the IMG there for JS or the likes you need to change the default of an IMG. IE and FF rendor IMG's different even though they are running the same DOCTYPE. It is not recomended to make a table out of CSS when there is absolutly no need for a table.

img {
display: block;
}

[_Aerospace_Eng_]

What are the size specs of the image? Its always best to specify the image size. What might be happening is the image is smaller in height than the actual font size so its the line-height you are seeing. Try declaring line-height:0; in the CSS, if that doesn't work then use the display:block; as previously suggested.