SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Wizard
    Join Date
    Mar 2002
    Location
    Bristol, UK
    Posts
    2,240
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Strange Padding below Image

    Hi all,

    I'm currently building the following page:
    http://samhastings.no-ip.com/samhastings/index.php

    and there is a bizarre couple of pixels of padding below the header image (the red bar below it, basically). It only happens in Firefox and seemed to happen suddenly and for no apparent reason (i.e. worked one minute, didn't the next).

    Here is the relevant CSS and HTML code:

    HTML Code:
     div#header { width:700px; margin:0 auto; border-top:#000 3px solid; border-bottom:#DFE0E5 1px solid; padding:0; background:#933; }
     
     <div id="header"><a href="http://www.samhastings.com"><img src="image_header.jpg" alt="Sam Hastings: Freelance Website Designer" /></a></div>
    Any idea why it might be happening?

    Cheers

    -Sam
    Sam Hastings

  2. #2
    SitePoint Wizard
    Join Date
    Mar 2002
    Location
    Bristol, UK
    Posts
    2,240
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hmmm seem to have fixed it...might not seem ideal but a height attribute being added to the header DIV sorted it! Still clueless as to why it suddenly decided to happen, but such is life!

    -Sam
    Sam Hastings

  3. #3
    SitePoint Evangelist
    Join Date
    Jul 2004
    Location
    England
    Posts
    588
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    > Any idea why it might be happening?

    By default, images display inline and unwanted space can appear where browsers allow for alignment with text descenders. Setting display block will remove this.

    In passing... padding has a zero default and needn't be set; and you've set a background for a space that's completely filled by the image.


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
  •