Horizontal nav wraps when FF zooms

HTML & CSS
1

I have a top horizontal menu that wraps when user zooms in (text or regular) in Firefox and Safari (Windows). If you also zoom OUT in both, every other zoom adjustment it also wraps, too.

The way I made this menu was to:

  1. pad my links, both left and right so it spreads to right width
  2. size my text in px not ems or %'s
  3. set width of it’s container div’s
  4. use background images that reposition on rollover; first and last links use rounded-corners images;

Is there a better way to do what I’m trying to do?

thanks,
R

code is here:
#preface {
background-image:none;
min-height:0px;
padding-left:0px;
background-color:#fff;
height:41px;
width:960px;

}
#preface-wrapper {
margin:0 auto;
padding:0;
width:960px;

}
#preface div.block ul {
text-align:center;
width:960px;

}
#preface-wrapper div.block ul li.leaf {
background:none;
padding:0;
height:41px;
display:inline;
float:left;
margin:0 1px 0 0;
border-left:1px solid #E1E1E1;
}
#preface-wrapper a:link, #preface-wrapper a:visited {
color:#00a2ff;
font-family:helvetica, sans-serif;
font-size:15px;
font-weight:bold;
text-decoration:none;
padding:3px 42px 3px;
height:35px;
line-height:2.5;
float:left;
background-image: url(images/blue-top-nav-bg-both-copy.jpg);
background-repeat:repeat-x;
}
#preface-wrapper div.block ul li a:hover {
background-color: transparent;
background-position:0 -59px;
background-repeat:repeat-x;
}
#preface-wrapper div.block ul li.first {
background:none;
padding:0;
height:41px;
display:inline;
float:left;
margin:0 1px 0 0;
border:0px solid #f00;
}
#preface-wrapper ul.menu li.first a:link, #preface ul.menu li.first a:visited {
border-left:0px solid #f00;
padding:3px 43px 3px 43px;
background: transparent;
background-image: url(images/blue-nav-bg-lft-top-both.jpg);
background-repeat: no-repeat;
}
#preface-wrapper ul.menu li.first a:hover {
border-left:0px solid #f00;
background-color:transparent;
background-position:0px -59px;
}
#preface-wrapper ul.menu li.last a:link, #preface ul.menu li.last a:visited {
border-left:none;
padding:3px 43px 3px 43px;
background:transparent;
background-image: url(images/blue-nav-bg-rt-top-both.jpg);
background-repeat:no-repeat;
background-position:right top;
}
#preface-wrapper ul.menu li.last a:hover {
border-left:none;
background-color:transparent;
background-repeat:no-repeat;
background-position:right -59px;
}

2

Hi, well either pick number 1 or 2 in here or prob give your menu a little more breathing room so that it can grow a little without dropping.

3

No I was basically just pointing to the two methods used. Sorry for the confusion. So your options are… One: give it more breathing room in it’s container. Or Two: give the li’s a fixed width and center the links with in them.

4

Yes like this here http://www.visibilityinherit.com/code/sprites.php

5

giving the li’s a fixed width would require that I can style each link in the nav bar separately or else have a different amount of padding around the various links. Since this is a CMS I can’t get into that granular of styling. I can make the first and last link individually stylable and the rest to have a style for width, but not the links not on the ends have separate styles.

I was wondering if my approach was the problem. Could I use just one big bg image that changes position when someone rolls over a link (and changes position for each rolled-over link) as opposed to small bg images for the first link, the last link and the rest of the links?

Thanks for replying.

R

6

so are you saying the centering the whole bar (the links now are centered) will keep it from wrapping? The problem is that it wraps into 2 lines on zoom not that it won’t center. Will just centering the whole bar fix this?

thanks,

R