IE6 oddity, looking for workaround

•

What is DaniWeb IT Discussion Community?

You're currently browsing the JavaScript / DHTML / AJAX section within the Web Development category of DaniWeb, a massive community of 401,629 software developers, web developers, Internet marketers, and tech gurus who are all enthusiastic about making contacts, networking, and learning from each other. In fact, there are 3,936 IT professionals currently interacting right now! Registration is free, only takes a minute and lets you enjoy all of the interactive features of the site.

Join our community!

Please support our JavaScript / DHTML / AJAX advertiser: Lunarpages Web Hosting

IE6 oddity, looking for workaround

•

Join Date: Apr 2004

Location: Brownsville or Austin, TX or Faber, VA

Posts: 59

Reputation: world_weapon is an unknown quantity at this point

Rep Power: 5

Solved Threads: 2

world_weapon world_weapon is offline

Offline

Junior Poster in Training

IE6 oddity, looking for workaround

Jan 29th, 2008

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

Help with Code Tags

(Toggle Plain Text)

<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>

<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.

The purpose of my existence is why I am here.

DaniWeb Home > Forums > Web Development > JavaScript / DHTML / AJAX > IE6 oddity, looking for...

IE6 oddity, looking for workaround

IE6 oddity, looking for workaround

IE6 oddity, looking for workaround