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.
