MikeTheVike
03-25-2008, 04:27 PM
Never really used dropdowns before and I'm trying to add one to an existing website. I stripped out all the html and css not related to this problem, and have posted it below. Problem is the drop down list isn't overlapping the div below it in IE...works fine in other browsers...I've tried various clear statements but its still a no go in IE 6...thanks for any help
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<link href="dropdown_test.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wholecontainer">
<div id="headercontainer">
<div id="navbar">
<ul id="nav">
<li class="navbutton1"><a href="whoweare.html">Who We Are</a>
<ul class="dropdown">
<li>About Us</li>
<li>Meet The Departments</li>
<li>Testimonials</li>
<li>News</li>
<li>Contact Us</li>
</ul>
</li>
<li class="navbutton2"><a href="whatwedo.html">What We Do</a>
</li>
</ul>
</div>
<div class="header_welcome"></div>
</div>
</div>
</body>
</html>
/* CSS Document */
form, p, ul, li, dl, dt, dd, body, h1, h2, h3, h4, h5, h6 {
margin: 0; padding: 0;
}
#wholecontainer {
width: 742px;
margin-right: auto;
margin-left: auto;
margin-top: 8px;
}
#headercontainer {
height: 246px;
width: 742px;
}
/* Begin Navigation bar */
#navbar {
width: 636px;
height: 32px;
float: left;
padding: 0px;
border: none;
}
#navbar a {
color: #FFFFFF;
}
#navbar a:hover {
color: #CCCCCC;
}
.navbutton1, .navbutton1 a {
float: left;
margin: 0px;
height: 32px;
width: 144px;
display: block;
background-color: green;
}
.navbutton1 a:hover {
height: 32px;
width: 144px;
}
.navbutton2, .navbutton2 a {
float: left;
margin: 0px;
height: 32px;
width: 141px;
display: block;
background-color: green;
}
.navbutton2 a:hover {
height: 32px;
width: 141px;
}
/****************************start dropdown css*****************************/
#nav ul {
float: left;
position: relative;
}
#nav li {
list-style-type: none;
}
#nav ul a {
display: block;
width: 144px;
}
#nav ul li {
float: left;
width: 144px;
list-style-type: none;
background-color: red;
}
.dropdown {
float: left;
position: relative;
}
.header_welcome {
float: left;
height: 165px;
width: 636px;
background-color: orange;
}
some screenshots...
http://www.moxiedisplays.com/miketest/images/Picture1.png
http://www.moxiedisplays.com/miketest/images/Picture2.png
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<link href="dropdown_test.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wholecontainer">
<div id="headercontainer">
<div id="navbar">
<ul id="nav">
<li class="navbutton1"><a href="whoweare.html">Who We Are</a>
<ul class="dropdown">
<li>About Us</li>
<li>Meet The Departments</li>
<li>Testimonials</li>
<li>News</li>
<li>Contact Us</li>
</ul>
</li>
<li class="navbutton2"><a href="whatwedo.html">What We Do</a>
</li>
</ul>
</div>
<div class="header_welcome"></div>
</div>
</div>
</body>
</html>
/* CSS Document */
form, p, ul, li, dl, dt, dd, body, h1, h2, h3, h4, h5, h6 {
margin: 0; padding: 0;
}
#wholecontainer {
width: 742px;
margin-right: auto;
margin-left: auto;
margin-top: 8px;
}
#headercontainer {
height: 246px;
width: 742px;
}
/* Begin Navigation bar */
#navbar {
width: 636px;
height: 32px;
float: left;
padding: 0px;
border: none;
}
#navbar a {
color: #FFFFFF;
}
#navbar a:hover {
color: #CCCCCC;
}
.navbutton1, .navbutton1 a {
float: left;
margin: 0px;
height: 32px;
width: 144px;
display: block;
background-color: green;
}
.navbutton1 a:hover {
height: 32px;
width: 144px;
}
.navbutton2, .navbutton2 a {
float: left;
margin: 0px;
height: 32px;
width: 141px;
display: block;
background-color: green;
}
.navbutton2 a:hover {
height: 32px;
width: 141px;
}
/****************************start dropdown css*****************************/
#nav ul {
float: left;
position: relative;
}
#nav li {
list-style-type: none;
}
#nav ul a {
display: block;
width: 144px;
}
#nav ul li {
float: left;
width: 144px;
list-style-type: none;
background-color: red;
}
.dropdown {
float: left;
position: relative;
}
.header_welcome {
float: left;
height: 165px;
width: 636px;
background-color: orange;
}
some screenshots...
http://www.moxiedisplays.com/miketest/images/Picture1.png
http://www.moxiedisplays.com/miketest/images/Picture2.png