I am having trouble showing a background image for a menu control through css and using a master page through default.aspx. Also, using IE7.
1. Folder structure:
~/stylesheet.css
~/default.aspx
~/base.master
~/images/testpic.gif
2. Master Page
1 <html>
2 <head id="Head1" runat="server">
3 <title>master page</title>
4 <link href="~/StyleSheet.css" rel="stylesheet" type="text/css" />
5 </head>
6 <body>
7 <asp:Menu ID="Menu2" runat="server" DataSourceID="XmlDataSource1" Orientation="Horizontal" Width="500px" StaticMenuItemStyle-CssClass="menuItem"
8 DynamicMenuItemStyle-CssClass="menuItem" >
9 ...
10 </asp:Menu>
11 <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
12 </asp:ContentPlaceHolder>
13 </body>
14 </html>
3. default.aspx
blank (just checking the master page)
4. stylesheet.css
.menuItem {
background-image : url("images/testpic.gif");
}
Basically, I can see the image in the design view but when I run it, the background does not show up.
Also if I bring the style from the css into the master page, it works.
1 <html>
2 <head id="Head1" runat="server">
3 <title>master page</title>
4 <style> <<<<<----- Brought the CSS into the master page by replacing the <Style> with <Link>
5 .menuItem
6 {
7 background-image : url("Images/testpic.gif");
8 }
9 </style>
10 </head>
11 <body>
12 <asp:Menu ID="Menu2" runat="server" DataSourceID="XmlDataSource1" Orientation="Horizontal" Width="500px" StaticMenuItemStyle-CssClass="menuItem"
13 DynamicMenuItemStyle-CssClass="menuItem" >
14 ...
15 </asp:Menu>
16 <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
17 </asp:ContentPlaceHolder>
18 </body>
19 </html>
It looks like I can't call the CSS properly somewhere in all this. I would prefer to do it the css way so I'd appreciate some advice. Thanks in advance all.