|
Mfho1 (Programmer) |
26 Jun 12 9:30 |
Hi,
I have a simply horizontal menu.
CODE<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:
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 |
|
Talk To Other Members
Read More Threads Like This One