firefox horizontal list (i.e. menu) height bug

I have a simple test file shown below. Firefox seems to be ignoring padding when calculating the dimensions of the <ul> element which is making it difficult to position accurately. IE draws the border around the <UL> element to included the full size of the contained <LI> elements. Firefox seems to ignore the padding on the <li> elements. If I then use position:absolute to put the menu where I want it Firefox and IE place it in different positions.

Is there a recommended way around this ?


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"> 
<HTML>
<HEAD>
<style>
#homeBanner ul.subMenu{
padding:0;
margin:0;
list-style:none;
border:1px solid red;
height:auto;
}#homeBanner ul.subMenu li{
display:inline;
padding-left:5px;
height:100%;
}
#homeBanner ul.subMenu li a{
text-decoration:none;
font-family:verdana;
background-color:#c8c8c8;
opacity:0.85;
color:white;
font-weight:bold;
font-size:9pt;
padding-left:10px;
padding-right:10px;
padding-top:13px;
padding-bottom:13px;
filter: alpha(opacity = 85);
zoom:1;
}
</style>
</HEAD>
<BODY>
<div id='homeBanner'>
<ul class='subMenu'>
<li><a href='#' >Revenue Assurance</a></li>
<li><a href='#'>Data Validation</a></li>
<li><a href='#'>Workflow Automation</a></li>
<li><a href='#'>Automatic Problem Resolution</a></li>
<li><a href='#'>Parallel Rating</a></li>
<li><a href='#'>Data Migration</a></li>
</ul>
</div>
 </body>
</html>

firefox horizontal list (i.e. menu) height bug

dcoales

swa66

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week