Click to See Complete Forum and Search --> : I can't believe this


oo7ml
02-27-2008, 06:38 AM
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>

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

Kor
02-27-2008, 07:29 AM
I can not reproduce your error, I see the divs absolutely the same in all browsers. Could be a CSS problem, can we see the #top and #bottom styles, if any?

Anyway, give your image a CSS display:block. By default, images are inline elements, which, in some browsers, make them have a small bottom padding. That space should be necessary indeed in other inline elements - like SPAN - in order to display correctly the bottom short tail for letters like "p", "j", "g" ... a.s.o.)

ray326
02-27-2008, 10:52 AM
Yes, Kor is right on. It's the line-height of the inline elements, not a space between the divs. Put borders or different backgrounds on the divs and you'll see it better.