I have two test vertical menus. If I apply a border-bottom using a
selecter of
div.vbar a
It looks fine.
If I apply the border-bottom using a selecter of
div.vbar ul li a
it applies the border but it extends farther out.
My understanding is that I am applying the border to the same
element,
I don't understand why it should look different. If anyone can shed
some
light on this, it would be appreciatted.
Jorge
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Untitled Page</title>
<style type="text/css">
h1
{
text-align:center;
}
div.vbar2, div.vbar1
{
float:left;
border: 1px solid #C0C0C0;
background-color: white;
border-bottom-width: 0;
width: 170px;
}
div.vbar2
{
clear:left;
}
div.vbar1
{
clear:right;
}
* html .vbar2{
width: 164px;
}
* html .vbar1{
width: 164px;
}
div.vbar2 ul, div.vbar1 ul{
padding: 0;
margin: 0;
list-style-type: none;
}
div.vbar1 ul li a
{
padding: 4px 3px;
display: block;
width: 100%; /*Define width for IE6's sake*/
color: #595959;
text-decoration: none;
border-bottom: 1px solid blue;
}
div.vbar2 a{
padding: 4px 3px;
display: block;
width: 100%; /*Define width for IE6's sake*/
color: #595959;
text-decoration: none;
border-bottom: 1px solid green;
}
html>body .vbar2 a{ /*Non IE rule*/
width: auto;
}
html>body .vbar1 a{ /*Non IE rule*/
width: auto;
}
div.vbar2 a:hover,div.vbar1 a:hover
{
background-color: #F8FBBD;
color: black;
}
</style>
</head>
<body>
<div id="header">
<h1>Heading</h1>
</div>
<div class="vbar1">
<ul>
<li><a href="#">item 1</a></li>
<li><a href="#">item 2</a></li>
<li><a href="#">item 3</a></li>
<li><a href="#">item 4</a></li>
</ul>
</div>
<div class="vbar2">
<ul>
<li><a href="#">item 1</a></li>
<li><a href="#">item 2</a></li>
<li><a href="#">item 3</a></li>
<li><a href="#">item 4</a></li>
</ul>
</div>
</body>
</html>
