Some more CSS tips

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
{   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!



Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.