scalable horizontal nav bar

I need some advise on the css for this horizontal nav bar.

I want the bar to be scalable if the user chooses to make the font bigger. What changes would you suggest to my css to allow this bar to scale better? Currently the background image gets messed up when you the user scales the text.

Sample Nav Bar (http://www.projecto3.com/clients/test/testing.html)

CSS:body {
margin: 0;
padding: 0;
text-align: center;
background-color: gray;
}

ul#mainNav {
padding:0px;
list-style-type:none;
background: url(images/common/navTile.gif) repeat;
width: 100%;
float: left;
}

ul#mainNav li {
float: left;
}

ul#mainNav a {
float: left;
display: block;
padding: 0 1.2em;
line-height: 2.2em;
font: small-caps 1.3em Georgia, "Times New Roman", Times, serif;
color: #dee8ed;
text-decoration: none;
}

ul#mainNav a:hover {
background: url(images/common/navOn.gif) no-repeat 0 0;
color: white;

}

#wrapper {
width: 85%;
margin: 0 auto;
text-align: left;
}

What changes would you suggest to my css to allow this bar to scale better? Currently the background image gets messed up when you the user scales the text.
I'm afraid that there may be no good solution to this problem. CSS has its limitations. One cannot create any design that one wants. You may have to alter the design.

You could make the blue gradient image three times as tall, and use it as a bottom-aligned background image to a div surrounding the ul, rather than the ul itself. Then, as the ul expands it would give the impression that the background image is growing to contain it.

Just an idea…I don't know I would go that route, but it should work.

rmedek, wouldn't that cause the horizontal line to no run through the type? Could I make the image 3xs as tall like you suggested but get it to align vertically on center so as the height of the bar changes the horzontal would alway be in the cennter of the text? Would a new background image start if the row breaks and drops to the next line or would the image then just now center on the two rows vs the one and therefore not acomplish what I'm looking for.

Hm, I'm not sure…lemme do all the work for you and see if it helps:

http://littlethinky.com/examples/bigger_links.php

You should play with the image and the positioning to make it suit your needs. Hopefully this will get you started.