SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    ********* Celica Lover Coomer's Avatar
    Join Date
    Apr 2002
    Location
    Not worth the drive
    Posts
    474
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Vertical Padding Added in Mozilla

    I'm trying to develop a new site using a purely css-based layout, which I have done before, but I'm having troubles with Mozilla 1.3 on Windows 2000 adding some padding underneath an image inside of a <div>.

    If you go to http://www.studio412.com in Mozilla 1.3, you'll see a small amount of padding underneath the image that's inside the green bar. Also, you can see the effect at http://www.studio412.com/screenshot.gif if you don't have Mozilla or can't replicate the problem.

    If you look at that same page in IE 5.0 or 6.0 for Windows, it looks fine, and there is no vertical padding. By the way, the page validates as valid XHTML 1.0 and CSS-2.

    Does anyone know how can I get rid of that vertical padding? Thanks!
    + Celica =
    6G Celicas :: My '94-99 Toyota Celica resource

  2. #2
    Your Lord and Master, Foamy gold trophy Hierophant's Avatar
    Join Date
    Aug 1999
    Location
    Lancaster, Ca. USA
    Posts
    12,305
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Set the bottom-margin to 0.
    Wayne Luke
    ------------


  3. #3
    SitePoint Guru bronze trophy blufive's Avatar
    Join Date
    Mar 2002
    Location
    Manchester, UK
    Posts
    853
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

  4. #4
    "Of" != "Have" bronze trophy Jeff Lange's Avatar
    Join Date
    Jan 2003
    Location
    Calgary, Canada
    Posts
    2,063
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I find setting a fixed height on the containing element gets rid of the space in Mozilla.
    Who walks the stairs without a care
    It shoots so high in the sky.
    Bounce up and down just like a clown.
    Everyone knows its Slinky.

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

    You can also ged rid of the space by setting the image to display:block.
    Code:
    img {display:block}
    Paul

  6. #6
    ********* Celica Lover Coomer's Avatar
    Join Date
    Apr 2002
    Location
    Not worth the drive
    Posts
    474
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    W. Luke, I tried setting both the div's and the image's bottom margin to 0px, and neither worked for me.

    Blufive, thanks for the link. It helped me out and was interesting reading. I now understand exactly what's going on here.

    Setting the height to a fixed height worked, and so did changing img to be displayed as block, so I think that I'll go with the second option.

    Thanks!
    + Celica =
    6G Celicas :: My '94-99 Toyota Celica resource


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
  •