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

CSS: Borders don't always override?

P: n/a
I'm just learning CSS here, and I immediately ran into something weird.
Given the following stylesheet:

<!--
a {text-decoration: none; }
..blogbody a {border-bottom: 1px dotted #334;}
..title {font-size: 200%;}
..title a { border-bottom: 0px none #668; }
-->

and the following HTML:

<div class="blogbody">
<a href="test">blogbody div</a><br />
<a href="test" class="title">title href in blogbody div</a></br >
<span class="title">
<a href="test">title span in blogbody div</a>
</span>
</div>

Why is the title still underlined when I specify the class of the A tag?
I get the expected result when I use the inner SPAN.

--
Jay Levitt |
Wellesley, MA | Hi!
Faster: jay at jay dot eff-em | Where are we going?
http://www.jay.fm | Why am I in this handbasket?
Jul 20 '05 #1
Share this Question
Share on Google+
6 Replies


P: n/a
Jay Levitt <ja******@jay.fm> wrote:
a {text-decoration: none; }
This selects all a elements.
.blogbody a {border-bottom: 1px dotted #334;}
This selects all a elements that are descendents of an element with
class="blogbody"
.title {font-size: 200%;}
This selects all elements with a class="title"
.title a { border-bottom: 0px none #668; }

This selects all a elements that are descendents of an element with
class="title"
<div class="blogbody">
<a href="test">blogbody div</a><br />
<a href="test" class="title">title href in blogbody div</a></br >
<span class="title">
<a href="test">title span in blogbody div</a>
</span>
</div>

Why is the title still underlined
It's not underlined, it has bottom border. There's a difference.
when I specify the class of the A tag?
Because the styles you give above tell it to be underlined.
I get the expected result when I use the inner SPAN.


And the styles you give above tell that not to be underlined.

There is a difference between

..title a
and
a.title

The first selects a elements that are descendents of class="title",
the second selects a elements that are themselves marked as being
class="title".

Read the spec for the basics of how selectors work:
http://www.w3.org/TR/CSS2/selector.html

Steve

--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <st***@pugh.net> <http://steve.pugh.net/>
Jul 20 '05 #2

P: n/a
In article <dl********************************@4ax.com>, st***@pugh.net
says...
There is a difference between

.title a
and
a.title

The first selects a elements that are descendents of class="title",
the second selects a elements that are themselves marked as being
class="title".
Thanks! That's what I was missing...
Read the spec for the basics of how selectors work:
http://www.w3.org/TR/CSS2/selector.html


Will do. Thanks for the pointer.

--
Jay Levitt |
Wellesley, MA | Hi!
Faster: jay at jay dot eff-em | Where are we going?
http://www.jay.fm | Why am I in this handbasket?
Jul 20 '05 #3

P: n/a
On Tue, 27 Apr 2004 20:53:13 -0400, Jay Levitt <ja******@jay.fm> wrote:
Why is the title still underlined when I specify the class of the A tag?


To set a style for a with class "title", use the selector a.title { ... }.

Jul 20 '05 #4

P: n/a
In article <op**************@news.individual.net>, ne*****@yahoo.com
says...
Why is the title still underlined when I specify the class of the A tag?


To set a style for a with class "title", use the selector a.title { ... }.


I had actually tried that, and it didn't work, but that's because before
I simplified the example for posting, the code was actually something
like

<div class="blogbody">
<a href="link"><h2 class="title">title</h2></a>
</div>

Which as I now see is a very, very different case.

So 'a.title' isn't appropriate, since it's not an 'a' of class "title".
And '.title a' isn't either, since the 'a' isn't a descendant of an
element with class "title"; in fact, it's the other way around. I have
now also tried overriding borders in 'a .title' or 'a *.title', but that
doesn't seem to work either... any ideas why? Reading the spec, I'd
think that should work. The workaround is obvious, of course, but I'd
like to understand what I'm doing wrong...

For reference, the complete code is now:

<html>
<head>
<style type="text/css">
<!--
a {text-decoration: none; }
..blogbody a { border-bottom: 1px solid #668;}
..title { font-size: 200%;}
a.title { border-bottom: 0px none #668; }
..title a { border-bottom: 0px none #668; }
a *.title { border-bottom: 0px none #668; }
-->
</style>
</head>
<body>
<div class="blogbody">
<a href="test">blogbody div</a><br />
<a href="test" class="title">title href in blogbody div</a><br />
<span class="title">
<a href="test"><h2>title outer span in blogbody div</h2></a>
</span>
<a href="test"><h2 class="title">title h2 in blogbody div</h2></a>
<a href="test"><span class="title">title span in blogbody div</span>
</a>
</div>
</body>
</html>

--
Jay Levitt |
Wellesley, MA | Hi!
Faster: jay at jay dot eff-em | Where are we going?
http://www.jay.fm | Why am I in this handbasket?
Jul 20 '05 #5

P: n/a
Jay Levitt <ja******@jay.fm> wrote:
In article <op**************@news.individual.net>, ne*****@yahoo.com
says...
> Why is the title still underlined when I specify the class of the A tag?


To set a style for a with class "title", use the selector a.title { ... }.


I had actually tried that, and it didn't work, but that's because before
I simplified the example for posting, the code was actually something
like

<div class="blogbody">
<a href="link"><h2 class="title">title</h2></a>
</div>


That's totally invalid HTML. Inline elements like <a> can not contain
block elements like <h2>. So don't even both trying to get the CSS to
style the above - fix the HTML first and then apply the styles.

Steve

--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <st***@pugh.net> <http://steve.pugh.net/>
Jul 20 '05 #6

P: n/a
In article <gj********************************@4ax.com>, st***@pugh.net
says...
That's totally invalid HTML. Inline elements like <a> can not contain
block elements like <h2>. So don't even both trying to get the CSS to
style the above - fix the HTML first and then apply the styles.


Ah hah! Thanks. I copied that from another site.. should have tried
validating it first.

--
Jay Levitt |
Wellesley, MA | Hi!
Faster: jay at jay dot eff-em | Where are we going?
http://www.jay.fm | Why am I in this handbasket?
Jul 20 '05 #7

This discussion thread is closed

Replies have been disabled for this discussion.