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

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

You can see this when you hover over the left link: http://jsfiddle.net/cMeE5/

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

This vertical border is not so bad, but the same border is always displayed at the bottom of the menu item (but it does not play in JSFiddle).

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

Here's the code for the 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>

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;
}
+3
source share
3 answers

, IE, 1px- 1px LI ( IE CSS)

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

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

, IE..

margin-bottom:-1px;
+1

navcontainer div. , , ( 0.875em). padding-top div midnav 0.3em, . 6px, , midnav :

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

, font-family . IMO div.

0

All Articles