Even with the CSS Reset, you can still have some spacing issues, especially with good ol’ Internet Explorer. There are a few ways to sort this out.
1) Create a specific stylesheet for the different browsers to overwrite the styles in the main sheet.
2) Add the code all in one style sheet by adding an ‘*’ in front of the style to catch IE7 and ‘_’ to catch IE6… i.e.
#wrapper {
margin:10px;
*margin:12px;
_margin:14px;
}
The only problem is the CSS won’t validate….
3) Or… By far my favourite… Replace your <body> tag with the following:
<!--[if lt IE 7 ]> <body class="ie6 "> <![endif]--> <!--[if IE 7 ]> <body class="ie7 "> <![endif]--> <!--[if IE 8 ]> <body class="ie8 "> <![endif]--> <!--[if !IE]><!--> <body> <!--<![endif]-->
This way, you don’t need to have multiple stylesheets, the CSS will validate and you can keep your code variations next to each other, so it’s easy to see what’s going on. You can set different parameters as follows:
#wrapper { margin:10px; }
.ie6 #wrapper { margin:10px; }
.ie7 #wrapper { margin:12px; }
.ie8 #wrapper { margin:14px; }
This was passed on by the inspirational Mark Jackson (MJ Digital)… Top Tip Marky Boy!