Below are some tips I threw to someone this week from my rusty CSS memory; anyone else like to add things they find useful?
******************************
Re: the display problem in IE7, I think the gradient image is ok in the CSS, it’s just that the page is too long for it to display where you want it to – because the #content has been thrown down beneath the navigation bar. Might be worth setting #content to a smaller width to see if it fixes this?
General CSS tips looking at your file … don’t worry it’s not too bloated!
– With font-family, always give a few different options rather than just one font. Maybe all users won’t have Tahoma – so you could have something like { font-family: tahoma, verdana, sans-serif } (so it will display tahoma as 1st choice, verdana if the user doesn’t have it, or if neither, it will get any sans-serif font.)
– For font-size try to set as a % or as em eg. { font-size: 1em } OR { font-size: 100% } – this will allow users with poor vision to increase the size (setting in px or pts locks it in IE)
– It’s typical when setting colours to use the HEX value, eg. { color: #CC0000 }
– Where you can, learn more and more short hand
eg.
{Â Â margin-left:Â Â auto; margin-right:Â auto; margin-top:Â Â Â 0px; margin-bottom: 0px }
could be summarised as { margin: 0 auto 0 auto }
OR { margin: 0 auto }
This not only means less typing, but makes the file smaller!
Hope these are useful!
Cheers
Ian.