AAAAAAAAAAA IE is giving me a headache!!!

[weegillis]

Oops... Ignore the shims. You have modernizr. The part about this appearing BEFORE your style sheet link still applies. It will speed up page load if the DOM is prepared before the style sheet comes in for parsing.

[Anissa]

I must not be doing something right. It's still jumpy. The navigation. I will move the modernizr.

[Anissa]

*does a little dance* I figured it out. Thanks for everything. Is there anything else I need to fix?

[weegillis]

Order counts in your style sheet. Be sure to put lowest specificity at start of cascade, and have rules progress in order of specificity from there.

CSS

#nav li a{
display: block;
text-decoration: none;
border: solid 1px #728F86;
line-height: 14pt;
}
#nav {
height: 3px;
font-family: 'palatino linotype';
font-size: 14pt;
    width: 800px;
    margin: 0px auto;    
    margin-left: 350px;
    margin-top: 5px;
        list-style: none; }
#nav li {line-height: 14pt;
border: solid 1px #728F86;
background-color: #728F86;
    float: left; 
    padding:5px;}
#nav li a:link {line-height: 14pt;
border: solid 1px #728F86;
color: #F8F8FF;
}
#nav li a:visited{line-height: 14pt;
border: solid 1px #728F86;
color: #F8F8FF;}
#nav li a:hover{line-height: 14pt;
color: #F8F8FF;
background-color: #987993;
padding: 2px;
 border: solid 1px #3d3d3d;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
#nav li a:active{line-height: 14pt;
color: #F8F8FF;
background-color: #987993;
padding: 5px;
 border: solid 1px #3d3d3d;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}

You could adjust this rule set like so:

/* ??? do you really mean 3 pixels? or should this be more? */
/* !!! don't forget to include fall back fonts; at the very least, add serif to the list. Font names should be capitalized as they appear in the Fonts folder. */
 /* PT is a type size for printing, not web pages. Use PX or EM or % for units. */
/* 0 is not a defined value, so it gets no units. */
#nav {
 height: 3px;
 font-family: 'Palatino Linotype', 'Times New Roman', serif; 
 font-size: 14px;
 width: 800px;
 margin: 0 auto;    
 margin-left: 350px;
 margin-top: 5px;
 list-style: none;
}
#nav li {
 line-height: 14px;
 background-color: #728F86;
 float: left; 
 padding: 5px;
}
#nav li a{
 display: block;
 text-decoration: none;
 color: #F8F8FF;
 line-height: 14px;
 padding: 2px;
 border: solid 1px #728F86;
 -webkit-border-radius: 5px;
 -moz-border-radius: 5px;
 border-radius: 5px;
}
#nav li a:hover,
#nav li a:active {
 color: #F8F8FF;
 background-color: #987993;
 border: solid 1px #3d3d3d;
}

[weegillis]

*does a little dance* I figured it out. Thanks for everything. Is there anything else I need to fix?

Remember to swap out those images. One of them is over 250 KB. They should be only about 2-4 KB each for the size that's displaying. I would add that if the thumbnails are all the same dimensions, they will look better, imho.

Go through your style sheet and arrange as suggested, according to specificity. Remember that rules lower in the cascade gain in specificity, even if their selectors stay the same. Make sure all your style rules are taking effect, as they should, by order of the cascade, not by whether they are brute forced to work (i.e., with !important or more selectors).

[Anissa]

The only one I am having a problem optimizing is the logo. I tried a couple of different optimizers, but I can't get it under 30kb much less in between 2-4.

[weegillis]

There is a mismatch in physical dimensions on the logo, for starters. Smaller dimensions to match the img attributes (288x175 as opposed to 336x204) might shrink the byte count. The drop shadow is adding overhead. One might try using CSS box-shadow and reduce the image size even more. Just thoughts.

Looking at the nav, your original height had a nicer mouseover. To restore it,

#nav li a{
 ...

 line-height: 18px; /* or thereabout */

 ...
}

[Anissa]

I will fix that when I get home from work. thanks again.

[weegillis]

Oops... Ignore the shims. You have modernizr. The part about this appearing BEFORE your style sheet link still applies. It will speed up page load if the DOM is prepared before the style sheet comes in for parsing.

Hogwash. I did some more reading up and was dead wrong. The shim is supposed to load in AFTER the other style sheets, not before. Same goes for Modernizr (which has an option to include the shim). My apologies for misleading everyone.