MVC .NET CSS not picked up by the View

Question

Hello,

I am working on a MVC2 site and am having issues getting my objects on my views to inherit the css classes.

Here is my helper object and CSS that is saved in the Site.css which is linked in the master page.

This also works fine if I put the CSS in a tag on the masterpage.

<%= Html.ListBox("ExpenseItems", (System.Web.Mvc.SelectList)ViewData["ExpenseDefinitions"], new { @class = "optionlist" })%>

.optionlist
{
    width:100px;
    height:100px;
}

Browser HTML:
..
<link href="../Content/Site.css" rel="stylesheet" type="text/css" />
..
<select class="optionlist" id="ExpenseItems" multiple="multiple" name="ExpenseItems">
<option value="1">Test</option>
</select>

Answer 1

when you link your css file that way, and if you are browing in in a page with a url like this http://yoursite.com/MyPage/Content/Article of course the css file will not be found since it goes this way.

css file mapped in `../Content/Sites.css`
Page is `/MyPage/Content/Article` 
css real content is placed in `/Content`
when the parser looks for the css it looks in `/MyPage/Content/Site.css`
which is not where it where it is.

My suggestion is add a base url to your css link

<%
    string baseUrl = "http://" + Request.Url.Host + (Request.Url.Port != 80 ? ":" + Request.Url.Port.ToString() : "");
$>
<link href=<%=baseUrl%>/Content/Site.css rel="stylesheet" type="text/css" />

Don't put " in href of the link tag

Answer 2

Figured it out... Can't apply the style to the list.

Some reason, you need to apply it to a div then apply to the control in CSS.

example:

CSS:
.optionlist select
{
     width:100px;
     height:100px;
}

<div class="optionlist">
... Lisbox
</div>