4 replies [Last post]
amadika
amadika's picture
Offline
Enthusiast
Texas
Last seen: 10 years 30 weeks ago
Texas
Timezone: GMT-6
Joined: 2007-04-16
Posts: 206
Points: 4

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.

@}->-- Amanda

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 1 year 46 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

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?

amadika
amadika's picture
Offline
Enthusiast
Texas
Last seen: 10 years 30 weeks ago
Texas
Timezone: GMT-6
Joined: 2007-04-16
Posts: 206
Points: 4

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. Sad

@}->-- Amanda

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 6 years 29 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

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.

amadika
amadika's picture
Offline
Enthusiast
Texas
Last seen: 10 years 30 weeks ago
Texas
Timezone: GMT-6
Joined: 2007-04-16
Posts: 206
Points: 4

Thank You!! You're a genius!

Thank You!! You're a genius! Smile

@}->-- Amanda