Two style sheets required with one framework. The reason that we include two style sheets is one for Fire Fox, Chrome etc. and one for IE.
IE is the only browser that supports conditional commenting and therefore we need to style for FF/Chrome etc on a ‘main’ style sheet and have a separate page that we adjust the bugs that might form, for IE separately that is included with conditional commenting on our page/master page.
There should be a wrapper to contain your header, body (herein referred to as container) and footer. This is so we can have optimal control of the main display (wrapper) and then style the rest (header, container and footer) as required. Font size is set on the html tag as 100% so we can style the rest of the fonts accordingly on %. It is wise and suggested that % or em’s is used for font sizes, as people have different screen resolutions, and setting pixels on font sizes can cause havoc on some peoples screens.
Chrome/FF Style Sheet
html {
height:100%;
font-size:100%;
}
body {
margin:0 auto;
padding:0;
text-align: -moz-center;
text-align: -khtml-center
}
#wrapper {
text-align: -moz-center;
text-align: -khtml-center;
width:800px; //whatever you need your width. mines on 800
margin:0 auto;
}
#header {
width:800px; //add style as required
}
#container {
width:800px; //add style as required
}
#footer {
width:800px; //add style as required
}
IE Style Sheet
html {
height:100%;
font-size:100%;
}
body {
margin:0 auto;
padding:0;
text-align:center;
}
#wrapper {
text-align:center;
width:800px;
margin:0 auto;
padding-bottom:20px;
}
HTML
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Sample</title>
<link href="<%=ResolveUrl("~/style/ChromeFFStyle.css") %>" rel="stylesheet" type="text/css" media="screen" />
<!--[if IE]>
<link href="<%=ResolveUrl("~/style/IEStyle.css") %>" rel="stylesheet" type="text/css" media="screen" />
<![endif]-->
</head>
<body>
<form id="form1" runat="server">
<div id="wrapper">
<div id="header">
//content for header
</div>
<div id="container">
//content for body
</div>
<div id="footer”>
//content for footer
</div>
</div>
</form>
</body>
</html>
This is the most outer shell that you will need when you start. the rest you'll have to adjust on your IE style sheet as you carry on with your design and your main style. you will see that on a lot of things you will have to add a (normally left) margin to your IE style to get it to align exactly (also as shown on FF and Chrome - that is correct).
Hope this helps.
Unsolved 
