ASP.NET MVC page, CSS (?) problem

Question

I have an ASP.NET MVC site (Master Page + Content pages). On the master page, I have a menu. When some of the options are selected on the menu, it brings you to the appropriate controller and shows the page, which is fine, but it also shows a submenu. The submenu shows just fine, but the issue lies in the menu. I cant get the menu's css to work for me.

Here's the menu code:

<ul id="menuDeveloper">
    <li><%= Html.ActionLink("Home", "Index", "Home", new { area = (String)null }, null)%></li>
    <li id='idcardselect'><%= Html.ActionLink("IDCard", "Index", "IDCardSelect", new { area = "IDCard_Select" }, null)%></li>
    <li><%= Html.ActionLink("Groups", "Index", "GroupSetup", new { area = "Group_Setup" }, null)%></li>
</ul>

Here is the CSS that goes with it:

    ul#menuDeveloper{
  font-family: Arial, Helvetica, sans-serif;
  font-size: 93%;
  float: right;
  background: url("images/bg-menu.gif") no-repeat 50% -9px;
  margin-right: 22px;
  margin-top:  6px;
  height: 46px;
  width: 541px;
 }
  ul#menuDeveloper li{
   float: left;
   margin-left: 20px;
   margin-top: 10px;
  }
   ul#menuDeveloper li a{
    color: #6192c1;
    padding: 10px 2px 15px 2px;
    text-decoration: none;
    text-transform: uppercase;
    height: 46px;    
   }
    ul#menuDeveloper li a.active{
     background: #e0e0e0;
     color: #1f67a7;
    }
    ul#menuDeveloper li a:hover{
     background: #e0e0e0;
     color: #1f67a7;
    }

    ul#menuDeveloper li.menuidcardactive
    {
     background: #e0e0e0;
     color: #1f67a7;
    }

All of the CSS works just fine, EXCEPT the last part (the .menuidcardactive class). It may be the way I am applying it. Basically, what happens is that the

element does NOT get the style, but the element gets a portion of it (just the background portion, the 'color' does not change). I've tried several methods of changing the class. I just want the

to be "active" while the submenu is shown, so the menu's "connect" and the user understands what the submenu is for.

Here is a sample of what I have tried to change the class for the

:

$("#idcardselect").attr('class', 'menuidcardactive');
$("#idcardselect").addClass('menuidcardactive');
$("#idcardselect").removeClass().addClass('menuidcardactive');

All of these were done inside the $(window).load(function(){}); code block of the index page (of the menu item clicked on, in this case "IDCard").

Any thoughts/solutions would be greatly appreciated.

Thanks!

Sounds like a jquery issue rather than mvc.

UpTheCreek
– UpTheCreek

2010-06-14 14:26:35 +00:00
Commented Jun 14, 2010 at 14:26 — UpTheCreek
– UpTheCreek, Commented Jun 14, 2010 at 14:26

AdmSteck · Accepted Answer · 2010-06-14 14:56:17Z

1

I think the problem lies in your css. Try adding 'a' to the end of the last item so that you are applying that style to the anchor and not the li.

ul#menuDeveloper li.menuidcardactive a

instead of

ul#menuDeveloper li.menuidcardactive

What seems to be happening is that your style is being applied to the li (so your background gets applied) but the text color is getting overridden by

ul#menuDeveloper li a

answered Jun 14, 2010 at 14:56

AdmSteck

1,76115 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

SlackerCoder Over a year ago

Wow. That makes no sense to me, since I WANT the <li> to get the style, but adding the 'a' styles the whole thing exactly like I was expecting. Thanks!

Collectives™ on Stack Overflow

ASP.NET MVC page, CSS (?) problem

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related