Home/ Questions/Q 7405475
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-29T05:24:36+00:00

I’ve been trying to solve this for the past two hours and couldn’t do

  • 0

I’ve been trying to solve this for the past two hours and couldn’t do it.
I have created a horizontal css navigation menu using an UL and ‘display’ as table and tested it locally on all browsers: IE7, IE8, IE9, FF 9.0.1, Chrome and it displays perfectly.

However, when putting the code on my server I get a vertical white space between the <LI> elements only in IE.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Test Document</title>

  <style type="text/css">
 * {margin:0;padding:0;}
#navigation {
    border: 0px solid #000000;
    padding: 0;
    width: 560px;
    position: relative;
    height:100%;
    display:table;
}

#navigation li {
    display: table-cell;
    *width: 16.5%;
    max-width:115px;
    vertical-align: middle;
    word-wrap: break-word;
    text-align:left;
    background: #008dde;  /* Old browsers */
    background: -moz-linear-gradient(top,  #30a9ff 0% , #008dde 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#30a9ff), color-stop(100%,#008dde)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #30a9ff 0%,#008dde 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #30a9ff 0%,#008dde 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #30a9ff 0%,#008dde 100%); /* IE10+ */
    background: linear-gradient(top,  #30a9ff 0%,#008dde 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#30a9ff', endColorstr='#008dde',GradientType=0 ); /* IE6-9 */
    *float: left;
    list-style-type:none;
    height:100%;
    *border:0;
    *height:50px;
    position: relative;

}

#navigation li, {display:inline;zoom:1;vertical-align:middle;
    display: inline-block;float: left;
}
#navigation li.middle
{
    border-left:1px solid #52b4f9;
    border-right:1px solid #005e9c; 

}
#navigation li.first
{
    border-right:1px solid #005e9c; 
}
#navigation li.last
{
    border-left:1px solid #52b4f9;
}
#navigation li a{
    color: #FFFFFF;
    display: block;
    font-family: arial,verdana,sans-serif;
    font-size: 11px;
    font-weight: bold;
    *padding-right:10px;
    text-decoration: none;
    height:100%;

}
#navigation a span 
{
    display: block;
    padding: 5px 2px 5px 6px;
    *padding-right:10px;
}
#navigation li:hover,#navigation li.selected
{
    color:#fff; 
    background: #008dde;  /* Old browsers */
    background: -moz-linear-gradient(top,  #818181 0% , #2d2d2d 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#818181), color-stop(100%,#2d2d2d)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #818181 0%,#2d2d2d 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #818181 0%,#2d2d2d 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #818181 0%,#2d2d2d 100%); /* IE10+ */
    background: linear-gradient(top,  #818181 0%,#2d2d2d 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#818181', endColorstr='#2d2d2d',GradientType=0 ); /* IE6-9 */
    }

  </style>
</head>

<body>
  <ul id="navigation">
    <li class="first"><a href="#"><span>Home</span></a></li>
    <li class="middle"><a href="#"><span>Channel Programs</span></a></li>
    <li class="middle"><a href="#"><span>Partner Contract</span></a></li>
    <li class="selected"><a href="#"><span>Operational Information</span></a></li>
    <li class="middle"><a href="#"><span>Product & Pricing Information</span></a></li>
    <li class="last"><a href="#"><span>Channel Marketing</span></a></li>
  </ul>

</body>
</html>`

Unfortunately I couldn’t fix this with existing solutions like float or changing the ‘display’ type because I really need this kind of approach for my menu which needs to be able to expand in height as the content in it is dynamic and for multiple languages and also to be vertically centered.

Thank you very much for the help.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I’d say that it’s because of the default inline-block behavior. The browser will render inline-block elements just like a text and any white-space in your html will display as a non-breaking space in your website.

    More info here

    I was unable to open the first link. In case you can’t as well, here is another.

    Even though, floats with inline-blocks and etc is just too messed up, and will just cause more trouble down the road. I think you should choose one and stick with it.

    • 0