Weird border bug help?

HTML & CSS
1

hi so i am making this menu in pure html and css. The problem is that every item in the menu has like a different bottom border color and size of 5px AND a right border of grey color but 1px size. AND THATS the problem. Every bottom border ends under an angle like really weird on the right side. It’s like the right and bottom border are clashing or something.

If i remove the right border then the bottom border has no weird end angle, but i can’t do that cos i need the right border. how can i fix it.
i have never seen anything like this lol.

ps. feel free to fix any other bugs in the code ; )

here is the css code:


/* main part of the menu */
#menu {
border-top:1px solid #ccc;
}
#menu ul {
list-style-type: none;
list-style-position: outside;
margin: 0px;
padding: 0px;
}

#menu ul li {
display: block;
overflow: hidden;
padding: 0px;
cursor: pointer;
float: left;
width: 95px;
height: 45px;
margin:0px;
border-right:1px solid #ccc;
text-transform:uppercase;
text-align:center;
}	
/* classes for different bottom border colors*/
#menu .c1 {
border-bottom:5px  solid #00ff00;
}
#menu .c2 {
border-bottom:5px solid #000099;
}
#menu .c3 {
border-bottom:5px solid #ff6600;
}
/* hovers */
#menu .c1:hover {
border-bottom:10px solid #00ff00;
height: 40px;
}
#menu .c2:hover {
border-bottom:10px solid #000099;
height: 40px;
}
#menu ul li a {
color: #000;
text-decoration:none;
font-size:14px;
padding-top:15px;
postion:relative;
display:block;
}

html code:


<div id="menu">
<ul>
<li class="c1"><a href="#">sample1</a></li>
<li class="c2"><a href="#">sample2</a></li>
<li class="c3"><a href="#">sample3</a></li>
</ul>
</div>

thank you all this is driving me crazy.

2

omg lol i knew it was gonna be something i missed, thank you so much dude, the solution is more than logical ; )

3

but i can’t do that cos i need the right border. how can i fix it.
To fix it just set your bottom borders and heights on the anchors. You will leave the right border on the LI.

You don’t need dimensions on the LI, they will be set on the anchor. Keep the LI floated left so it contains the floated anchor.

The code below does what you are wanting. :wink:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>a:hover Border Width Change</title>

<style type="text/css">
body {
    margin:0;
    padding:30px;
    font:100%/1.2 arial,helvetica,sans-serif;
}
#nav  {
    margin:0;
    padding:0;
    list-style-type:none;
    border-top:1px solid #ccc;
    border-left:1px solid #ccc;
    float:left;/*to shrinkwrap to list items*/
}
#nav li {
    float:left;
    border-right:1px solid #CCC;
}
#nav a {
    float:left;
    width:95px;
    height:25px;/*40px with top padding (45px with bottom border)*/
    padding-top:15px;
    color:#000;
    font-size:14px;
    text-align:center;
    text-decoration:none;
    text-transform:uppercase;
}    
/* Anchor classes for bottom border colors*/
a.c1 {
    border-bottom:5px  solid #00ff00;
}
a.c2 {
    border-bottom:5px solid #000099;
}
a.c3 {
    border-bottom:5px solid #ff6600;
}
#nav a:hover {
    height:20px; /*reduce by 5px for increased 10px border width*/
    border-width:0 0 10px;
}
</style>

</head>
<body>

<ul id="nav">
    <li><a class="c1" href="#">sample1</a></li>
    <li><a class="c2" href="#">sample2</a></li>
    <li><a class="c3" href="#">sample3</a></li>
</ul>

</body>
</html>
4

Hi,

It’s not a bug :slight_smile:

CSS borders are mitered together and that is what creates the angles.

When the border widths are different then the miters are not a true 45°.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>CSS Borders</title>

<style type="text/css">

#wrap {
    width:300px;
    height:200px;
    margin:100px auto;
    padding: 10px;
    background:orange;
    border-top:20px solid red;
    border-right:40px solid blue;
    border-bottom:20px solid green;
    border-left:40px solid black;
}

</style>

</head>
<body>

<div id="wrap">
<p>The borders shown here are not 45&#176; since the side border widths are greater</p>
</div>

</body>
</html>