Hello everybody, I was just trying to understand why IE 6 displays this horizontal menu offset to the right some. I think it will display properly in IE7, and I know for a fact it shows up the way I want in Mozilla/Firefox. Basically I wanted the menu to be as far to the left in the table as possible and I outlined and filled the background to illustrate the offset space. Firefox shows the menu to the far left like I want, but IE6 refuses to do that, and instead shows if off to the right about the same size as a menu element. If anyone can help me figure out WHY IE6 does this, and better, help me figure out how to work around it without breaking the firefox presentation, I would very much appreciate it. I am listing the code here so it is easy to copy and paste

<html>
<head>
<title>Test</title>
<style type="text/css">
body {padding:0px; background-color:#003050;color:#003050;}
table, tr, td {margin:0px; padding:0px;}
.bodyDIV {width:640px; min-width:640px; margin-top:2px; margin-left:auto; margin-right:auto; padding:1px;}
.middle {margin-left:2%; margin-right:2%; width:96%;}
.push_left {position:relative; left:0px;}
.subtitle {font-size:26px; text-align:center;}
.left {text-align:left;}
.right {text-align:right;}
.center {text-align:center;}
.lined {border:1px solid #000;}
.wide {width:100%; min-width:100%; max-width:100%;}
.hMenu {height:20px; padding: 0px; float: left; border: none; background-color: #7181A5; vertical-align:middle; font: bold 13px Arial; border-top:1px solid #000000; border-left:1px solid #000000; border-bottom:1px solid #000000;}
.hOption {list-style-type:none; display:inline; padding:0px; vertical-align:bottom; text-align:center;}
.hOption a {height:100%; width:80px; border-right:1px solid #000000; float:left; color:white; padding:0px; text-decoration:none; vertical-align:bottom; display:inline; text-align:center;}
.hOption a:hover, .hOption:hover {color: #003050; padding:0px; background-color: #50B3F1; cursor:pointer;}
</style>
</head>
<body>
         <table class="wide push_left lined">
            <tr>
               <td style="background-color:#000;">
            <ul class="hMenu">
               <li class="hOption" title="Manage all content directly"><a href="/admin.htm?content=command">Content</a></li>
               <li class="hOption" title="Manage Criterion Value"><a href="/admin.htm?criteria=command">Criteria</a></li>
               <li class="hOption" title="Manage Question Format"><a href="/admin.htm?question=all">Question</a></li>
               <li class="hOption" title="Manage Form Generation"><a href="/admin.htm?form=all">Form</a></li>
               <li class="hOption" title="Manage Notary Database"><a href="/admin.htm?notary=all">Notary</a></li>
               <li class="hOption" title="Manage User Database"><a href="/admin.htm?user=all">Users</a></li>
               <li class="hOption" title="Manage Geographic Data"><a href="/admin.htm?geo=all">Geo Data</a></li>
            </ul>
               </td>
            </tr>
            <tr>
               <td class="wide">
            <div class="middle subtitle"">Administrative Panel</div>
            <div class="bodyDIV center">Secure, Accurate, Fast</div>
               </td>
            </tr>
         </table>
<body>

Thank you to anyone who takes the time to review or even just copy and paste the code to see what I am talking about. I really hope to resolve this, it is like a splinter in my palm. Hopefully some cross-browsercompliant guru out there can shed some light on this one for me.

Hi
try this:
replace ul tag with div tag and have same class like following:

<div class="hMenu">
               <li class="hOption" title="Manage all content directly"><a href="/admin.htm?content=command">Content</a></li>
               <li class="hOption" title="Manage Criterion Value"><a href="/admin.htm?criteria=command">Criteria</a></li>
               <li class="hOption" title="Manage Question Format"><a href="/admin.htm?question=all">Question</a></li>
               <li class="hOption" title="Manage Form Generation"><a href="/admin.htm?form=all">Form</a></li>
               <li class="hOption" title="Manage Notary Database"><a href="/admin.htm?notary=all">Notary</a></li>
               <li class="hOption" title="Manage User Database"><a href="/admin.htm?user=all">Users</a></li>
               <li class="hOption" title="Manage Geographic Data"><a href="/admin.htm?geo=all">Geo Data</a></li>
            </div>

actually a list starts rendering after leaving some margin. removing this ul solves u'r problem

Hey thanks, I forgot the nature of <ul>. I don't have access to a windows box anymore, seeing how I gave back my cousins laptop after fixing his network driver issues, But if changing the ul to div still renders in FF, then I think it would still do the same for IE6. I suppose that would be the easiest way to do it. I would rather not edit the css for the ul element is it can be changed with css as that would possible change the way that same class in other part of this site would display. Thanks, as soon as I check it out in IE6 this should be solved.

This article has been dead for over six months. Start a new discussion instead.