CODEWITHSUNDEEP
htmlcssinternet-explorermenuhtml-lists
FDM
FDM

Reputation: 658

CSS horizontal menu - why a 1px border/space in IE only?

I've got a simple horizontal menu with a hover effect. It displays fine in Chrome/Firefox, but in IE11 it has a 1px border between the elements.

You can see it when hovering over the left link: http://jsfiddle.net/cMeE5/

Here's a screenshot: IE11 Screenshot http://users.telenet.be/mhd/ie11.png

This vertical border isn't that bad, but the same kind of border is always shown on the bottom side of the menu item (but it doesn't reproduce in JSFiddle).

I also tried added a full CSS Reset but that doesn't change anything.

Here's the code on JSFiddle:

<div id="navcontainer">
    <div id="midnav">
        <ul>
            <li><a href="#">Link A</a></li>
            <li class="activesub"><a href="#">Link B</a></li>
        </ul>       
    </div>
</div>
<div id="maincontainer">
    <div id="main">
        <h1>Test</h1>
    </div>
</div>

The CSS:

* { margin: 0; padding: 0;}
html { min-height: 100%; height: 100%; margin-bottom: 1px; overflow-y: scroll;}
body {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: 0.875em;
    background-color: #ebebeb;
    color: black;
    height: 100%;
}
a, a:active, a:hover, a:visited, a:link  {
  text-decoration:  none;
  font-weight:      none;
  background-color: none;
  color:       inherit;
} 
/********************/
/*** SUBNAVIGATIE ***/
/********************/
#navcontainer {
    width: 100%;
    background-color: #464646;
}
#midnav {
    width: 1000px;
    margin: 0 auto;
    color: white;
    padding-top: 0.3em;
}
#midnav ul {
    list-style-type: none;
    display: table;
}
#midnav li {
    display: table-cell;
    -moz-border-radius-topleft: 7px;
        -webkit-border-top-left-radius: 7px;
    border-top-left-radius: 7px;
    -moz-border-radius-topright: 7px;
        -webkit-border-top-right-radius: 7px;
    border-top-right-radius: 7px;

    -webkit-transition: all 0,1s ease;
        -moz-transition: all 0,1s ease;
        -o-transition: all 0,1s ease;
        -ms-transition: all 0,1s ease;
        transition: all 0,1s ease;
}
#midnav a {
    display: block;
        padding: 0.3em 1em 0.5em 1em;
}
.activesub, #midnav li:hover {
    color: #464646;
    background-color: #ebebeb;
}

/********************/
/*** MAIN CONTENT ***/
/********************/
#maincontainer {
    width: 100%;
    background-color: #ebebeb;
}
#main {
    width: 1000px;
    margin: 0 auto;
    color: #464646;
}

#maincontainer p {
    margin-bottom: 1em;
    margin-top: 1em;
}

Upvotes: 3

Views: 1713

Answers (3)

Vincent Duprez
Vincent Duprez

Reputation: 3882

You could add a negative bottom margin to fix the miscalculation of IE..

margin-bottom:-1px;

Upvotes: 1

FDM
FDM

Reputation: 658

I'm still not sure what causes the issue in IE, but the solution for the bottom 1px space is adding a 1px border to the LI element (conditional IE CSS)

#midnav li {
    border-bottom: 1px solid #464646;
}

#midnav .activesub, #midnav li:hover {
    border-bottom: 1px solid #ebebeb;
}

Upvotes: 1

Criminally Inane
Criminally Inane

Reputation: 226

The line is coming from the background color of the navcontainer div. The root of the problem is likely due to different font rendering between the browsers (especially given the odd-size scaling of 0.875em). The padding-top property for the midnav div is 0.3em, a size based upon font rendering. Changing this value to 6px, for example, aligns midnav and eliminates the problem:

#midnav {
    width: 1000px;
    margin: 0 auto;
    color: white;
    padding-top: 6px;
}

You can also see the difference when you disable the font-family property for the body. IMO it's best to stick with pixels when aligning divs.

Upvotes: 0

Related Questions