Solved

duplicate background images in asp.net menuitem

Posted on 2006-10-19
5
1,642 Views
Last Modified: 2007-12-19
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?
0
Comment
Question by:Steverino541
  • 2
5 Comments
 
LVL 30

Expert Comment

by:VirusMinus
ID: 17766212
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.
0
 

Author Comment

by:Steverino541
ID: 17766269
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>
0
 
LVL 30

Accepted Solution

by:
VirusMinus earned 250 total points
ID: 17895076
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.
0

Featured Post

Free Tool: Postgres Monitoring System

A PHP and Perl based system to collect and display usage statistics from PostgreSQL databases.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Creating a CSS block that only applies to printing By default, all of your CSS applies to every possible view of your page - whether on screen, printed, landscape, touch-screen, or whatever.  You can, however, add CSS that only applies under certai…
Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer …
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…

790 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question