Help Clean up my CSS

[mtran]

I'm new to CSS, this is my first css for my site [about 20 pages].
I'm not sure but have a feeling that there're extra things in there. Could anybody help me to clean it up or show me a better way so that I can learn more. Thanks.

By the way, in the section of dropdown, which is borrowed from DD Anylink menu, why there's "z-index: 100;" why 100? can it be other numbers?

thanks.
------------------
body {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 11px; background-color: #FFFFFF; color: #333333; margin-top: 10px;}

a:link {
color: #566390;
text-decoration: none; }

a:active {
color: #566390;
text-decoration: none; }

a:visited {
color: #566390;
text-decoration: none; }

a:hover {
color: #F48E1F;
text-decoration: underline; }

#menu a { /*menu_horizontal*/
display: block;
line-height: 20px;
width: 151px;
color:#FFFFFF;
border-style: solid;
border-right-width: 0.5px;
border-left-width: 0px;
border-top-width: 0px;
border-bottom-width: 0px;
border-color: #FFFFFF;
background-color: #566390;
text-decoration: none;
text-align: center;
font-weight: bold;}

#menu a:hover {
background-color: #6898C8;}

#submenu a { /*menu_vertical*/
display: block;
line-height: 20px;
width: 151px;
color:#FFFFFF;
border-bottom-width: 1px;
border-color: #FFFFFF;
border-style: solid;
background-color: #566390;
text-decoration: none;
text-align: left;
text-indent: 3px;
font-weight: bold;
border-left-width: 0px;
border-right-width: 0px;
border-top-width: 0px;}

#submenu a:hover {
background-color: #6898C8;}

#dropmenudiv{ /*dropdown*/
margin-top: 5px;
position:absolute;
border-right-width: 1px;
border-top-width: 0px;
border-left-width: 0px;
border-bottom-width: 0px;
border-color: #666699;
font-weight: bold 11px Verdana;
color: #FFFFFF;
line-height: 20px;
z-index: 100;}

#dropmenudiv a{
width: 100%;
display: block;
text-indent: 3px;
border-bottom: 1px solid white;
padding: 1px 0;
text-decoration: none;
color: #FFFFFF;
font-weight: bold;}

#dropmenudiv a:hover{ /*dropdown_hover*/
background-color: #6898C8;}


th, td, tr {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #333333;}


.td { /*regular text_margin 10px*/
text-align: left;
font-weight: normal;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #333333;
margin-left: 10px;}

.td2 { /*headline_bold orange_margin 10px*/
font-weight: bold;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #F48E1F;
margin-left: 10px;}

.td3 { /*headline_bold blue_margin 10px*/
text-align: left;
font-weight: bold;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #566390;
margin-left: 10px; }

p.solid {
border-style: solid;
border-color: #CCCCCC;
border-width: 1px;
width: 230px;
line-height: 15px;
padding: 5px;}

p.question {
font-weight: bold;
border-style: solid;
border-color: #6898C8;
border-width: 1px;
width: 435 px;
line-height: 15px;
padding: 5px;}

td.bottomline {
border-bottom-width: 1px;
border-style: solid;
border-color: white;
border-left-width: 0px;
border-right-width: 0px;
border-top-width: 0px;
}

.nav {
display: block;
background-color: #E9EDF1;
text-indent: 10px;
padding: 1px 0;
text-decoration: none;
color: #F48E1F;
font-weight: bold;}

.btn{
background-color: #E9EDF1;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 11px;
padding: 2px;}

li {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #333333;
line-height: 20px;
}

[mwinter]

By the way, in the section of dropdown, which is borrowed from DD Anylink menu, why there's "z-index: 100;" why 100? can it be other numbers?Absolutely. 1 should suffice in most cases.


body {
  font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;Using Verdana on the Web, particularly when reducing the font size, is generally a bad idea. Though Verdana is relatively readable at smaller sizes, other fonts are not. If it's not available (and it isn't, everywhere), the user could be left with an illegible site. Avoid it.


font-size: 11px;Don't set the font-size property with a pixel length. Due to a bug in IE, it cannot resize the text. Coupled with the problem above, that would be disasterous. Use percentages instead, preferably leaving body text at 100% (Verdana will no doubt look too large, which is another reason to avoid it), and going no lower than 85% of the default.


margin-top: 10px;}As some browsers set margins on the body element, and others set padding, both should be set explicitly (generally setting one to 0).


a:link {
color: #566390;The color property should always be coupled with an explicit background (or background-color) property declaration (and vice versa), even if you just reaffirm transparent or inherit. This avoids problems that can occur when user style sheets or desktop themes are applied. The only exception to this rule is where another CSS rule will set the missing property. For example,



p {
background: #ffffff;
color: #000000;
}
p.warning {
color: #ff0000;
}
The first rule will set a white background for all paragraph (p) elements explicitly, so its not necessary for the second rule (which only applies to particular paragraphs) to do it too.


text-decoration: none; }If your links appear amongst otherwise normal text, it may not be a good idea to remove the underline.


a:visited {
color: #566390;Visited links should be rendered distinctly from other links. This was debated recently in another thread (http://www.dynamicdrive.com/forums/showthread.php?t=6032).

A final note for this section of the style sheet is that your link-related rules aren't ordered properly. The :link pseudo-class should come first, followed by :visited, then :hover, and finally :active. If several rules can be applied to an element and they have the same specificity (http://www.w3.org/TR/REC-CSS2/cascade.html#specificity), later rules take precedence. For instance, when the cursor hovers over a link, both a:link and a:hover apply (a:visited might also), and those selectors have equal specificity. Because the hovering state is what you're most interested in, it must come later otherwise the other rule will override any declarations with its own.

The style sheet so far should look something like:



body {
background: #ffffff;
color: #333333;
font: 100% sans-serif;
padding: 0;
margin: 10px; /* If you want to remove the left and right
* margins, change the value to: 10px 0
*/
}

a:link {
background: transparent;
text-underline: none;
}
a:visited {
/* color: ??; */
}
a:hover {
color: #f48e1f;
text-decoration: underline;
}
a:active {
color: #566390;
}



line-height: 20px;Like font sizes, the line-height property shouldn't be specified in terms of pixels. Based on your previous font-size declaration, use a multiplier of 1.8 instead:



line-height: 1.8;

width: 151px;Presuming that your menu contains text, pixels should also be avoided here. Use a font-proportional unit like em.


border-style: solid;
border-right-width: 0.5px;
border-left-width: 0px;
border-top-width: 0px;
border-bottom-width: 0px;
border-color: #FFFFFF;Pixels cannot be fractional, and borders that you don't want rendered should be eliminated using a style value of none. Unless you've set borders elsewhere that need to be removed, the declarations above can be simplified to:



border-right: 1px solid #ffffff;
If you do need to eliminate other borders, insert the following declaration before the one above:



border: none;
Similar simplifications can be performed elsewhere.

It's too late to continue an analysis, but the above should be plenty to think about for now.

As an aside, you seem to have used id attribute selectors frequently in this style sheet. Are you aware that id values must be unique within a document? For several occurances of similar 'types' of elements, use classes instead.

Another is that class names (where you have used them) should be meaningful, for your own benefit if nothing else. For instance, .bottomline refers to how that rule looks, but that appearance might change in future. If you give certain cells a bottom border because they're in the last row of a table or table section, then a name along those lines would be better.

Mike

[mtran]

Wow!
Thanks a lot for your time & knowledge. I appreciate it!
Nice Thanksgiving if you're in the U.S. Now, realize you're not in the U.S, so nice day instead :)