(Help) 3px problem / IE vs Firefox

Discussion in 'CSS' started by srdjan, Jul 22, 2006.

0
  1. #1
    IE continues to cause problems.

    Please take a look at the layout in firefox and ie, ie displays additional 3px at the bottom of the box. Any ideas how to solve this?

    www.richplay.co.uk/mjgross

    Please help asap!
     
    srdjan, Jul 22, 2006 IP
  2. FeelLikeANut

    FeelLikeANut Peon

    Messages:
    330
    Likes Received:
    19
    Best Answers:
    0
    Trophy Points:
    0
    #2
    IE seems to be displaying white-space from the HTML code. You need to change: 
              <div id="left">
<img src="images/animation.jpg" width="300" height="355"> 
  </div>
    HTML:
    to look like: 
    <div id="left"><img src="images/animation.jpg" width="300" height="355"></div>
    HTML:
    This seems to make IE happy.
     
    FeelLikeANut, Jul 22, 2006 IP
    srdjan likes this.
  3. srdjan

    srdjan Peon

    Messages:
    405
    Likes Received:
    26
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Thank you very much! This is one of those "wrong place to look" problems, since I was looking at the css file instead of html itself!
     
    srdjan, Jul 22, 2006 IP
  4. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #4
    Just FYI, the root cause is that IE treats the linefeed as a content white space. Once that happens, there is an inline box. An image aligns its bottom with the baseline of the text that could be there, leaving space for the letter descenders. The more robust fix would be to make img {vertical-align: bottom;}. You won't have to mess with your formatting. See mysterious gaps for a demo.

    cheers,

    gary
     
    kk5st, Jul 22, 2006 IP
  5. Vi5

    Vi5 Guest

    Messages:
    90
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #5
    Displaying the image as a block should do the trick too.
     
    Vi5, Jul 23, 2006 IP