CSS - Div's Problem (very Important)

Hi,

I'm currently designing a Wordpress skin for someone and trying to style the navigation using CSS. Given that Wordpress is so popular, I expect that someone has encountered this before - but I can't find anything about this particular problem.

Basically, I'm having problems achieving the correct precedence in the CSS cascade for certain elements of my page (navigation) design.

In one part of the CSS I've had to use !important to get it to behave appropriately, but then I have another part which I need to be able to denote as "very important" but I don't think this is possible.

I get the feeling that I can probably do this without !important since I'm aware that it is abusing its purpose a bit (i.e. accessibility?) and instead I could do it according to the selector's specificity if I understood it better: http://www.w3.org/TR/REC-CSS2/casca...cascading-order

Here's a HTML snippet of what I have in the navigation:
html4strict Code:
Original - html4strict Code <div id="sidebar"> <ul> <li class="page_item current_page_item"> <a title="Home" href="home.php">Home</a> <ul> <li class="page_item"> <a title="Directors" href="home.php?page_id=12">Directors</a> </li> </ul> </li> <li class="page_item"><a title="News" href="home.php?page_id=3">News</a> </li> </ul> </div>

  

  


 <div id="sidebar">


   <ul>


     <li class="page_item current_page_item">


       <a title="Home" href="home.php">Home</a>


       <ul>


         <li class="page_item">


           <a title="Directors" href="home.php?page_id=12">Directors</a>


         </li>


       </ul>


     </li>


     <li class="page_item"><a title="News" href="home.php?page_id=3">News</a>


     </li>


   </ul>


 </div> 

I'm then using the following CSS to attempt to style this part:
css Code:
Original - css Code #sidebar { float: left; width: 149px; padding: 1em 0; } #sidebar ul { list-style: none; } #sidebar ul li { margin: 0.4em 0.8em; padding: 1px; } #sidebar ul li a { font-size: 1.5em; font-weight: 500; padding: 0.3em; text-decoration: none; color: #000; background: #FFFACD; display: block; border: 1px solid blue; } #sidebar ul li a:hover { color: #bb2a2a; } #sidebar ul li ul li { display: none; } #sidebar ul li.current_page_item ul li, #sidebar ul li.current_page_parent ul li { /* sub-menu item */ display: inline; padding: 0; margin: 0; border: none; } #sidebar ul li.current_page_item, #sidebar ul li.current_page_parent { border: 1px solid green; } #sidebar ul li.current_page_item ul li a, #sidebar ul li.current_page_parent ul li a { /* sub-menu item link */ font-size: 1.2em; padding: 0.1em 0 0.2em 17px; background: #FFFACD url(images/sub-dot.gif) no-repeat left; } #sidebar ul li.current_page_item a, #sidebar ul li.current_page_parent ul li a.current_page_item { color: #bb2a2a !important; border: none !important; } .current_page_item ul li a { color: #000 !important; border: none !important; } #sidebar ul li.current_page_parent ul li a, .current_page_parent a { border: none !important; } #sidebar ul li.current_page_item ul li a:hover, #sidebar ul li.current_page_parent a:hover { color: #bb2a2a; border: none !important; }

  

  


 #sidebar {


     float: left;


     width: 149px;


     padding: 1em 0;


 }


  


 #sidebar ul {


     list-style: none;


 }


  


 #sidebar ul li {


     margin: 0.4em 0.8em;


     padding: 1px;


 }


  


 #sidebar ul li a {


     font-size: 1.5em;


     font-weight: 500;


     padding: 0.3em;


     text-decoration: none;


     color: #000;


     background: #FFFACD;


     display: block;


     border: 1px solid blue;


 }


  


 #sidebar ul li a:hover {


     color: #bb2a2a;


 }


  


 #sidebar ul li ul li {


     display: none;


 }


  


 #sidebar ul li.current_page_item ul li, #sidebar ul li.current_page_parent ul li { /* sub-menu item */


     display: inline;


     padding: 0;


     margin: 0;


     border: none;


 }


  


 #sidebar ul li.current_page_item, #sidebar ul li.current_page_parent {


     border: 1px solid green;


 }


  


 #sidebar ul li.current_page_item ul li a, #sidebar ul li.current_page_parent ul li a { /* sub-menu item link */


     font-size: 1.2em;


     padding: 0.1em 0 0.2em 17px;


     background: #FFFACD url(images/sub-dot.gif) no-repeat left;


 }


  


 #sidebar ul li.current_page_item a, #sidebar ul li.current_page_parent ul li a.current_page_item {


     color: #bb2a2a !important;


     border: none !important;


 }


  


 .current_page_item ul li a {


     color: #000 !important;


     border: none !important;


 }


  


 #sidebar ul li.current_page_parent ul li a, .current_page_parent a {


     border: none !important;


 }


  


 #sidebar ul li.current_page_item ul li a:hover, #sidebar ul li.current_page_parent a:hover {


     color: #bb2a2a;


     border: none !important;


 } 

Using "View Formatted Source" in FF I'm finding that the color defined in ".current_page_item ul li a" is over-ruled by "#sidebar ul li.current_page_item a, #sidebar ul li.current_page_parent ul li a.current_page_item".

As you can perhaps tell, the current_page_item class is set on the list item that matches the current page, and if the current page is within a sub-section (i.e. it has a parent), current_page_parent will be set to the parent list item.

This gives me a navigation such as:

> Home
>> Directors

If we're on the Home page (as in example code above), I want that to have the red colored text, but Directors to be black. If Directors is the current page, I want that to be red, and Home to be black.

Basically anything that isn't the current page should be black...

At the moment (because .current_page_item ul li a doesn't seem to work) I'm getting red text for Home and Directors when on the Home page... I want Directors to be left black in this situation.

N.B. It's more complicated than above because I also want to do some styling with borders on the top level list items (well, the a element within), but if someone can point out where I'm going wrong with the above I think I should be able to sort the rest out...

Thanks in advance - please let me know if you need more details!

I have 2 css files. One main one that I am using
Code:

 input[type="text"], select 
{ 
    background: #FFF !important; 
} 

I use that mainly for Firefox as without it the form fields are yellow.

but I would like to override that have have one form field on this one page stick out and have it like this.
Code:

.CCfield {
	color: Black;
	background: #FFFF66; 
}

Is this doable? How can I override it for this one field?

Thanks

I was in a meeting today talking about relative font sizes and how they can be problematic, because nesting elements may increase or decrease their font size.

A co-worker said that I could use !important in my CSS to override/ignore the font-sizes of any nested elements. He seems to be way off. The W3C says that !important is really just about user versus author stylesheets, and apparently declaring !important in an author stylesheet doesn't do anything.

So first question -- am I right about !important? It's only about user and author stylesheets, yes?

Second question -- When dealing with relative fonts and nested elements, you have to start writing pretty complex rules, right?

Is there any easy way in CSS without writing multiple rules to say "regardless of what element I place you in, always be x% font size..."?

Hey!!

What's the difference between:

font: small Arial, sans-serif!important;

and

font: small Arial, sans-serif;

thanks

Hey,
I think i just need someone else to look at this for me. I've been coding all day and would probably be able to figure this out if I just went to bed and did it tomorrow. If you roll over an image that's alson an anchor at www.deeperdevotion.com/wp, you'll find that it places a background-color or underline or both on it. The thing is, I can't find the code in my CSS that's causing me the trouble.

my css is located at www.deeperdevotion.com/wp/wp-content/themes/dd/styles/101106.css

Thanks.