CSS: weird border

Question

I`m working on a layout and I have now a problem and I don't know how to fix it:

CSS:

   #menu {
    background-color:#fff;
    width:100%;
    height:46px;
    margin-bottom: 25px;
}

#menu > ul {
    display:inline;
}

#menu > ul > li {
    float:left;
    list-style-type:none;
    width:134px;
    height:100%;
    border-bottom-color: #f9f7f7;
    border-bottom-style: solid;
    border-bottom-width: 6px;
    border-right-color: #f9f7f7;
    border-right-style: solid;
    border-right-width: 1px;
    display:table;
}

#menu > ul > li > a {
    text-align:center;
    width:auto;
    height:auto;
    margin:0 auto;
    display:block;
    margin-top:17px;
}

#menu > ul {
    width:0px;
    height:0px;
    margin:0;
    padding:0;
}

#selected {
    border-bottom-color: #9d1624 !IMPORTANT;
}

JSFiddle: http://jsfiddle.net/RuUkM/

I have tried border-bottom-width:100px but then I get a red 100px height thingy.

How to fix this and why is this happening?

Answer 1

No, it's perfectly fine, the problem is that you have display:table, so you'll need to add border-collapse:collapse for the li