Unordered list menu problem in IE5.5

Hello, my first post so thanks in advance. I'm hoping someone might be able to figure out why my horizontal menu constructed from an unordered list is playing games in IE 5.5 it works fine everywhere else. It's a two tier menu but only the top items appear with a big white gap underneath. I've followed a recommendation I found about removing white space between list items but with no joy
Here is the relevant style sheet code followed by the relevant index page code. Any help would be gratefully received
thanks
Clive
............................................
/* Main settings */
body {
margin:0px;
padding:0px;
font-family:Tahoma, Arial, Helvetica, sans-serif;
text-align: center;
background-color: #FFFFFF;
background-image: url(images/bgnew.jpg);
background-repeat: repeat-x;
background-position: 0px 0px;
}

#main {
width:760px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}

/* Header section */

#main #top {
height:113px;
width:740px;
text-align:right;
font-size:12px;
color:#7D7D7D;
padding:30px 20px 0px 0px;
background-image: url(images/logonew.jpg);
background-repeat: no-repeat;
background-position: 15px 50px;
}
#main #top ul {margin:0px; padding:0px; list-style:none;}
#main #top li {
margin:0px;
padding:0px;
display:inline;
}
#main #top li a {color:#7D7D7D; text-decoration:none; background:transparent url(images/arrow-gray.gif) 6px 5px no-repeat; padding:0px 15px;}
#main #top li a:hover {color:#BA0D17; text-decoration:underline; background:transparent url(images/arrow-red.gif) 6px 5px no-repeat; padding:0px 15px;}

/* Top menu */

#main #mainMenu {
width:760px;
height:77px;
text-align:right;
position:relative;
font-family: Geneva, Arial, Helvetica, sans-serif;
}
#main #mainMenu ul {margin:0px; padding:0px; list-style:none; float:right;}
#main #mainMenu ul li {margin:0px; padding:0px; float:left;}
#main #mainMenu ul li a {
font-size:14px;
color:#F9F9F9;
font-weight:normal;
text-decoration:none;
text-align:center;
background:transparent url(images/bg-tab.jpg) no-repeat;
width:140px;
height:27px;
display:block;
line-height:27px;
overflow:hidden;
text-transform:uppercase;
cursor:pointer;
}
#main #mainMenu ul li a:hover {
background:transparent url(images/bg-tab-over.jpg) no-repeat;
}

#main #mainMenu .sub-menu {padding:15px 0px 15px 0px; width:760px; position: absolute; top:20px; left:0px; text-align:center !important; color:#F9F9F9; }
#main #mainMenu .sub-menu ul {margin:0px; padding:0px; list-style:none; float:none !important;}
#main #mainMenu .sub-menu li {
margin:0px;
padding:0px;
display:inline;
float:none !important;
}
#main #mainMenu .sub-menu a {
background:none !important;
font-weight:normal !important;
width:auto !important;
height:auto !important;
display:inline !important;
text-transform:lowercase !important;
padding:0px 20px 0px 20px;
}
#main #mainMenu .sub-menu a:hover{text-decoration:underline;}

#main #mainMenu .sub-menu {display:none}
#main #mainMenu .active_over .sub-menu {display:block;}
..................................
AND HERE IS THE MAIN PAGE CODE
...............................................
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>Welcome</title>

<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="main">
<div id="top">
<ul>
<li>Ś<a href="contacts.html">Contact</a></li><li>Ś<a href="index.html">Home</a></li>
</ul>
</div>

<div id="mainMenu">
<ul>
<li class="active" onmouseover="this.className='active_over'" onmouseout="this.className='active'">
<a href="index.html">Welcome</a>
<div class="sub-menu">
<ul>
<li><a href="profile.html">profile</a></li><li><a href="news.html">news</a></li>
</ul>
</div>
</li>

<li class="active" onmouseover="this.className='active_over'" onmouseout="this.className='active'">
<a href="servicesmain.html">Services</a>
<div class="sub-menu">
<ul>
<li><a href="weddingservices.html">wedding photography</a></li><li><a href="corporateservices.html">corporate photography</a></li><li><a href="eventsservices.html">event photography</a></li><li><a href="magazineservices.html">magazine photography</a></li>
</ul>
</div>
</li>
<li class="active" onmouseover="this.className='active_over'" onmouseout="this.className='active'">
<a href="trainingmain.html">Training</a>
<div class="sub-menu">
<ul>
<li><a href="cameratraining.html">photography basics and advanced</a></li><li><a href="corporatetraining.html">corporate</a></li><li><a href="softwaretraining.html">post production software</a></li><li><a href="personaltraining.html">personal training</a></li>
</ul>
</div>
</li>
<li class="active" onmouseover="this.className='active_over'" onmouseout="this.className='active'">
<a href="gallerymain.html">Portfolios</a>
<div class="sub-menu">
<ul>
<li><a href="weddinggallery.html">wedding</a></li><li><a href="corporategallery.html">corporate</a></li><li><a href="eventsgallery.html">events</a></li><li><a href="portraituregallery.html">portraits</a></li><li><a href="creativegallery.html">creative</a></li><li><a href="travelgallery.html">travel</a></li>
<li><a href="magazinegallery.html">magazine</a></li>
</ul>
</div>
</li>
<li class="active" onmouseover="this.className='active_over'" onmouseout="this.className='active'">
<a href="resourcesmain.html">Resources</a>
<div class="sub-menu">
<ul>
<li><a href="contacts.html">contact</a></li><li><a href="technicalreviews.html">technical reviews</a></li><li><a href="links.html">links</a></li>
</ul>
</div>
</li>
</ul>

</ul>
</div>

[edited by: encyclo at 2:53 am (utc) on Nov. 25, 2007]
[edit reason] examplified [/edit]

Unordered list menu problem in IE5.5

clivegirdham

encyclo

clivegirdham

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week