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

Why is a table cell adapting one class over another?

NoPeasHear
P: 23
My problem - the first cell of my table is adapting the .nav class rather than .menu class that I am assigning it. How can I fix it?

My code starts out as the following...

<link href="../basicstyle.css" rel="stylesheet" type="text/css">
<style type="text/css">
<!--
.style1 {color: #CCCC99}
-->
</style>
</head>
<body>

<table width="780" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td align="center" class="menu">
<a href="01.html">home </a>
<a href="bio.html">bio</a>
<a href="resume.html">resume</a>
<a href="thumbnails.html">thumbnails</a>
<p></td>
</tr>


my stylesheet...

body {background-color:#454A0D}
a {text-decoration:none;}
a:link{color:#241B02}
a:visited{color:#241B02}
a:hover{color: #FFFBDB;text-decoration:none;
}
a:active {color:#454A0D}

.menu
a {text-decoration:none;}
a:link{color:#FFFBDB}
a:visited{color:#FFFBDB}
a:hover{color: #241B02;text-decoration:none;
}
a:active {color:#FFFBDB}


.caption {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight:normal;
color:#241B02}

.credit{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
font-style:italic;
text-transform:none;
font-weight:normal;
color:#241B02
}

.nav
a {text-decoration:none;}
a:link{color:#454A0D}
a:visited{color:#454A0D}
a:hover{color: #241B02}
a:active {color:#241B02}
Sep 17 '06 #1
Share this Question
Share on Google+
4 Replies


drhowarddrfine
Expert 5K+
P: 7,435
Can't tell but remove that stray <p> and see what happens. Otherwise, need a link or the complete code.
Sep 17 '06 #2

Banfa
Expert Mod 5K+
P: 8,916
This is wrong

[html]
.menu
a {text-decoration:none;}
a:link{color:#FFFBDB}
a:visited{color:#FFFBDB}
a:hover{color: #241B02;text-decoration:none;
}
a:active {color:#FFFBDB}
[/html]
it needs to be
[html]
.menu a {
text-decoration:none;
}
.menu a:link {
color:#FFFBDB;
}
.menu a:visited {
color:#FFFBDB
}
.menu a:hover {
color: #241B02;
text-decoration:none;
}
a:active {color:#FFFBDB}
[/html]i.e. .menu needs to appear before every style rule to which it is supposed to apply. A similar things needs doing for .nav

Iyou your current style sheet you have

a:link{color:#FFFBDB}

and then later

a:link{color:#454A0D}

The second definition for the a:link style overrides the first all itmes of type a:link use the second rule.
Sep 17 '06 #3

NoPeasHear
P: 23
So if you have more than one set of rules for links in your stylesheet you need to place the class name in front of each specification?

Thanks for your help.
Sep 18 '06 #4

Banfa
Expert Mod 5K+
P: 8,916
So if you have more than one set of rules for links in your stylesheet you need to place the class name in front of each specification?
Basically, Yes
Sep 18 '06 #5

Post your reply

Sign in to post your reply or Sign up for a free account.