SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member richplay's Avatar
    Join Date
    Aug 2005
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    (Help) 3px problem / IE vs Firefox

    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!

  2. #2
    SitePoint Member richplay's Avatar
    Join Date
    Aug 2005
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Problem solved thanks to a DP memeber.

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,555
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    When you find a solution its helpful and good ettiquette to post the answer so that it may be helpful to others

    Your problem is a common one and documented in many threads here. You need to set the image in the left column to display:block.

    Code:
    #left img{display:block}
    Sometimes in ie you can get rid of the whitespace in the html and that will cure the gap also but is not really the complete solution.
    Code:
     <div id="left"><img src="images/animation.jpg" width="300" height="355"></div>
    Images are inline elements and are treated like text where room is left underneath for descenders and depending on what browsers and what mode you are working in you will sometimes see the 3px gap at the bottom which is the room for the descender in the text.

    Setting the image to display:block stops the image form being placed on the baseline and places it on the bottom instead and the gap disappears


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •