SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Wizard
    Join Date
    Oct 2005
    Location
    London
    Posts
    1,678
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    images pushing div down???

    Hi guys,

    I have a test page here:

    http://www.radio.boudaki.com/temp/11.html

    The blue is a div and the red is an image. I cannot work out why the blue is wrapping under the image....i need it to stop under the image. so the div is just as high as the image...

    I cannot understand why this is happening. There's only the image in the div so what's pushing it down?

    This is driving me crazy!!!

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,295
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    The image is aligned on the baseline and not the top or bottom so it pushes the parent higher.
    Code:
    img{vertical-align:top}

  3. #3
    SitePoint Wizard
    Join Date
    Oct 2005
    Location
    London
    Posts
    1,678
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Bugger...what an idiot!

    I haven't posted in the css forum for years...and then I get caught out by something like this!

    Many thanks Paul

  4. #4
    SitePoint Guru Luki_be's Avatar
    Join Date
    Jun 2008
    Location
    Brazil, Minas Gerais. But i'm from Belgium.
    Posts
    867
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    Image is 'inline' by default, and therefore creates space for text-descenders by default, i.o.w. the browser leaves room for the descenders of any text you want to put in there to display, such as the "tail" of a "y".

    There are several solutions for this:

    1. Set the vertical-align property of the <img /> element to bottom. This aligns the bottom of the <img /> with the bottom of the line box, eliminating the gap.

    2. Set the display property to block. This eliminates the gap, and may be a good fix in many cases. But, it may cause problems of its own, as each block element wants a line all to itself. The text will be forced below the image.

    3. Float the image. Floating an image makes it a block.
    Two things happen. First, the text now aligns to the top of the float element. If this is what you want, you’re all set. If not, the inline vertical-align is needed. Second, you will likely want the floated image to be contained by its parent. In this case, you simply set the parent to {overflow: hidden;}.

    4. Set the parent element to font-size:0 (doesn’t work for Opera)

    5. Setting the line-height to 0 on the parent element (works for Opera)

    For IE6, you can give hasLayout by adding {zoom: 1;} to the parent (not valid css so needs to be hidden by codcom or star html hack).
    SitePoint Guru
    Sitepoint - the ultimate Css well
    As a computer, I find your faith in technology amusing.
    Sitepoint reference, your friend in need


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
  •