• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1202
  • Last Modified:

CSS Menu Breaks with Browser Zoom Less than 100%

Hey All!

I've seen similar questions to this asked on EE, but I can't seem to find a solution for my particular situation. I wondered if a CSS expert could give me some advice. I have a navigation bar that breaks when the zoom of the browser is less than 100%. The last link in my menu falls to the second line. You can see an example here:


Contact falls beneath the menu if the zoom is less than 100%. From what I can tell, this happens in IE8 and Firefox.  Might anyone have any thoughts on this? I'm pasting the CSS for the menu below.

I would appreciate anyone's thoughts!!
#nav-bar {height:27px;width:6px;display:inline;float:right;padding:0;margin:-15px 0 0 0;}
#menu {width:670px; max-width:670px;height:27px;background:url(images/nav-bar-mid.jpg) repeat-x;display:inline;float:right;padding:0;margin:-15px 0 0 0;position:relative;z-index:999;}

#menu ul {margin: 0;padding: 0;list-style: none;float: left;}
#menu ul.menu {padding-left:5px;}

#menu li {position: relative;z-index: 9;margin: 0;padding: 0 15px 0 10px;display: block;float: left;}
#menu li:hover>ul {left: -2px;}

#menu a {position: relative;z-index: 10;height: 27px;display: block;float: left;line-height: 27px;text-decoration: none;font-size:12px;font-weight:bold;font-family:"Trebuchet MS", Arial, sans-serif;}
#menu a:hover, #menu a:hover span { color: #2d2d2d;}
#menu li.current a {}

#menu span {display: block;cursor: pointer;background-repeat: no-repeat;background-position: 95% 0;}
#menu ul ul a.parent span {background-position:95% 8px;background-image: url(images/item-pointer.gif);}
#menu ul ul a.parent:hover span {background-image: url(images/item-pointer-mover.gif);}

/* menu::level1 */
#menu a {padding: 0 12px 0 12px;line-height:28px;color:#fff;}
#menu span {margin-top: -1px;}
#menu li { background: url(images/main-delimiter.png) 98% 0px no-repeat; }
#menu li.arrow { background: url(images/parent-delimiter-trans.png) 100% 0px no-repeat;}
#menu li.last { background: none; }

/* menu::level2 */
#menu ul ul li { background: none;width:100%}
#menu ul ul {position: absolute;top: 26px;padding: 0;margin-top:1px;display:none;}
#menu ul ul a {padding:0;height: auto;float: none;line-height: 11px;color: #2d2d2d;}
#menu ul ul span {margin: 0;color: #2d2d2d;white-space: nowrap;display: block;background: #8f969e;padding:20px 0 0 25px;}
#menu ul ul span.bottom {padding-bottom:20px;}
#menu ul ul a:hover span {color: #fff;}
#menu ul ul li.last { background: none; }

Open in new window

1 Solution
if you change your padding-right for #menu a to 11px it won't do it anymore


azlumiereAuthor Commented:
Hey TiberiuGal,

Thanks so much for the comment. I tried your suggestion (and even tried it in a few different spots), but it didn't seem to affect anything. I put add it to line #10 in the CSS above. Is that what you were thinking?

Have you tried adjusting the width of the #menu. If you put it at 690px you should be ok.  I would personally then just adjust the image or paddings to line it up after that.  But 690 seemed like a good starting point
Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

azlumiereAuthor Commented:
Hi LZ1,

Thank you for your comment. I may need to keep experimenting.... I don't really want to change the width of #menu because it includes a background, so it physically increases the size of the navigation bar, and that's not what I want. What I may have to do is keep tweaking the left and right padding I suppose.

Here is a fix :
line 165
Remove the padding-left for the menu, as it will actually make it more align anyway.

line 183
Then add this to line:

That should sort it, I made those changes and tested and seems ok. Browser zooms are always a pain had the same issue with a menu of mine recently.
azlumiereAuthor Commented:

Thanks so much for taking the time to share your experience. This solution worked the best. When I tested with IE 8 contact still fell below at 75%, but I made a small padding change to the IE8 styles and I think it will work. You're definitely right that browser zooms are the pits!

Thanks again! :)

Featured Post

Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now