471,353 Members | 1,521 Online
Bytes | Software Development & Data Engineering Community
Post +

Home Posts Topics Members FAQ

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

My "sub links" won't colour

Hi all,

I have started with css some months ago, and though I'm feeling more and more safe and comfortable, some parts of css still don't make perfect sense to me.

Right now I have this problem: I have a large column div with text and links in it, and then some "special area links" that should be orange and different from the standard text links.

But even though I have declared all colourchanges for my "special area" a tags, they just will not listen -- until I drag them outside my column div.

Here's a link to illustrate.

Hope someone can shed some light on this for me.
Thanks.

Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3.  
  4.     <head>
  5.         <meta http-equiv="content-type" content="text/html;charset=iso-8859-1" />
  6.         <title>Test Page</title>
  7.         <style type="text/css" media="screen">
  8.             <!--
  9.             body { color: #acacac; font-size: 11px; font-family: Verdana, Arial, Helvetica, sans-serif; line-height: 18px; background-color: #fce2ba; }
  10.             #textcolumn { background-color: #3c0000; padding: 10px; }
  11.             #textcolumn a { color: #acacac; }
  12.             #textcolumn a:link, #textcolumn a:visited   { color: #acacac; text-decoration: none; border-bottom: 1px dotted  }
  13.             #textcolumn a:focus, #textcolumn a:hover   { color: #fff; border-bottom: 1px solid  }
  14.             .subarea a { color: #f89828; font-size: 10px; }
  15.             .subarea a:link, .subarea a:visited { color: #f89828; }
  16.             .subarea a:focus, .subarea a:hover { color: #fff; }
  17.             -->
  18.         </style>
  19.     </head>
  20.  
  21.     <body>
  22.  
  23.         <div id="textcolumn">
  24.             Textcolumn text blah blah blah. <br />
  25.             <a href="#">Textcolumn link here</a>
  26.             <div class="subarea">
  27.                 <a href="#">Subarea link here</a>
  28.             </div>
  29.         </div>
  30.         <div class="subarea">
  31.             <a href="#">Subarea link here</a>
  32.         </div>
  33.  
  34.     </body>
Aug 26 '07 #1
2 3323
drhowarddrfine
7,435 Expert 4TB
I believe you are running into a 'specificity' issue. No time to explain but you might google for "css specificity".
Aug 26 '07 #2
You nailed it - brilliant. Never heard of that before, but I sure see now why some of my css seemed to have an attitude.

Changed
Expand|Select|Wrap|Line Numbers
  1. .subarea a { color: #f89828; font-size: 10px; }
into
Expand|Select|Wrap|Line Numbers
  1. #textcolumn .subarea a { color: #f89828; font-size: 10px; }
and everything works fine.

Thanks a lot for your help..! :D

/BF
Aug 27 '07 #3

Post your reply

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

Similar topics

reply views Thread by pom | last post: by
2 posts views Thread by Konrad Mathieu | last post: by
7 posts views Thread by Will Hartung | last post: by
2 posts views Thread by Danial Juka | last post: by
AutumnsDecay
2 posts views Thread by AutumnsDecay | last post: by

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.