I can't believe this

Discussion in 'HTML & Website Design' started by oo7ml, Feb 27, 2008.

0
  1. #1
    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
     
    oo7ml, Feb 27, 2008 IP
  2. mds

    mds Active Member

    Messages:
    256
    Likes Received:
    7
    Best Answers:
    0
    Trophy Points:
    58
    #2
    What gave you the idea of putting the space there?. Its strange also, must have to look it up
     
    mds, Feb 27, 2008 IP
  3. juan-roman

    juan-roman Peon

    Messages:
    26
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #3
    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
     
    juan-roman, Feb 27, 2008 IP
  4. Dan Schulz

    Dan Schulz Peon

    Messages:
    6,032
    Likes Received:
    437
    Best Answers:
    0
    Trophy Points:
    0
    #4
    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).
     
    Dan Schulz, Feb 27, 2008 IP