By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
435,008 Members | 2,962 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 435,008 IT Pros & Developers. It's quick & easy.

Same selector different outcome

P: n/a
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>

Feb 21 '07 #1
Share this Question
Share on Google+
1 Reply


P: n/a
On 21 Feb, 17:02, "jorgedec" <jorge...@neo.rr.comwrote:
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.<classnamea" has changed to "div.<classnameul li a" and so
has gone from being _less_ specific than "html body .<classnamea"
to being _more_ specific than it. A width rule has thus changed from
width: auto; to width: 100%;

Feb 21 '07 #2

This discussion thread is closed

Replies have been disabled for this discussion.