SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member stewartc's Avatar
    Join Date
    Feb 2003
    Location
    Durham,UK
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    IE5 whitespace around images

    Hi,
    I am trying to build a header for a page using css rather than tables, everything's cool in all browsers except IE5.x

    I have a <div> for my header and I' trying to float an image against each side to give a rounded effect to the corners. There appears to a bit of whitespace appearing around my images in IE5.x and I'm having trouble getting them flush up against the edges of my <div> and the background color is visible to the left and right of each image respectively.

    I've managed to get around this by placing two additional div's inside my header div and using each image as a backround rather that in-line, however I was wondering if any body knew why my original method below didn't work?

    For simplicity I've

    a) Put my styles in-line
    b) Put in line breaks for readability, - I had all whitespace removed from my original as I read somewhere this could be a problem with IE5

    Code:
     
    <div style="background-color:blue">
    <img src="/images/header_corner.gif" alt=" " style="float: left; margin:0; border:0" />
    <img src="/images/logo.gif" alt=" " style="float: right" />
    </div>
    Cheers

    Stew

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

    Ie5 (and ie6 in quirks mode) both seem to place a gap around an image when floated. I think (guess) its because it treats images as text and allows extra room for serifs/descenders and things.

    The solution is just to place the image in a div and float the div instead of the image.

    e.g.
    Code:
    <style>
    .outer {
     background-color:#ffc;
     width:400px;
     height:60px;
    }
    .image {
     height:60px;
     width:60px;
    }
    .l {float:left}
    .r {float:right}
    </style>
    </head>
    <body>
    <div class="outer">
    <div class="image l"><img src="m.gif" alt=" " width="60" height="60" /></div>
    <div class="image r"><img src="k.gif" alt=" " width="60" height="60" /></div>
    </div>
    Paul

  3. #3
    SitePoint Member stewartc's Avatar
    Join Date
    Feb 2003
    Location
    Durham,UK
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Cheers for the info, works like a dream


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
  •