CODEWITHSUNDEEP
htmlcss
DazDylz
DazDylz

Reputation: 1096

CSS: weird border

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

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?

Upvotes: 3

Views: 3708

Answers (4)

Matthew R.
Matthew R.

Reputation: 4350

CSS borders are generated using angled corners. when you have a colored border on the bottom, like you do, and a different colored border on the right you will get that angled edge. Here is a diagram:

enter image description here

Some people take advantage of this to create triangles. But your issue is the same thing, just remove the right border to get a clean edge.

Upvotes: 2

Vangel Tzo
Vangel Tzo

Reputation: 9313

You could achieve that with before and after pseudo elements

#menu > ul > li:before {
    content: "";
    position: absolute;
    width: 5px;
    height: 100%;
    background: red;
}

#menu > ul > li:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 5px;
    background: blue;
    bottom: 0;
}

Demo here: http://jsfiddle.net/RuUkM/5/

Upvotes: 2

kukac67
kukac67

Reputation: 288

The problem you're having is that on the li, border-right is interfering with border-bottom. That is why half of the bottom border is "shifted" 1px to the left:

border-right-width: 1px;

Upvotes: 0

n1kkou
n1kkou

Reputation: 3142

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

Upvotes: 2

Related Questions