[RESOLVED]Menu not seeing CSS picture?

Hi,

I am tring to apply a image to a menu but for some reason it is not being applied? I am runnign visual studio 2010. Any ideas what I am missing?

.Menu
{
 
}

.Menu ul
{
    background:#7795BD;
}

.Menu ul li
{
    background:#7795BD url(~/images/menu_bg.gif) repeat-x;
    text-align:center;
    /* set width if needed.*/
    width:200px;
}

.Menu ul li a
{
    color: black;
    padding: 4px 2px 4px;
    padding-left:8px !important;
    border:1px solid #648ABD;
    border-bottom: 0;
}

.Menu ul li a:hover
{
    background-image: none;
}

.Menu ul li a:hover
{
    color: White;
}

.Menu ul li a
{
    color: Black;
}



 <asp:Menu ID="Menu1" runat="server" Orientation="Horizontal" CssClass="menu"
                  DataSourceID="SiteMapDataSource1">

        <Items>
            <asp:MenuItem NavigateUrl="#" Text="New Item" Value="New Item">
                <asp:MenuItem NavigateUrl="#" Text="New Item" Value="New Item"></asp:MenuItem>
                <asp:MenuItem NavigateUrl="#" Text="New Item New Item" Value="New Item"></asp:MenuItem>
                <asp:MenuItem NavigateUrl="#" Text="New Item" Value="New Item"></asp:MenuItem>
            </asp:MenuItem>
            <asp:MenuItem NavigateUrl="#" Text="New Item New Item" Value="New Item">
                <asp:MenuItem NavigateUrl="#" Text="New Item" Value="New Item"></asp:MenuItem>
                <asp:MenuItem NavigateUrl="#" Text="New Item" Value="New Item"></asp:MenuItem>
                <asp:MenuItem NavigateUrl="#" Text="New Item" Value="New Item">
                    <asp:MenuItem NavigateUrl="#" Text="New Item" Value="New Item"></asp:MenuItem>
                </asp:MenuItem>
            </asp:MenuItem>
            <asp:MenuItem NavigateUrl="#" Text="New Item" Value="New Item">
                <asp:MenuItem NavigateUrl="#" Text="New Item" Value="New Item"></asp:MenuItem>
            </asp:MenuItem>
            <asp:MenuItem NavigateUrl="#" Text="New Item" Value="New Item">
                <asp:MenuItem NavigateUrl="#" Text="New Item" Value="New Item"></asp:MenuItem>
            </asp:MenuItem>
        </Items>

    </asp:Menu>

Hi,

~  in the  url(~/images/menu_bg.gif)  may not work from CSS.

try using  ../   or without it depending on the relativeness of the images folder from the current page/file.

I tried both ways it is still not applying the style. I spent 2 days on this, do you think this is a visual studio bug?

try this

background:#7795BD url(/images/menu_bg.gif) repeat-x;

its not the visual studio bug. it’s something definately wrong with your image path

background:#7795BD url(~/images/menu_bg.gif) repeat-x;

try
images/menu_bg.gif
or
../images/menu_bg.gif
or
../../images/menu_bg.gif

Ya, I am actually working with the time tracker starter kit and the tabs are not working. If I just point to a defferent gif it works but not the tab_dim.gif included with the starter kit and they are in the same images directory. stumped

Ok I figured out that the webconfig had permission set on the images folder which I did not have in my project. Thanks again

Leave a Reply