Link states wont change

even when css styles are added my link states wont change

[darcbar]

I work in dreamweaver and have done this before with no problems but for some reason i cant work this out :~#

I have my main navigation links set and when i look in design mode all is fine the styles are as should be but when i look in live view or preview in browser the styles are no longer in affect and instead what i think is the default states- blue and underlined- are shown

would be gratefull if someone could look at my code and see if theres a mistake im missing

[darcbar]

HTML CODE

<div id="nav_bar">
<ul class="nav_lst"><li><a href="index.html" class="main_nav_lnk_state" >Home</a></li><li><a href="learn_to_drive.html" class="main_nav_lnk_state">Learn to Drive</a></li>
<li><a href="areas_covered.html" class="main_nav_lnk_state">Areas Covered</a></li>
<li><a href="test_centre.html" class="main_nav_lnk_state">Test Centre</a></li><li><a href="links.html"class="main_nav_lnk_state">Links</a></li></ul></div>

CSS CODE

.bod_contain #header #nav_bar .nav_lst li {
display: inline;
font-family: Arial, Helvetica, sans-serif;
font-size: 10pt;
font-weight: bold;
color: #F00;
padding-right: 70px;
padding-left: 0px;
margin: 0;
}
.bod_contain #header #nav_bar .nav_lst {
margin: 24px 0 0 145px;
padding: 0;
}

.bod_contain #header #nav_bar .nav_lst li a.main_nav_lnk_state: link {color:#F00; text-decoration:none;}

.bod_contain #header #nav_bar .nav_lst li a.main_nav_lnk_state: visited { color:#F00; text-decoration:none;}

.bod_contain #header #nav_bar .nav_lst li a.main_nav_lnk_state: hover {color:#FFF; text-decoration:none;}

.bod_contain #header #nav_bar .nav_lst li a.main_nav_lnk_state: active {color:#F00 ; text-decoration:underline;}

[D_Blackwell]

Problem number one: The HTML provided does not match the CSS provided. For example, the :hover state declared for a.main_nav_lnk_state must be inside, a <li>, which must be inside .nav_lst, which must be inside #nav_bar, which must be inside #header, which must be inside .bod_contain.

That is very specific (overly so, IMO). The HTML provided lacks the last two, so it won't work. If you replace them, they must remain open, wrap a.main_nav_lnk_state, and not close until after that point. Otherwise, remove them from the CSS declarations.

Problem number two: All of the link states have a single space after : - There should be no space. For example, :hover is correct. : hover will not work.

[darcbar]

Ok sorry i havent provided the full html so it looks like they dont match but they do in my document.

I have deleted the space in the css tag and thats what the problem was, so thanks D_Blackwell.

Ps

R.E- That is very specific (overly so, IMO).
What do you mean by this, IMO, i understand its very specific and as im fairly new, i now wonder if this will maybe affect the performance of my website ? ? or something along thoughs lines ? ?

Thanks

[D_Blackwell]

R.E- That is very specific (overly so, IMO).
What do you mean by this, IMO, i understand its very specific and as im fairly new, i now wonder if this will maybe affect the performance of my website ? ? or something along thoughs lines ? ?

I think that it is usually a fine thing to 'lock' a declaration so that it does not accidentally affect the cascade with other declarations; a mistake not to do so, IMO.

For example:
a {
color: blue; background-color: red;
}
is a global declaration for all <a> that would have to be overridden everywhere that you wanted something else.

Better is:
a.main-style {
etc.
because you may have several different presentations for <a> on the website; one for primary navigation, one for inline links, one for footer links, and so forth. A class for each of the <a> presentations means that you can reach for the right one easily and quickly. Advance planning of the design will allow you to design that stylesheet(s) for the entire website, and it will stand up to site expansion with minimal additions for a long time. Designers that find themselves adding to the stylesheet every other time that they add something to the site probably have not thought the design through nearly as far as they should have.
..............................

To actually answer your question, putting the following in your stylesheet is not wrong, will most likely not add so much file size that anyone would every notice, so no problem there. You can use it 'as is' just fine.

.bod_contain #header #nav_bar .nav_lst li a.main_nav_lnk_state:link {
etc.

However, I have two problems with drilling down the usage point so precisely.

1) A year from now, when it is not all still fresh in the mind, the .css will be unnecessarily difficult to read. If you wanted an 'example', of where and how a.main_nav_link_state:link is used, or used most often, then I would add a comment to the .css file just before a:link,a:visited, a:hover, and a:active.

/**********Usual container configuration
.bod_contain #header #nav_bar .nav_lst li a.main_nav_lnk_state*/

2) a.main_nav_lnk_state is extremely specific to start with, and probably enough by itself to be understood.

...2A) The class declaration is probably specific enough that you don't need the full drill down (which is as long as the declaration for :link itself).

...2B) If this is a declaration that you ever use anywhere else, but you have specified the cascade beyond a.main_nav_lnk_state, then it will not be reusable; it will be necessary to add to the .css. You would have to add a whole new declaration because it is not resuable, Or - you would have to add , .another-use in front of the selector and declaration block.

...2C) Just personal preference. Balancing the need for the .css to be informative and understandable a year from now, as well as ensuring that cascade conflicts are avoided - against conciseness which makes the .css easier to work with and the use of comments which might well explain the usage of a declartion and eliminate needing all that drill down declartion after declaration.

...3D) I will sometimes 'bracket' what is usually going to be a series of wrapped containers by commenting the beginning and end.
/**********BEGIN MAIN NAVIGATION
Container order is.....

Related declartions.....

/**********END MAIN NAVIAGATION*/

[darcbar]

This totally makes sense

Thanks again D_Blackwell

[darcbar]

Planning is the key