In my travels designing a new corporate website I figured that my CSS defined class was just looking really wonky in IE compared to Mozilla. Microsoft (in all of it’s bask in glory) has a unique rendering engine unlike its counterparts. But they’re coming around and are beginning to follow the W3C standards. Firefox’s rendering engine is based off of Mozilla’s standards, which follow very closely with those recommended by the W3C.
For example:
.topmenu {
width:780px;
background-image:url(/images/topmenu_bck.jpg);
background-repeat:repeat-x;
margin-top: 3px;
height: 46px;
}
Looks very nice in Firefox but IE comes out looking skewed. The solution to this problem is to include the following code:
<!–[if IE]>
<style>
.topmenu {
margin: 0px;
}
</style>
<![EndIf]–>
Evidently the margin in IE doesn’t have to be set to 3px, it can be set to 0px and it still looks correct. With the 3px margin, the elements in my topmenu class were skewed down about 3 px causing the layout to look broken. By adding the code above, the problem is easily solved.
This is nothing new but it helps to remind myself that cross browser compatibility is important!