Hey there, I'm currently working on a simple application using ASP.NET MVC. I've made some changes to the default master.css file to customize my styles. However, I'm running into an issue with adding a background-image property to one of my UL->Li->A elements for creating menus. It seems to be displaying correctly in Firefox, but the images aren't showing up at all in Internet Explorer (IE7/8). Any ideas on what could be causing this problem? Thanks!
Here's my CSS code:
#nav-menu ul {
list-style: none;
padding: 0;
margin: 0;
color: White;
}
#nav-menu li {
/*float: left;*/
margin: 0.15em 0.15em;
display: block;
}
#nav-menu li a {
background-image: url('/Images/leftbarlightblue.jpg');
background-repeat: no-repeat;
background-position: bottom;
height: 2em;
line-height: 2em;
width: 12em;
display: block;
text-decoration: none;
text-align: center;
color: white;
}
#nav-menu li a:hover {
background-image: url('./Images/leftbardarkblue.jpg');
background-repeat: no-repeat;
background-position: bottom;
height: 2em;
line-height: 2em;
width: 12em;
display: block;
color: white;
text-decoration: none;
text-align: center;
}
#nav-menu {
width: 15em;
}
XHTML structure:
<div id="menucontainer">
<div id="nav-menu">
<ul>
<li><%= Html.ActionLink("Home", "Index", "Home")%></li>
<li><%= Html.ActionLink("About Us", "About", "Home")%></li>
</ul>
</div>
</div>
I did try using ./Images/... but it still didn't work.
Here's the folder hierarchy:
Solution -> Content Site.css Images logo.jpg leftbarlightblue.jpg -> Controllers -> Models -> Views Home Shared Site.Master