Drupal with Zen, advice needed on styling background for active navigation links

[webdi]

Hey,

I would welcome some advice here. I'm developing my first Drupal site and I am using Zen as my starter theme and creating a sub-theme.

I've got my navigation set up in the second (right) sidebar. I would like all of the inactive navigation links to have the same background and the active navigation link to have a different background. It's the active background that I am having trouble with.

The site can be seen here http://tandemlifecoaching.com.

I'm close, but not quite there. I've edited the html-reset.css document with the following.

ul.menu li.leaf a.active-trail {
background-image:url('http://tandemlifecoaching.com/sites/all/themes/zen_custom/images/active-nav.gif');
margin-left:-114px; padding:27px 100px 29px 50px;
}

I'm unable to define a size for my background image behind my navigation text link. I've tried height and width defined by pixels and height and width defined by percent. I've tried background-size, but all browsers aren't playing nicely with that property. The padding that I added is not ideal as this shows the background width dependent upon the size of my actual text link, so the shorter links show less of the button than the longer links. I'm sure there's an easy solution out there, I just haven't found it yet.

I'd welcome any suggestions and thank you in advance for your help!

[Dandello]

Define the height and width of your li element instead.

[webdi]

Define the height and width of your li element instead.

Ah yes, of course! Works perfectly. Thanks for your help. Sometimes after looking at something so long, we don't see clearly!