Here are some quick tips and precautions that you can take that will hopefully save you a bit of hair when you decide to look at your code in a Internet Explorer. Most of these CSS tips are aimed at IE 6, but some are also relevant to IE 7.

1. Do Reset Browser Styles
2. If you float something, add display:inline; to avoid double margins
3. Clear:both on your footers
4. Always specify a:link, a:visited, a:hover, a:focus and a:active
5. For IE always specify overflow:visible.
6. Avoid pngs or use workarounds.
7. On having layout – Most of IE 6’s problems can be avoided by adding has layout to elements.
8. Define min-width and max-width in IE
   Width:#container
{
min-width: 600px;
max-width: 1200px;
width:expression(document.body.clientWidth < 600? "600px" : document.body.clientWidth > 1200? "1200px" : "auto");
}

   Height:

   .box
{
width: 80px;
height: 35px;
}

   html>body .box
{
width: auto;
height: auto;
min-width: 80px;
min-height: 35px;
}

   More info

9. Use conditional statements to add a seperate stylesheet, which makes ie play nice:

   <!--[if IE]>
   <link rel="stylesheet" type="text/css" href="ie.css" /> -->
   <![endif]-->

References and more info:
CSS tips

This entry was posted on Wednesday, February 18th, 2009 at 2:25 am and is filed under Uncategorized. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.