SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Enthusiast
    Join Date
    Nov 2005
    Posts
    65
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    not-wanted space under header

    hi,

    have a look here please...
    I get a white space right under the header image and before the border-bottom: black

    Why?
    How to cut it?
    Thanks
    Last edited by liny; Jun 25, 2006 at 04:19.

  2. #2
    bronze trophy
    Join Date
    Dec 2004
    Location
    Sweden
    Posts
    2,670
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Because the image is a replaced inline element that sits on the baseline of a line box, and the line box reserves space for characters that go below the baseline, such as "j" and "g". You could change the vertical alignment (to, say, middle) of the image or change it to display:block.
    Simon Pieters

  3. #3
    SitePoint Enthusiast
    Join Date
    Nov 2005
    Posts
    65
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I put:

    height: 100px; to header
    and with FF it is correct

    with Ie still I have the problem

    I tried display: block; but didnt change

  4. #4
    SitePoint Enthusiast
    Join Date
    Nov 2005
    Posts
    65
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    up

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,551
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    I tried display: block; but didnt change
    Simon has already given you the perfect answer so you need to review his post and see where you went wrong

    Quote Originally Posted by simon
    of the image or change it to display:block.
    You haven't set the image to display block.

    e.g.

    Code:
    #header img {display:block}
    You set #header to display block which makes no difference because the header div is already display block by default.

    Firefox was fixed when you made the header 100px high because it obeys height emplicitily. However ie6 treats height as a minimum and stretches the 100px to allow for the descenders to still poke downwards.

    Setting the image to display:block makes the image get treated like a block element and not like text.

  6. #6
    SitePoint Enthusiast
    Join Date
    Nov 2005
    Posts
    65
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks


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
  •