CODEWITHSUNDEEP
cssinternet-explorer-8borderbackground-color
dmr
dmr

Reputation: 22333

IE8 background-color hiding borders

I am trying to add borders to navigation items. The background color is grey, and three of the borders are a lighter grey. The right border is black. On IE8, none of the borders show.

Here is how the <li> look in IE9: enter image description here

Here is how they look on IE8:
enter image description here

And when I remove the background-color attribute, this is what shows up on IE8: enter image description here

It seems like the background color is obscuring the borders. How can I fix this?

Here is the HTML:

<ul class="mainMenu">
    <li></li>
    <li></li>
</ul>

And the CSS:

.mainMenu > li{
    border: 1px solid black;
    position: relative;
    display: table-cell;
    background-color: #363636;
    border-top: 1px solid #666;
    border-left: 1px solid #666;
    border-bottom: 1px solid #666;
    background-image: linear-gradient(#363636 50%, #000 50%);
    background-image: -webkit-linear-gradient(#363636 50%, #000 50%); 
    background-image: -moz-linear-gradient(#363636 50%, #000 50%);
    background-image: -ms-linear-gradient(#363636 50%, #000 50%);
    background-image: -o-linear-gradient(#363636 50%, #000 50%);
}

EDITED: I mistakenly had a div instead of an ul surrounding my list items. On IE8 with the list items in an ul, this problem shows up.

Upvotes: 1

Views: 2486

Answers (1)

purgatory101
purgatory101

Reputation: 6770

The display: table-cell is your culprit. There is a great question here about how the display: table-cell works and some of its idiosyncrasies. However, even if you take their great fiddle example and add a border to their "cells" you will find they suffer from the same problem you are having.

If you want to fix your issue I would advise going for a float:left style layout. You can handle the border duplication problem with something along these lines:

.mainMenu {
   list-style-type :none;
   padding:0;
   margin:0;
}
.mainMenu > li {

    position: relative;
    float:left;
    background-color: #363636;
    border-top: 10px solid #666;

    border-right: 10px solid #666;
    border-bottom: 10px solid #666;
    /* There is also a background gradient */
}

.mainMenu > li:first-child {
  border-left: 10px solid #666;
}

I exaggerated the border size just for visual clarity. The Fiddle You will probably also want to make sure to clear the float shortly after your list items as well to ensure that it does not have any other side effects on your layout.

Upvotes: 1

Related Questions