Making a Webpage look the same in Firefox and IE

The problem : the styling works in Firefox but doesn’t in IE6.

Here’s how to get round many of the problems. Initially build the site so that it works in Firefox. Then look at it in IE. If it looks different then add a second stylesheet that’s only read by IE.

Example : In the below image the shaded bar should reach to the edge of the blue box. In Firefox it does reach the edge, but as shown here in IE, it does not.









Here’s the style sheet reference that controls the width of the bar…

.menubar
{
width:724px;
text-align:left;
clear:left;
background-image: url(../images/menu_back.gif);
background-repeat:repeat-x;
font-weight:bold;
height:25px;
padding-left:18px;
}

So to get it to work in IE, add a second stylesheet and add an override to correct the problem…

.menubar
{
width:742px;
}

Note that the IE stylesheet does not replace everything, it is simply overriding one attribute in the stylesheet.

Next you have to add a special link to the new style sheet like this.

    <link href="Styles/P.css" rel="stylesheet" type="text/css" />>
    <!--[if gte IE 6]>
    <link href="styles/Pie6.css" rel="stylesheet" type="text/css" />
    <![endif]-->    

The second stylesheet (IE ONLY) is hidden from other Browsers by putting its link statement in the HTML comment as shown.