Menu & floating divs broke in IE6 - help!!!

[upcloseandpixel]

Hello.

I'm building a site and it works everywhere fine except ie6. Can anyone point me in the direction of how to fix the menu and the floating divs without breaking it in other browsers?

The pages in question initially are:

http://www.locofoco-ok.com/proofing/rss/newsite/abouta2b/teachers.html
http://www.locofoco-ok.com/proofing/rss/newsite/abouta2b/teachers.html

My CSS is below. Cheerz very very much! :confused:

html, body, #container
{
background-color:#FFFFFF;
color:#000000;
font-family:Arial, Helvetica, sans-serif;
font-size:10px;
}


html>body, html>body #container
{height: auto; /*this undoes the IE hack, hiding it from IE using the child selector*/ }

h1{
font-size:2em;
color:#FFFFFF;
background-color:inherit;
padding:0px;
margin:0px;
}

h2{
font-size:1.3em;
color:#FFFFFF;
background-color:inherit;
padding:0px;
margin:0px;
font-weight:bold;
}

p{
font-size:1.2em;
color:#FFFFFF;
background-color:inherit;
padding:0px;
margin:0px;
}

a:link {color: #FF0000; background-color:inherit; text-decoration:none;}
a:visited {color:#FF0000; background-color:inherit; text-decoration:none;}
a:hover {color:#FF0000; background-color:inherit; text-decoration:underline;}
a:active {color:#FF0000; background-color:inherit; text-decoration:underline;}


ul{
color:#FFFFFF;
background-color:inherit;
padding: 0px 0px 0px 20px;
margin:10px;
}

li{
color:#FFFFFF;
background-color:inherit;
padding: 5px 0px 5px 0px;
font-size:1.2em;
}



#container{
position: relative;
margin: 0px auto;
width: 800px;
background-color:#999999;
padding:0px;
}


#header{
height:42px;
background-color:#BFBFBF;
position: relative;
padding:0px;
z-index:50;
}

#h1div{
padding: 50px 0px 15px 50px;
}

#subnav{
padding:0px;
margin:0px 0px 10px 0px;
}

#subnav ul{
display:inline;
list-style:none;
padding:0px;
margin:0px;
}

#subnav li{
padding: 0px 20px 0px 0px;
display:inline;
list-style:none;
margin:0px;
}

.page{
padding: 0px 0px 0px 50px;
margin-bottom:30px;
position:relative;
}

.content{
margin: 0px 350px 0px 0px;
position:relative;
width:400px;
}

.photobox{
width:300px;
float:right;
margin-right:20px;
}

.photobox .widetop{
margin-bottom:10px;
}

.photobox .bottomleft{
margin-right:10px;
}

.photobox .tallleft{
float:left;
margin-right:10px;
}

.photobox .righttop{
margin-bottom:10px;
}

.photobox .right{
float:right;
margin-left:10px;
}

#header img{
position:relative;
left: 7px;
top: 5px;
display: block;
height:34px;
float:left;
}

#map{
clear:both;
}

#footer{
background-color:#BFBFBF;
position: relative;
padding:5px;
}

.footertext{
font-size:0.9em;
color:#333333;
background-color:inherit;
text-align:center;
line-height:140%;

}

/* Home Page Styling */

#topdiv{
min-height:131px;
width:719px;
margin:20px 0px 0px 0px;
background:url(images/bubble_top.gif) #FFFFFF top no-repeat;
}

#topdiv img{
float:right;
position:relative;
top:35px;
right:0px;
}

#maindiv{
height:150px;
width:719px;
margin:0px;
background:url(images/bubble_main.gif) #999999 top no-repeat;
clear:both;
}

#bottomdiv{
width:699px;
background-color:#FFFFFF;
margin:15px 0px 0px 0px;
overflow:visible;
padding:20px 0px 20px 20px;
}


#facesdiv{
position:relative;
float:inherit;
right:55px;
top:-15px;
}


.picnugget{
width:150px;
float:right;
margin: 10px 15px 0px 0px;
position:relative;
padding:0px;
}


.picnugget img{
margin: 0px 0px 10px 0px;
padding:0px;
}

#hometxt{
margin:0px 360px 0px 0px;
}

#clickarrowdiv{
width:290px;
float:left;
color:#FFFFFF;
background-color:inherit;
font-size:1.7em;
margin:40px 0px 0px 20px;
padding:0px;
}

#clickarrowdiv img{
margin-left:10px;
padding:0px;
float:right;
top:-3px;
position:relative;
}

.picfloat{
text-align:center;
margin:20px;
}


<!--
/* ================================================================
This copyright notice must be untouched at all times.

The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menus/dd_valid.html ;Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
This stylesheet and the assocaited (x)html may be modified in any
way to fit your requirements.
=================================================================== */
/* common styling */
.menu {position:absolute; bottom: -5px; right: 10px; width: 500px; margin:0; z-index:100;}
.menu ul li a, .menu ul li a:visited {display:block; text-decoration:none; color:#000; width:100px; padding: 5px 0px 5px 0px; text-align:center; color:#fff; background:#bfbfbf; font-size:1.1em;line-height:100%; overflow:hidden;}
.menu ul {padding:0; margin:0; list-style-type: none;}
.menu ul li {float:left; position:relative; margin:0px; font-size:1.1em;}
.menu ul li ul {display: none;}

/* specific to non IE browsers */
.menu ul li:hover a {color:#666; background:#fff;}
.menu ul li:active a {color:#e63c2c; background:#fff;}
.menu ul li:hover ul {display:block; position:absolute; top:25px; left:0; width:100px;}
.menu ul li:hover ul li a.hide { color:#333; background:#fff; margin:0px;}
.menu ul li:hover ul li:hover a.hide { color:#999; background:#fff;margin:0px;}
.menu ul li:hover ul li ul {display: none;}
.menu ul li:hover ul li a {display:block; color:#999; background:#fff; margin:0px;}
.menu ul li:hover ul li a:hover {color:#333; background:#fff; }
.menu ul li:hover ul li a:active {color:#e63c2c; background:#fff;}
.menu ul li:hover ul li:hover ul {display:block; position:absolute; top:0;}

.menu ul li:hover ul li a.nopadding {padding: 5px 0px 5px 0px; margin:-5px 0px -5px 0px;}
-->


/* Form Styling

#feedbackpage{
padding: 0px 50px 0px 50px;
margin-bottom:30px;
position:relative;
}

.leftform{
width:200px;
padding:10px;
float:left;
}

.rightform{
padding:10px;
margin-left:220px;
}

.bothform{
width:700px;
}

.formanswer{
margin:0px 20px 0px 0px;
float:left;
}

.formblank{
clear:both;
} */

.feedbackpage{
padding: 0px 50px 0px 50px;
margin-bottom:30px;
position:relative;
}

.columnwidth{
width:90px;
text-align:center;
}

.table{
padding:5px;
font-size:1.3em;
color:#FFFFFF;
background-color:inherit;
margin:0px;
width:100%;
}

.disclaimer{
padding:5px;
font-size:0.8em;
color:#FFFFFF;
background-color:inherit;
margin:0px;
line-height:100%;
}

.boxwidth{
width:210px;
}

[koyama]

I'm not sure where you found that menu.

Several things in your code look wrong. As it is now, it would only work in browsers that support the li:hover selector. This is not the case for IE6. Perhaps you have forgotten to add some JavaScript.

It appears that you are using an older version of this menu (http://www.cssplay.co.uk/menus/final_drop.html) by Stu Nicholls. I am not familiar with it, but I suggest you go to that page and try to implement it starting all over again. That would probably be better and easier than trying to fix your current one.