Did some try and error with the margins. Since IE doesn’t like to play nice we need to adjust the left margins and get it working as intented by Susan..
body {
font-family: "Trebuchet MS", "Bitstream Vera Sans", verdana, lucida, arial, helvetica, sans-serif;
font-size: 80%;
}
/********** Global styles **********/
.cl {
clear:both;
}
p {
margin: 0 0 0 0px;
}
/********** Body **********/
#container {
width: 673px;
margin: 0px auto;
background:#472000;
padding:0px
}
/********** Top **********/
#topleft {
color: #FFFFFF;
width: 208px;
height: 140px;
}
#topleft h2 {
text-align: center;
font-size:2em;
font-weight: normal;
color: #fff;
margin:0;
padding:0px;
margin-bottom:40px;
}
#topleft h3{
text-align:center;
font-style:italic;
}
#topright {
float: right;
height: 140px;
width: 452px;
text-align: right;
background:#fff;
}
#topright h4 {
font-size:2em;
color: #F01E1E;
text-align:center;
}
#gallery {
width: 673px;
height:140px;
border-top:5px solid #fff;
border-bottom:5px solid #fff;
}
#gallery img{
margin:0;
padding:0;
border:0;
}
/********** Body **********/
#content {
width: 452px;
float: right;
background-color: #fff;
}
/********** Menu **********/
#menu {
background: #cf9f25;
border-bottom: 5px solid #FFFFFF;
height:30px;
margin-left:5px;
}
#menu ul{
list-style:none;
padding:0;
margin:0;
}
#menu li{
float:left;
width:33.3%;
text-align:center;
}
#menu li.last a{
border-right:none;
}
#menu a{
display:block;
text-decoration: none;
color: #0f0b03;
padding:8px 15px;
border-right:1px solid #fff;;
}
#menu a:hover {
background: #f1bc35;
color: #fff;
}
#menu li.here a{
background:#f1bc35;
color:#fff;
}
/********** Main Content **********/
#pad {
padding: 12px;
color: #000;
background:#c7b793;
margin-left:5px;
}
#pad h3 {
padding: 4px;
margin: 4px;
font-size: 120%;
font-weight: bold;
color: #FFFFFF;
}
#pad a{
color: #0f0b03;
}
/********** Left Column **********/
#left {
width: 213px;
color: #FFFFFF;
padding: 0px;
}
#left h1 {
padding: 4px;
margin: 4px;
font-size: 120%;
font-weight: bold;
color: #fff;
}
#left #menuBlock ul{
list-style:none;
padding:0;
margin:0;
}
#left #menuBlock a{
display:block;
text-decoration: none;
color: #0f0b03;
padding:8px 15px;
background: #cf9f25;
margin-bottom:2px;
}
#left #menuBlock li ul li a{
padding-left:40px;
}
#left #menuBlock li ul{
display:none;
}
#left #menuBlock li.here ul{
display:block;
}
#left #menuBlock li.here a, #left #menuBlock a:hover{
background: #f1bc35;
color: #fff;
}
#left #menuBlock li.here ul li a{
color: #0f0b03;
background: #cf9f25;
}
#left #menuBlock li.here ul li a:hover{
background: #f1bc35;
color: #fff;
}
/********** Footer **********/
#footer {
background-color: #cf9f25;
padding: 12px;
width: 649px;
color:#000;
font-size: 90%;
text-align: center;
clear:both;
border-top: 5px solid #fff;
}
#footer a{
color:#000;
}
#attrib{
display:none;
}
These were the ones that works for me on IE 6.0 SP2 and FF 1.5.0.1 I don’t have other broswers installed on my box, but please give it a try.
Hope this helps for ppl who have a lot of IE vistors.