Fixed width menu items - solved

[enegi]

Tryning to use an image as a background to the menu <li> tag but  the image gets clipped to the lingth of the letters.
Using CSS  to set background-image, width and hight of the <li> tag doesnt work.
Using CSS to set background-image, width and hight of the <li><a> tag dosnt work.

I dont want a hover effect but when viewing a page the <li> backgound it shall change (changing the image)

solution

Code Select Expand


<div id="menu">
   <?php show_menu2(
    0,
        SM2_ROOT,
        SM2_CURR+1,
        SM2_TRIM,
        '[li][ac]<div class="menumover">[menu_title]</div></a>',
        '</li>',
        '[ul]',
        '</ul>',
        false,
        false
    ); ?>
</div>


Code Select Expand


/*.........MENY..........*/
#menu
{
   position: absolute;
   top: 124px;
   left: 44px;
   width: 900px;
   height: 24px;
   text-align: left;
}
#menu UL
{
   margin: 0px;
   padding: 0px;
   list-style-type: none;
}
#menu UL LI
{
   display: inline;
}
#menu UL LI A
{
   display: inline-block;
   width: 172px;
   height: 24px;
   background-image: url(meny_inaktiv.gif);
   background-repeat: no-repeat;
   color: #FFFFFF;
   font-size: 10px;
   font-weight: bold;
}
#menu UL LI A.menu-current
{
   background-image: url(meny_aktiv.gif);
}
.menumover
{
   position: relative;
   top: 7px;
   left: 7px;
}



Just so you know..it doesnt validate...darn..