•
•
•
•
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 375,195 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 2,150 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.
Please support our JavaScript / DHTML / AJAX advertiser: Lunarpages Web Hosting
Views: 834 | Replies: 2
 |
•
•
Join Date: Apr 2004
Location: Brownsville or Austin, TX or Faber, VA
Posts: 59
Reputation: 
Rep Power: 5
Solved Threads: 2
Junior Poster in Training
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
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.
<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> The purpose of my existence is why I am here.
•
•
Join Date: Jan 2008
Location: Bangalore, India
Posts: 327
Reputation:
Rep Power: 0
Solved Threads: 31
Posting Whiz
Hi
try this:
replace ul tag with div tag and have same class like following:
actually a list starts rendering after leaving some margin. removing this ul solves u'r problem
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
A computer lets you make more mistakes faster than any invention in human history - with the possible exceptions of handguns and tequila.
~Mitch Ratcliffe
~Mitch Ratcliffe
•
•
Join Date: Apr 2004
Location: Brownsville or Austin, TX or Faber, VA
Posts: 59
Reputation:
Rep Power: 5
Solved Threads: 2
Junior Poster in Training
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.
The purpose of my existence is why I am here.
|
•
•
•
•
Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
•
•
•
•
•
•
•
•
DaniWeb JavaScript / DHTML / AJAX Marketplace
Linear Mode
•
•
•
•
ajax asp cross-browser javascript menu with few lines of code developer development firefox home html internet javascript javascript smooth scrolling scroll smoothly window document position javascript tab menu with rounded corners generator microsoft msdn office prevent javascript menu from getting hidden under flash movies site software sql vista web
- Previous Thread: Assign count output to a variable!
- Next Thread: smooth scrolling script needed
