Same selector different outcome

Thread view:

Enable EMail Alerts

Start New Thread

Thread rating:

jorgedec - 21 Feb 2007 17:02 GMT

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>

Reply to this Message

Andy Dingley - 21 Feb 2007 17:53 GMT

> My understanding is that I am applying the border to the same element,

CSS cascading problem

To find it, install Firefox, the Web Developer Toolbar, then look at
the effects of "View Style Information" for an element of each menu.

Simplified, it shows this:

div.vbar2 a (line 56)
{ width: 100%; border-bottom-color: green; }

html > body .vbar2 a, html > body .vbar1 a (line 65)
{ width: auto; }

and (for the other <div>)

html > body .vbar2 a, html > body .vbar1 a (line 65)
{ width: auto; }

div.vbar1 ul li a (line 46)
{ width: 100%; border-bottom-color: blue; }

Note that the CSS blocks appear to have been re-arranged compared to
their original line numberings! After specificity is taken into
account, the latest one wins.

CSS selector specificity depends (slightly) on the number of elements
involved in a selector. You've changed this enough that
"div.<classname> a" has changed to "div.<classname> ul li a" and so
has gone from being _less_ specific than "html > body .<classname> a"
to being _more_ specific than it. A width rule has thus changed from
width: auto; to width: 100%;

Reply to this Message

Webmaster Forum / HTML, CSS, Scripts / CSS / February 2007

Same selector different outcome