Cross Browser Issues

[barrymcgee]

Can anyone tell me why the following site displays fine in IE6 but is an unholy mess in all major browsers (Opera, firefox, Netscape)??

http://www.maddenbrosltd.com/test.html

Here is my CSS

body {
background-color: #0c248c;
}

a:link {color:#0d2474; background-color:inherit; text-decoration: none;}

a:visited {color:gray; background-color:inherit; text-decoration: none;}

a:hover {color: #ffff00; background-color:inherit; text-decoration: none;}

a:active {color: #ffff00; background-color:inherit; text-decoration: none;}

#allcontent {

font-family: Arial, verdana, serif;
font-size: 12px;
line-height: 12pt;
background-color: white;
color: inherit;
margin-left: auto;
margin-right: auto;
width: 800px;
}

#allcontent a:link {color:white; background-color:inherit; text-decoration: none;}

#allcontent a:visited {color:gray; background-color:inherit; text-decoration: none;}

#allcontent a:hover {color: #ffff00; background-color:inherit; text-decoration: none;}

#allcontent a:active {color: #ffff00; background-color:inherit; text-decoration: none;}

#header img {margin-top: 0px;
padding-top: 0px;
}

#nav-menu
{
width:100px;
float: left;
line-height: 2em;
text-align: right;
}

#nav-menu ul
{
list-style: none;
padding: 0px;
margin: 20px;
}

#nav-menu li
{
margin: 0px;
background: url(blue.gif) #fff bottom left repeat-x;
height: 2em;
float: left;
width: 100px;
display: block;
border: 0.1em solid #dcdce9;
color: #0d2474;
text-decoration: none;
padding: 0px 15px 0px 0px
}

#nav-menu li a:link {color:#0d2474; background-color: transparent; text-decoration: none;}

#nav-menu li a:visited {color:#0d2474; background-color: transparent; text-decoration: none;}

#nav-menu li a:hover {color: yellow; background-color: transparent; text-decoration: none; }

#nav-menu li a:active {color: yellow; background-color: transparent; text-decoration: none;}

/* Hide from IE5-Mac \*/
#nav-menu li a
{
float: none
}
/* End hide */

#kites {text-align: center;
}

#kites li
{padding: 5px;
background: none;
display: block;
border: 0px;
text-decoration: none;
line-height: 25pt;}


#foottext{
font-size: 11px;
text-align: center;}

#rightpics {

float: right;
padding: 10pt;
margin: 10px 0px 0px 0px;
display: block;}


#maincontent {
line-height: 20px;
color: #0c248c;
width:440px;
margin-top: 0px;
padding: 20px 10px 0px 5px;
text-align: justify;
margin-bottom: 0px;
}



#footer {
text-align: center;
clear: left;
line-height: normal;
font-family: Arial, verdana, serif;
width: 780px;
margin-top: 2px;
padding: 10px;
font-size:9px;
color: #0c248c;}

#footer a:link {color:#0c248c;}

#footer a:visited {color:gray;}

#footer a:hover {color: #ffff00;}

#footer a:active {color: #ffff00;}

#yell{
width: 800px;
background-color: #ffff00;
color: #ffff00;
margin-bottom: 0pt;}

#copyright {color:white;
font-size: 9px;
background-color: #0c248c;}

[Siddan]

the left floated nav is causing this

try adding left margin to the maincontent to at least 165px

I haven´t checked how it will look for IE but I suppose it will be fine

[barrymcgee]

Gotcha, thanks!