SitePoint Sponsor

User Tag List

Results 1 to 3 of 3

Hybrid View

  1. #1
    SitePoint Zealot
    Join Date
    Jun 2004
    Location
    Nova Scotia, Canada
    Posts
    172
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    IE Hates Me - Part 2

    I have <img> links within a DIV (stacked on top of each other).

    In IE, there seems to be a "default" space being put on the top/bottom of each image. I used "overflow:hidden" and that seemed to get rid of some of the whitespace.

    In Firefox it looks fine.

    CSS
    Code:
    #nav {width:141px; float:right; overflow:hidden;}
    HTML
    Code:
    <div id="nav">
      <img src="_assets/images/common/linkInfo.gif" />
      <img src="_assets/images/common/linkHome01.gif" alt="Home" width="141" height="17" />
      <img src="_assets/images/common/linkAboutUs01.gif" alt="About Us" width="141" height="17" />
      <img src="_assets/images/common/linkContactUs01.gif" alt="Contact Us" width="141" height="17" />
      <img src="_assets/images/common/linkDividerA.gif" alt="" width="141" height="11" />
      <img src="_assets/images/common/linkCarpenters01.gif" alt="Carpenters" width="141" height="17" />
      <img src="_assets/images/common/linkMillwrights01.gif" alt="Millwrights" width="141" height="17" />
      <img src="_assets/images/common/linkAlliedWorkers01.gif" alt="Allied Workers" width="141" height="17" />
      <img src="_assets/images/common/linkDividerA.gif" alt="" />
      <img src="_assets/images/common/linkSiteMap01.gif" alt="Site Map" width="141" height="17" />
      <img src="_assets/images/common/linkDividerB.gif" alt="" width="141" height="10" />
    </div>
    Site: http://www.jamiegerrard.com/carpentersUnion/

    Any suggestions? Do I need to use a hack? And can anyone point me to a resource that contains differences in CSS rendering between the different browsers?

    Thanks Jamie
    ----
    Cheers, Jamie

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

    Didn't I give you a similar solution the other day (or was it someone else - they all meger into one after a while lol ).

    Anyway just set your image to display:block. This isn't a bug but the way that these things are rendered in certain situations. Images are treated as text and room is allowed underneath for descenders.

    Setting the image to display:block works well when the images are notneeded inline.
    Code:
    #nav img {display:block}
    Have a look here for some well known bugs:

    http://www.positioniseverything.net

    Paul

  3. #3
    SitePoint Zealot
    Join Date
    Jun 2004
    Location
    Nova Scotia, Canada
    Posts
    172
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Paul.

    Thanks for your quick response. I did have a similar issue previously, but it was related to DIV's > overflow.

    Thanks again for your help.

    -jamie
    ----
    Cheers, Jamie


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
  •