Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations IamaSherpa on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Horizontal Menu 'Error' on Browser Window Zoom

Status
Not open for further replies.

RP1America

Technical User
Aug 17, 2009
221
US
Hey folks!

I have a horizontal navigation menu on a website that is messing up when I zoom in or out on Windows Explorer. Any ideas as to why this is occuring or how to fix it?

See here...
Thanks in advance!
Ryan

Code:
<div id="center">
<div id="navigation">
<ul>
<li><a href="[URL unfurl="true"]http://www.plewdigitaldesign.com/"[/URL] class="white">Home</a></li>
<li><a href="[URL unfurl="true"]http://www.plewdigitaldesign.com/services/"[/URL] class="white">Services</a></li>
<li><a href="[URL unfurl="true"]http://www.plewdigitaldesign.com/portfolio/"[/URL] class="active white">Portfolio</a></li>
<li><a href="[URL unfurl="true"]http://www.plewdigitaldesign.com/aboutus/"[/URL] class="white">About Us</a></li>
<li><a href="[URL unfurl="true"]http://www.plewdigitaldesign.com/contact/"[/URL] class="white">Contact</a></li>
</ul>
</div>
</div>

Code:
#navigation {
 float: left;
 width: 900px;
 padding: 15px;
 border: 0px;
 height: 49px;
 background-image:url('images/bg_navbar.jpg');
 background-repeat:no-repeat;
 margin: 0px 0px 5px 0px;
 background-color:#000000;
}
#center {
 text-align: center;
}
#navigation ul {
 padding: 0 1px 1px;
 margin-left: 0;
 font-family: Tahoma, Geneva, sans-serif;
 font-weight: bold;
 font-size: 16px;
}
#navigation ul li {
 list-style: none;
 margin: 0;
 display: inline;
}
#navigation ul li a:link { 
 padding: .2em 2em;
 
It's really hard to say. IE's zoom feature is not foolproof, so it is possible that there's nothing you can do. I would try and not mix pixels and ems in the font size and padding and would go with ems only. You can also try and go with px only, but generally ems are more accessible. Other than that, I don't think there's anything in your code that could cause IE to misbehave.

[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]
 
I have a horizontal navigation menu on a website that is messing up when I zoom in or out on Windows Explorer

Assuming you mean Internet Explorer and not Windows Explorer (the former being a web browser and the latter being primarily a file management tool), perhaps you could describe what you mean by "messing up".

I've looked in both IE6 and IE8, and the horizontal nav looks fine at all zoom levels and text sizes.

Perhaps you can also say what version of IE you are using.

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:
Code Couch Snippets & Info:
The Out Atheism Campaign
 
Vragabond, this sounds like it may actually help the situation. And if it doesn't, at least it would be better to be consistant. Thanks!

BillyRay, yes, of course I mean IE...sorry for the brain-fart. And I apologize for not initially stating that I was viewing on IE7. I too checked IE8 and found there to not be a problem with the zoom. As far as messing up, the 5 links would basically jump around to various locations within the nav menu at each different zoom level on IE7.

I am going to correct my em vs. px code to see if that helps.

Thank you both for your time and help!!
Ryan
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top