Element rendering differently in Firefox than IE6

[Daniel Klann]

Hello all,

I have been playing around with a new look for my website and am coming close to getting a design I like. My test page looks exactly as I want it to in IE6, but not in Firefox (version 0.9.1). I've attached an image showing IE6 on top and Firefox underneath. Firefox seems to be completely ignoring the #content DIV (i.e. it's not centreing it or giving it a border or background colour). Can anyone give me a hint as to what I'm doing wrong?

Thanks,
Daniel

The page is here : www.danielklann.com/testnew.htm (http://www.danielklann.com/testnew.htm)


The CSS I'm using is:-


body {
font-family:verdana,sans-serif;
background-color:#ccccff;
}

#header {
width:750px;
margin-left:auto;
margin-right:auto;
}


#navigation {
font-size:1em;
width:750px;
margin-left:auto;
margin-right:auto;
text-align:center;
}

#navigation ul {
list-style:none;
display:inline;
}

#navigation ul li {
display:inline;
font-size:0.9em;
width:123px;
float:left;
border:1px solid rgb(105,135,250);
padding:1px 0 2px 0;
}

#navigation ul li a:hover {
background-color:#ddd;
display:block;
}
h1 {
font-size:1.4em;
}


#content {
width:740px;
margin-left:auto;
margin-right:auto;
margin-top:3px;
background-color:white;
padding:5px 5px 5px 5px;
font-size:0.8em;
border: 1px solid rgb(105,135,250);
background-color:#ddf;
}

[Daniel Klann]

Please disregard this thread. I don't know what I did but the page is now working as expected in Firefox.

I could not delete the thread.

Regards,
Daniel