Horizontal Menu Becomes Distorted with Firefox Window Zoom

[Mfho1]

Hi,

I have a simply horizontal menu.

  <div id="header">
    <div id="date">Wednesday, September 26, 2012</div>
  	<ul id="MenuBar1" class="MenuBarHorizontal">
      <li><a href="#" class="MenuBarItemSubmenu">Paperwork </a>
        <ul>
          <li><a href="#">Catalogs</a></li>
          <li><a href="#">Brochures</a></li>
          <li><a href="#">Specifications</a></li>
        </ul>
      </li>
      <li><a href="#">Downloads</a></li>
      <li><a href="#">Technical Support</a></li>
      <li><a href="#">News</a></li>
    </ul>
  </div>

Now, my top-level menu bar is just "Paperwork | Downloads | Technical Support | News". The submenu doesn't appear until the user hovers over Paperwork.

Here's the problem. The navigation bar looks fine ordinarily until you start zooming the browser.

On Chrome and IE, I zoom the browser pretty big to allow for when users do this.

The header div grows large as it's supposed to, with all of the text still in tact. However, in Firefox, my "Technical Support" does not stay contained in its <li>. The word "Support" wraps around and falls below the container. I just want it to zoom keeping the text in tact.

Here's some of the CSS code:

#header {
	background: #ffc url(_images/logo.gif) no-repeat 0px 0px;
	height: 250px;
	width: 1080px;
}

ul.MenuBarHorizontal
{
	margin: 0;
	padding: 25px 0 0 550px;
	list-style-type: none;
	font-size: 0.8em;
	cursor: default;
	width: 625px;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: normal;
	position: absolute;
	left: -2px;
	top: -1px;
}

ul.MenuBarHorizontal li
{
	margin: 0;
	padding: 0;
	list-style-type: none;
	/* [disabled]font-size: 12px; */
	/* [disabled]position: absolute; */
	cursor: pointer;
	width: 130px;
	border-bottom: 1px #999 solid;
	border-right: 1px #A5CFEF solid;
	float: left;
	/* [disabled]overflow: hidden; */
}

ul.MenuBarHorizontal ul
{
	margin: 0;
	padding: 0;
	list-style-type: none;
	font-size: 100%;
	z-index: 1020;
	cursor: default;
	width: 8.2em;
	position: absolute;
	left: -1000em;
	display: block;
}

ul.MenuBarHorizontal a
{
	display: block;
	cursor: pointer;
	background-color: #EEE;
	padding: 0.5em 0.75em;
	color: #333;
	text-decoration: none;
	height: 15px;
	text-align: center;
}

I didn't paste all of my CSS, because I'm using Spry Widgets in Dreamweaver, but I'm sure this is a CSS issue.

Has anyone run into this before? Any tips on how I can manipulate my code to allow Firefox to zoom properly?




Thanks in advance for your help.
mfho1

 

[Mfho1]

One more note. Is this a universal problem in Firefox? I basically want the page and its elements to get bigger, like it appears in Chrome and IE, but Firefox wraps text, text overlaps other text, etc.

Is there some fix for this?


Thanks in advance for your help.
mfho1

 

[Mfho1]

Hey all,

Think I may have solved my own problem.

Hope this helps someone.

First, make sure your Firefox's Zoom Text Only Feature is turned off. One of the reasons the text was getting distorted was because the containers weren't zooming along with it.

Also, I was still getting a wrap on Technical Support, but I added in a CSS property to my ul.MenuBarHorizontal li:

ul.MenuBarHorizontal li
{
	margin: 0;
	padding: 0;
	list-style-type: none;
	/* [disabled]font-size: 12px; */
	/* [disabled]position: absolute; */
	cursor: pointer;
	width: 150px;
	border-bottom: 1px #999 solid;
	border-right: 1px #A5CFEF solid;
	float: left;
	[b]white-space: nowrap;[/b]
}

HTH.


Thanks in advance for your help.
mfho1