I'm sure you've heard this before...

[RGL]

But I have an issue between IE and Firefox and how the page is displayed. Can someone please let me know why this is happening?

I removed the header image so you can get the full effect of this problem. In IE the menu shows just fine, even with the web banner in place. In FF the navigation links are hidden behind the banner. Along with that they don't display the same.

Her is the web site: http://www.thewaywardgamers.com/intec/index.php

and here is the CSS


* {
margin: 0;
padding: 0;
}

html, body{
height: 100%;
}

body {
position: relative;
margin: 0px auto;
width: 900px;
height: auto;
text-align: center;
background-color: #ffffff;
font-family: arial, Arial, Helvetica;
background: url(images/background.jpg);
}

#wrapper {
float: left;
clear: both;
width: 100%;
height: 100%;
min-height: 100%;
margin: auto;
margin-top: 0.5em;
width:900px;
text-align: left;
background-color: #ffffff;
}

#header {
float: left;
margin-top: -1em;
margin-bottom: -.1em;
padding-top: 1em;
padding-bottom: -1em;
width: 900px;
}

p {
text-align: justify;
}

.qa {
color: #651533;
font-weight: bold;
}

#nav {
border-top: #651533 1px solid;
border-bottom: #651533 1px solid;
padding-top: 10px;
padding-bottom: 10px;

width: 900px;
background: url(images/active1.jpg);
font-size: 15px;
}

.products {
font-size: 14px;
}

.products a{
color: #651533;
}

.note {
font-size: 18px;
color: red;
}

.articles {
font-size: 18px;
color: #651533;
}

.quote {
font-size: 14px;
font-style: italic;
color: #651533;
}

.quotename {
font-size: 10px;
font-style: italic;
}

td{
font-size: 12px;
}

ul {
padding-right: 0px;
padding-left: 0px;
padding-bottom: 0px;
padding-top: 0px;
margin: 0px;
list-style-type: none;
}

#nav a {
font-weight: bold;
color: #ffffff;
}

#nav a {
text-decoration: underline;
}

#nav li li a {
padding-right: 5px;
display: block;
padding-left: 5px;
font-size: 11px;
padding-bottom: 0.5em;
color: #ffffff;
background: url(images/active1.jpg);
padding-top: 0.5em;
}

#nav li li a:hover {
border-right: #651533 5px solid;
padding-right: 5px;
border-top: #651533 0px solid;
padding-left: 5px;
padding-bottom: 0.5em;
border-left: #651533 5px solid;
padding-top: 0.5em;
border-bottom: #651533 0px solid;
background-color: #ffffff;
}

li {
float: left;
width: 8em;
cursor: default;
position: relative;
text-align: center;
}

li #first {
border-left-width: 1em;
}

li #last {
border-right-width: 1em;
}

li ul {
padding-right: 0px;
display: none;
padding-left: 0px;
font-weight: normal;
background-color: #ffffff;
left: 0px;
padding-bottom: 0em;
padding-top: 0em;
position: absolute;
top: 100%;
}

unknown {
left: auto;
top: auto;
}

li li {
border-top-width: 0px;
display: block;
border-left-width: 0px;
float: none;
border-bottom-width: 0px;
border-right-width: 0px;
}

li:hover ul {
display: block;
background-color: #ffffff;
}

li.over ul {
display: block;
background-color: #ffffff;
}

#left {
float:left;
height: auto;
width: 175px;
margin-right: 20px;
margin-left: 20px;
margin-top: 30px;
margin-bottom: 30px;
border-right: #651533 2px solid;
padding-right: 15px;
font-size: 12px;
}

#left a {
color: #651533;
font-size: 14px;
text-decoration: none;
}

#left a:hover {
color: #c0c0c0;
}

#left b {
font-size: 16px;
}

#content {
float: left;
height: auto;
width: 600px;
text-align: left;
margin-top: 30px;
margin-bottom: 30px;
font-size: 16px;
}

#content a {
color: #651533;
font-size: 16px;
text-decoration: none;
}

#content a:hover {
color: #c0c0c0;
}

#content b {
font-size: 16px;
}

#footer {
background: #651533;
margin-top: 15px;
float: left;
width: 900px;
clear: both;
bottom: 0px !important;
bottom: -1px; /* For Certain IE widths */
height: 30px;
background: url(images/block.gif) center center repeat-x;
}

.footer {
font-size: 12px;
color: #ffffff;
line-height:2.5em;
}

.footer a {
color: #ffffff;
font-size: 12px;
text-decoration: none;
}

.footer a:hover {
color: #c0c0c0;
}

img {
border: none;
}

img.left {
float: left;
margin: 5px 20px 0 0;
}

img.right {
float: right;
margin: 5px 0 0 20px;
}

[WebJoel]

"page not found" error. The CSS by itself, doesn't help. :) check your URL

[RGL]

Thanks. I actually got it. All I needed to do was add float: left;. As for the link I had the page loaded on my host to test. Once I fixed it I took it down and moved it to the proper host.

Thanks for replying though.