CSS Optimization Help

I'm not too good at optimizing CSS, or even writing it.

I came up with this bit of code while trying to integrate my WordPress style with my vBulletin style and so far the header is looking great.

I'd like to make sure everything is as tidy as possible though, so if anyone would be kind enough to show me how (if possible) I could optimize this I'd be very thankful.

Code:

#wp_page {
    background: white;
    text-align: left;
    margin: -8px auto;
    padding: 20px 0 10px;
    border: 1px solid #ddd;
    border-top: none;
    clear: both;
    width: 780px;
    }

#wp_header {
    padding: 0;
    margin: 0;
    position: relative;
    height: 200px;
    background: #3371A3;
    background: url("http://www.hoytroid.com/images/header.png");
    }
    
#wp_header h1, #wp_header .wp_description {
    display: none;
}

ul.wp_menu {
    margin: 0;
    padding: 0;
    position: absolute;
    bottom: 0;
    left: 20px;
    width: 90%;
    }

ul.wp_menu li {
    display: inline;
    }

ul.wp_menu,
ul.wp_menu li a {
    padding-top: 5px;
    padding-right: 15px;
    padding-bottom: 6px;
    padding-left: 15px;
    }

ul.wp_menu li a {
    font-size: 10px;
    color: white;
    margin: 0;
    text-decoration: none;
    }

ul.wp_menu li a:hover {
    background: #333;
    color: #eee !important;
    text-decoration: none;
    }

ul.wp_menu li.wp_current_page_item a,
ul.wp_menu li.wp_current_page_item a:hover {
    color: #333 !important;
    background: white;
    text-decoration: none;
    }

hr {
    display: none;
    }

looks ok

some tips:

negative margins suck in IE. be sure to test it a lot.

clear:both
do you have both a float left and float right element above the #wp page div? that doesn't make sense to me...

position: relative, on a header, is probably not needed.
it is the default behavior.

using display: none can have some 'blackhat' properties to it.
google up "css image replacement" for some ideas on how to use negative margins instead.

absolute positioned elements don't have "margins". They "do" but its pointless... if you need a margin space, make the width or height smaller.

avoid using color names such as "white". use the hex code.

instead of
border: 1px solid #ddd;
border-top: none;
use this:

border: solid #ddd;
border-width: 0 1px 1px 1px;it seems like more code, but at the same time you're not creatin a rule and then over-riding it.
doing this can cause some odd browser quirks.


background: #3371A3;
background: url("http://www.hoytroid.com/images/header.png");can be one statement:

background: url("http://www.hoytroid.com/images/header.png") #3371A3 no-repeat;

it also tends to be a good idea to use root urls,
so
background: url("/images/header.png") #3371A3 no-repeat;



padding-top: 5px;
padding-right: 15px;
padding-bottom: 6px;
padding-left: 15px;
can be written short hand

padding: toppx rightpx bottompx leftpx;
it goes clock wise

avoid using !important unless absolutely necessary.

if you need important to make it work, you should re-think your specificity of the element.