This is the key to make a layout display correctly between various browsers. Usually it’s either one or the other that will show gaps between your div tags (boxes) or other abnormalities. There’s a variety of hacks available to ensure compatibility for the two most used browsers (Mozilla based, MSIE).
Most used by myself:
-
<!–[if lt IE 6]>
-
<link rel="stylesheet" type="text/css" href="assets/css/ie5.css" mce_href="assets/css/ie5.css"></link> < ![endif]–> <!–[if lt IE 7]>
-
<link rel="stylesheet" type="text/css" href="assets/css/ie6.css" mce_href="assets/css/ie6.css"></link> < ![endif]–> <!–[if IE 7]>
-
<link rel="stylesheet" type="text/css" href="assets/css/ie7.css" mce_href="assets/css/ie7.css"></link> < ![endif]–>
If you use this piece of code in the head tag of your document you can override any existing style sheet element for Internet Explorer 6 and 7. Many times you will address things such as margins to correct the layout. The numbers are of course up to what you’re designing.