SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    Jul 2003
    Location
    St. Louis
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS Selector Question

    I'm working on the CSS for a site and came across this oddity that I can't find a way around. Perhaps someone here with much more CSS experience can help me.

    I'm doing a menubar at the top with a single row of links. The link for the currently viewed page is orange, all others are white but change to orange on mouseover. Here is the CSS:

    Code:
    /* ============== Topbar ================ */
    
    .topbar_active	a:link, a:visited, a:active	{
    	font-family: Arial, sans-serif;
    	color: #ff6c00;
    	background-color: #000000;
    	font-weight: bold;
    	text-decoration: none;
    }
    
    
    td.topbar_active					{
    	text-align: center;
    }
    
    
    .topbar		a:link, a:visited, a:active	{
    	font-family: Arial, sans-serif;
    	color: #ffffff;
    	background-color: #000000;
    	font-weight: bold;
    	text-decoration: none;
    }
    
    td.topbar					{
    	text-align: center;
    }
    
    .topbar		a:hover				{
    	color: #ff6c00;
    }
    And here is a stripped down version of the html:

    Code:
    <!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>Test page</title>
    <link rel="stylesheet" type="text/css" href="css/global.css" />
    </head>
    
    <body>
    <table width="100%" cellspacing="0" cellpadding="0" bgcolor="#000000" align="center" border="0">
    <thead class="genbackground">
    <tr height="100">
    	<td></td>
    	<td>
    		<!-- ###TOP_HEADER### begin -->
    		<table width="100%" height="100%" cellspacing="0" cellpadding="0" border="0">
    		<tr>
    			<td id="sitetitle" nowrap="nowrap">Test page</td>
    			<td align="right" width="117" ><img src="images/photo.jpg" alt="Girl sitting with laptop" /></td>
    		</tr>
    		</table>
    		<!-- ###TOP_HEADER### end -->
    	</td>
    	<td></td>
    </tr>
    </thead>
    <tbody>
    <tr>
    	<td class="border"></td>
    	<td>
    		<!-- ###TOP_BAR### begin -->
    		<table width="100%" cellspacing="0" cellpadding="0" border="0">
    		<tr>
    			<td class="topbar_active"><a href="">Home</a></td>
    			<td class="topbar"><a href="">Email</a></td>
    			<td class="topbar"><a href="">Support</a></td>
    			<td class="topbar"><a href="">Directory</a></td>
    			<td class="topbar"><a href="">Links</a></td>
    		</tr>
    		</table>
    		<!-- ###TOP_BAR### end -->		
    	</td>
    </tr>
    </tbody>
    </table>
    
    </body>
    </html>
    The problem is the "Home" link won't take her style! It picks up the td.topbar_active selector but not the .topbar_active selector. I'm using FireFox, but have tried Konqueror, IE and none display it as intended. However, if I open the DOM Inspector for FF it will display it as intended, odd.

    Any help would be appreciated.

  2. #2
    SitePoint Wizard silver trophy KLB's Avatar
    Join Date
    Nov 2003
    Location
    Maine USA
    Posts
    3,781
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You need to change the order of your style instructions such that the instruction you want to override other instructions comes last.
    Ken Barbalace: EnvironmentalChemistry.com (Blog, Careers)
    InternetSAR.org
    Volunteers Assist Search and Rescue via Internet
    My Firefox Theme: Classic Compact
    Based onFirefox's default theme but uses much less window space

  3. #3
    SitePoint Member
    Join Date
    Jul 2003
    Location
    St. Louis
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by KLB
    You need to change the order of your style instructions such that the instruction you want to override other instructions comes last.
    There should be no overriding though. They are two seperate selectors. From my understanding of it what I have here has no overlap, so there should not be a question of ordering, right?

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    I'm not sure what you are trying to do but this style is wrong and you have repeated it elsewhere also.
    Code:
    .topbar_active a:link, a:visited, a:active {
    What you are defining above is the link state of topbar_active and then all states of any other links that are visited or active. Therefore if you have clicked your home link once then it will be defined by the visited state.

    Because underneath in this style you have redefined the visited and active states to white for all links
    Code:
    .topbar	 a:link, a:visited, a:active {
    What I think you meant to do is this:
    Code:
    .topbar a:link,.topbar a:visited,.topbar a:active{etc...}
    And do the same for the other style.

    Anything that comes after the comma is a new style and not related to anything that came before. Its just away fogiving the same properties to various elements and no relationship between elements is inferred.

    Hope that helps.

    Paul

  5. #5
    SitePoint Member
    Join Date
    Jul 2003
    Location
    St. Louis
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ahhhh....

    I thought the class carried over to other tags on the line.

    Thanks.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •