Forum Moderators: not2easy
I have created a test file to replicate the problem:
[
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test file</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
body {
margin-bottom: 0px;
margin-top:0px;
margin-left:auto;
margin-right:auto;
width:682px;
padding: 0px;
font-size:62.5%;
}
.holder{ width:680px; background: #000721; border-left: 1px solid #fff; border-right: 1px solid #fff; border-bottom: 1px solid #fff; min-height:30em}
.top-section-home{width:680px; height:5em;}
ul {
list-style: none;
margin-top:-1px;
margin-left:0px;
}
li {
float: left;
width: 12em;
text-align: left;
cursor: default;
background-color: #000721;
border-right: 1px solid #fff;
border-bottom: 1px solid #fff;
}
li#first {
padding-left:1em;
padding-top:0.5em;
padding-bottom:0.5em;
}
li ul {
display: none;
font-weight: normal;
background:#000721;
padding-left: 0em ;
padding-right:0em;
padding-bottom:0em;
padding-top:0em;
}
li ul {
top: auto;
left: auto;
}
li li {
display: block;
float: none;
background-color: transparent;
border: 0;
}
li:hover ul, li.over ul {
display: block;
}
.dotted { height:1px; border-bottom: 1px dotted #fff; margin-top:0em; margin-bottom:0.5em; margin-right:10px;}
</style>
</head>
<body>
<div class="holder">
<ul id="nav">
<li id="first">
<div><a class="button-4" href="">PORT</a></div>
<ul>
<li><div class="dotted"></div></li>
<li><a class="button-4" href="about_us.htm">ABOUT US</a></li>
<li><div class="dotted"></div></li>
<li><a class="button-4" href="private_charter.htm">PRIVATE CHARTER</a></li>
<li><a class="button-5" href="river_to_restaurant.htm">River to Restaurant</a></li>
<li><a class="button-5" href="champagne_and_canape.htm">Champagne &
Canapé</a></li>
<li><div class="dotted"></div></li>
<li><a class="button-4" href="o2.htm">O2 VIP TRANSFERS</a></li>
<li><div class="dotted"></div></li>
<li><a class="button-4" href="river_map.htm">RIVER MAP</a></li>
<li><div class="dotted"></div></li>
<li><a class="button-4" href="contact.htm">CONTACT</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
]
Can anyone see what the problem is?
Thanks in advance.
Which IE version?
And, why XHTML? You'd be better off sticking with HTML 4.01
You could try using absolute positioning:
ul li
{
position:absolute;
top:0px;
}
However, this may not work properly as you have nested your ULs. I would suggest using a div as your outer nav container and using a separate UL for each line - which is what it looks like your doing.
Tell me if it works!
[
ul {
list-style: none;
margin-top:-1px;
margin-left:0px;
}
]
It needed to be changed to:
[
ul {
list-style: none;
margin:0px;
padding:0px;
}
]
