I have an image for the background of my nav, and I can't get the image to repeat when the user increases the text size in a brower like firefox. I am using the same image for the footer navigation and it is working perfectly. The big difference that I have between the two, is 1) the top nav has a drop down menu, and the bottom doesn't and 2) the top nav has a height set to it... which is probably causing the problem, I realize, but without it, I you see the color of the navigation and that's it, the image stays tiny and still doesn't repeat. Here is the code for the css
/*-- Nav --*/
#nav{
width: 800px;
height: 30px;
background: url('../images/nav.jpg') repeat-y center;
font-size: 14px;
padding: 0;
margin: 0;
list-style: none;
line-height: 1;
}
#nav ul{
padding-bottom: 3px;
padding-left: 20px;
padding-top: 5px;
text-align: center;
text-decoration: none;
margin: 0px;
}
#nav li{
display: inline;
text-decoration: none;
padding-right: 10px;
}
#nav a:link {
color:#FFFFFF;
text-decoration: none;
}
#nav a:visited {
color:#FFFFFF;
text-decoration: none;
}
#nav a:hover {
color:#999966;
text-decoration: none;
}
#nav a:active {
color:#FFFFFF;
text-decoration: none;
}
#nav { /* all lists */
padding: 0;
margin: 0;
list-style: none;
}
#nav a {
background: #CCCC99;
display: block;
}
#nav li { /* all list items */
float: left;
width: 6em; /* width needed or else Opera goes nuts */
}
#nav li ul { /* second-level lists */
position: absolute;
background: #CCCC99;
width: 6em;
padding-left: 0px;
text-align: center;
left: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
}
#nav li ul a:hover {
background: #FFFFFF;
}
#nav li:hover ul, #nav li.sfhover ul { /* lists nested under hovered list items */
left: auto;
}
The site is http://www.spiritex.net The nav is also having an issue where it's not centering...(to see this in action, you'll have to look at http://www.spiritex.net/test ) If anyone has any ideas, I'd greatly appreciate it.
I haven't looked too hard at
I haven't looked too hard at your code, but (and I may be wrong)
I don't like using px for font-size, I'd rather use ems or %
Why not set the height in ems, that way it will grow as the fonts do?
Good suggestion, and it's
Good suggestion, and it's probably something I should so more often--and though this works a little better, it still doesn't work completely (in other words, the nav words are still coming out of the nav bg.
as you've guessed, you need
as you've guessed, you need to remove the height from #nav. The reason it doesn't work without the height is because the list items are floating and are allowed to 'hang' outside their parent element. Normally I would suggest (after removing the height) to add overflow: hidden to #nav to contain the floats. But that won't work here because it will cut off the subnavigation. Another way to contain the floats is to float the parent itself. I would suggest floating both the #nav and #nav ul to left.
Thank You!! You're a genius!
Thank You!! You're a genius!