UL elements are going under each other? [Archive] - HTML Forums

justinram22

03-29-2009, 06:21 PM

Hello, i've been working on this problem for about 3 hours now! Anyway, my problem is that the elements keep sliding under each other, and they have a "list" bubble, any help would be greatly appreciated! It looks ok in IE, but it still has the list bubbles..

ramsey22.webhop.net/centerstage/test.html

Here is my source..

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Center Stage Dance</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta name="generator" content="CoffeeCup Free HTML Editor - www.coffeecup.com">
<meta name="description" content="">
<meta name="keywords" content="">
<style type="text/css">
/*- Menu Tabs D--------------------------- */
#wrap {
width:700px;
margin:0 auto;
}
html
{
height: 100%;
margin-bottom: 0.01em;
background: #C7377D;
}

#body {
background: #FCF3F8;
width: 700px;
height: 100%;
}

#sidnav {
width: 300px;
}

#tabsD {
float:left;
width:100%;
background:#FCF3F8;
font-size:93%;
line-height:normal;
border-bottom:1px solid #F4B7D6;
}
#tabsD ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}
#tabsD li {
display:inline;
margin:0;
padding:0;
}
#tabsD a {
float:left;
background:url("tableftD.gif") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabsD a span {
float:left;
display:block;
background:url("tabrightD.gif") no-repeat right top;
padding:5px 15px 4px 6px;
color:#C7377D;
}
#tabsD a span {float:none;}
#tabsD a:hover span {
color:#C7377D;
}
#tabsD a:hover {
background-position:0% -42px;
}
#tabsD a:hover span {
background-position:100% -42px;
}

#tabsD #current a {
background-position:0% -42px;
}
#tabsD #current a span {
background-position:100% -42px;
}
-->

#menu13 {
width: 200px;
margin: 10px;
list-style: none;
}

#menu13 li a {
height: 32px;
voice-family: "\"}\"";
voice-family: inherit;
height: 24px;
text-decoration: none;
}

#menu13 li a:link, #menu13 li a:visited {
color: #C7377D;
display: block;
background: url(menu13.gif);
padding: 8px 0 0 10px;
}

#menu13 li a:hover, #menu13 li #current {
color: #C7377D;
background: url(menu13.gif) 0 -32px;
padding: 8px 0 0 10px;
}

</style>
</head>

<body>
<div id="wrap">
<img src="top-banner.jpg" />
<div id="tabsD">
<ul>

<li id="current"><a href="#"><span>Home</span></a></li>
<li><a href="#"><span>Classes</span></a></li>
<li><a href="#"><span>Calender</span></a></li>
<li><a href="#"><span>Pictures</span></a></li>
<li><a href="#"><span>Register</span></a></li>
<li><a href="#"><span>Contact Us</span></a></li>

</ul>
</div>
<div id="body">

<div id="sidnav">
<div id="menu13">
<ul>

<li><a href="#">Montgomery</a></li>
<li><a href="#">Lonsdale</a></li>
<li><a href="#">LeSueur</a></li>

</ul>
</div>

</div></div>
</div>
</body>
</html>

Thanks for any help!!!!!