Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    May 2007
    Posts
    15
    Thanks
    1
    Thanked 0 Times in 0 Posts

    My first CSS menu: mystery gap in IE

    I'm attempting to build an all-CSS site (for the first time) and I ran into a problem with my menu system. As you can see from the images, the tab graphic aligns nicely at the bottom in FF but in IE, it has a mysterious gap. For the life of me, I can't figure out where the problem lies. Any feedback would be greatly appreciated. Thanks much!

    Relevant code bits are below:

    <div id="menu">
    <ul>
    <li><a href="../index.html"><img src="../images/menu/imgHome_off.gif" alt="home" width="75" height="38" /></a></li>
    <li><a href="../news/"><img src="../images/menu/imgNews_off.gif" alt="home" width="60" height="38" /></a></li>
    <li><a href="../team/"><img src="../images/menu/imgRoster_off.gif" alt="home" width="108" height="38" /></a></li>
    <li><img src="../images/menu/imgGear_off.gif" alt="home" width="120" height="38" /></li>
    <li><a href="../recruit/"><img src="../images/menu/imgRecruit_on.gif" alt="home" width="104" height="38" /></a></li>
    <li><a href="../alumni/"><img src="../images/menu/imgAlumni_off.gif" alt="home" width="72" height="38" /></a></li>
    </ul>
    </div>


    }
    .twoColLiqLtHdr #menu {
    background: #666666;
    height: 38px;
    text-align: center;
    padding-bottom: 0px;
    padding-top: 5px;
    margin-bottom: 0px;
    display: block;
    }
    #menu img {
    border-style: none;
    margin: 0px;
    padding: 0px;
    }

    #menu li {
    display: inline;
    list-style: none;
    margin: 0px 2px;
    padding-bottom: 0px;
    }
    #menu ul {
    display: inline;
    list-style: none;
    cursor: default;
    margin: 0px;
    padding: 0px;
    }
    Attached Thumbnails Attached Thumbnails My first CSS menu: mystery gap in IE-imgsnap095.gif   My first CSS menu: mystery gap in IE-imgsnap094.gif  

  • #2
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    Had you not specified a height for #menu, the gap would have been there in Firefox too. From your explanation I am guessing that you are viewing the page in IE6.

    As for the explanation of the different rendering in IE6 the effect is known as the expanding box problem affecting IE6 and earlier versions. These have broken support for the height and width property.

    As for the gap, what you are seeing is actually the descender space below the baseline. Read this to learn more: Images, Tables, and Mysterious Gaps.

    In your case the best fix may be this:
    Code:
    img {
      vertical-align: bottom;
    }

  • #3
    New Coder
    Join Date
    May 2007
    Posts
    15
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thank you koyama!

    The article links were very interesting and you were right about using "vertical-align: bottom". Fixed my problem straightaway.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •