Advice on dotted lines

[sw9]

If you go to this site, take a look at the hover menus when you roll over 'About Us'. http://dev.vtfeed.org/

 

That current setup is using the CSS dotted border option, but the dots just don't look that great. I'm also finding I have to set a specific width for each of the li's if I want the dotted box to appear uniform when I roll over something.

 

The only other way I can think of to do this would be to do a background image for each separate menu that's the correct width and then a few pixels high repeating. But this isn't that great either if I decide to change the text on any of the menu items.

 

What I'm asking is, is there any way to get around set widths for these dotted borders if the menu items are not uniform in width but instead are using padding? For example, in order for the 'Tools & Resources' hover to appear dotted all around, I had to set

 

li.244 ul {width: 185px;}

 

And if I didn't do it like this I think I'd have to have a 185px repeating bg image to go behind it. Is there no way to dynamically achieve what I want here?

[haku]

Not really. If the widths are only being set through the padding, then the width is determined by the amount of content. If the amount of content isn't the same, then the widths will be different. The only way around this is to set a fixed with on the parent and children.

 

 

[sw9]

thanks, just wanted to make sure i wasn't missing some easier way to do this. appreciate the advice.