duplicate background images in asp.net menuitem

Steverino541
Steverino541 used Ask the Experts™
on
I am trying to change the look of the asp.net menu by setting a background image in my stylesheet but in the menu I get duplicate backgrounds like a separate background for the text in that menu item. I have written the following in the stylesheet:

.menuitem
{
      background-image:url(./images/menu_bg.gif);
      width:180px;
      height:25px;
      color:White;
      background-repeat:no-repeat;
}

and the source for the menu looks like this:

<asp:Menu ID="Menu1" runat="server">
                            <LevelMenuItemStyles>
                                <asp:MenuItemStyle BackColor="White" CssClass="menuitem" Font-Underline="False" ItemSpacing="5px" />
                            </LevelMenuItemStyles>
                            <Items>
                                <asp:MenuItem Text="Overview" Value="Overview"></asp:MenuItem>
                                <asp:MenuItem Text="Contacts" Value="Contacts"></asp:MenuItem>
                            </Items>
                        </asp:Menu>

Am I missing something?
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Top Expert 2007

Commented:
try

#Menu1
{
     background-image:url(./images/menu_bg.gif);
     width:180px;
     height:25px;
     color:White;
     background-repeat:no-repeat;
}


or better still.. once your page is rendered.. do a view source and paste the HTML here. we can then track down what level / element needs to be styled.

Author

Commented:
Here is how the colde locks in html:

<tr style="height:2px;">
            <td></td>
      </tr><tr style="height:2px;">
            <td></td>
      </tr><tr onmouseover="Menu_HoverStatic(this)" onmouseout="Menu_Unhover(this)" onkeyup="Menu_Key(this)" id="ctl00_Menu1n2">
            <td><table class="menuitem ctl00_Menu1_6" cellpadding="0" cellspacing="0" border="0" width="100%">
                  <tr>
                        <td style="white-space:nowrap;width:100%;"><a class="ctl00_Menu1_1 menuitem ctl00_Menu1_5" href="javascript:__doPostBack('ctl00$Menu1','Contacts')" style="border-style:none;font-size:1em;">Contacts</a></td>
                  </tr>
            </table></td>
      </tr>
Top Expert 2007
Commented:
ok there look to be multiple classes being applied to elements here:

<table class="menuitem ctl00_Menu1_6" ... is applying .menuitem AND .ctl00_Menu1_6, track this down in your css

also look at <td style="white-space:nowrap;width:100%;"><a class="ctl00_Menu1_1 menuitem ctl00_Menu1_5"  three different classes are being applied here, including .menuitem which might explain the background for the table and the text.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial