I can't believe this

I have had some cross browser issues between IE6 and FF

i had two divs... one on top of the other... and for some reason there is a gap between them in FF but not in IE6

I looked at my code and i could not fiqure it out until i tried this...

<div id="top"> <img src="images/top.jpg" width="208" height="48" alt="top" /> </div>

<div id="bottom">
Text Text Text Text Text Text Text
</div>

HTML:

I put a space between the end of the img tag and the end of the div tag and this made IE6 create the same gap as FF did... has anyne seen this before... why is it (why is there a gap anyway, - if i take away all the spaces... FF still has the gap) and is there any other similar fixes like this

thanks in advance

 

What gave you the idea of putting the space there?. Its strange also, must have to look it up

 

I think this is because imgs are inline elements.

If you add "display: block" to the CSS of the img it should sort it out.


E.g.

Either inline:
<img style="display: block" . .

or in a style sheet:
img#top { display: block; }



JR

 

That'll work, but I'd rather use this style rule for ALL my images (it'll also kill a Firefox bug as well) rather than for a specific style rule:

img {
	border: 0;			/* this squashes a Firefox bug */
	vertical-align: bottom;		/* this squashes an IE bug */
}

Code (markup):

Drop that in near the top of your stylesheet and forget about any problems related to borders around images in links (Firefox) or the gap appearing under images (IE).