473,387 Members | 1,528 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,387 software developers and data experts.

CSS: Borders don't always override?

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
6 9973
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
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
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
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
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
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 thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

1
by: trialanderror | last post by:
I've been happily chugging along thinking I understood floating divs and now find that I know a lot less than I thought I did. And the more I try "fixing" things, the worse it gets. A lot of what...
14
by: x | last post by:
Greetings everyone: I am trying to get CSS to work with a framed web page, but I cannot. Does anyone know the syntax required in a CSS specification to specify attributes of the frames? ...
6
by: Cabintrail | last post by:
What do people do who have large websites and use CSS, without using shared borders, how do you update navigation, etc? I'm volunteering to build several sites and want to set it up to enable...
98
by: Pamel | last post by:
I know this must have been asked elsewhere, but I cannot find it. There is a piece of text on my web page that I don't want browsers to resize. IE won't resize it if I specify the size in px, but...
26
by: Thomas Mlynarczyk | last post by:
Hi, Could some kind person using Mac or Linux (or others) please take a look at http://www.mlynarczyk-webdesign.de/tmp/menu/menu.html and tell me if the page renders as it should (screenshot...
7
by: Bob Bedford | last post by:
I've an image in a cell of a table. I've this CSS: ..dbtable{ width: 600px; padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px; border-collapse: collapse; border: 1px solid #000000;
7
by: Nilesh | last post by:
I am using background-image attribute in a CSS file and linking the CSS file to aspx page. But strangly, background-image attribute is not working for relative URL. e.g. If I apply following css...
10
by: phil-news-nospam | last post by:
I have a table with 3 columns in 1 row. I want to increase the spacing _between_ the columns (gutter) _without_ increasing the spacing between those columns and the table itself. Is there a way...
6
by: Hacking Bear | last post by:
Hi, I still don't quite fully understand how to handle mixing border/margin pixel width with percentage width. In the example below, I want to place side-by-side two DIV boxes inside a box....
0
by: taylorcarr | last post by:
A Canon printer is a smart device known for being advanced, efficient, and reliable. It is designed for home, office, and hybrid workspace use and can also be used for a variety of purposes. However,...
0
by: Charles Arthur | last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
0
by: ryjfgjl | last post by:
In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...
0
BarryA
by: BarryA | last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
1
by: nemocccc | last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
1
by: Sonnysonu | last post by:
This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...
0
by: Hystou | last post by:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
0
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...
0
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.