帮助在MVC3中使用CSS ID /类ID

Question

Hello all I am trying to work through (learn) MVC3 and I was playing aroudn with formatting my view using CSS. When using html / webforms have been able to use div tags and apply to that div teh approiate css style.

When using MVC adn creating the layout in my view I have found that multiple CSS styles are not being inheritted.

for example: (sorry for the image but razor syntax seemed to fail on the code cut/paste

In the above I had a div tag for certain sections. however when I used the class property

<div class="myfirststyle" >some content</div>

for each of these div tags only the first one would be detected. The remaining div tags seemed to inherit from the main body style. also defined in the main CSS file.

Can anyone point me to some information on how to setup and style div tags within a view using CSS instead of the stylel property as shown in the above image OR is this correct as you cannot directly call CSS styles from a view as they are only recognized by the page layout.cshtml or masterpage?

Thanks in advance

Update : to help troubleshoot what is happening please refer to the following

Code within the view (using razor engine)

code within the CSS

output from developer toolbar notice how first div layer attributes are detected

output from developer toolbar notice now how image div does not have a style applied

What is interesting is that when viewing the source in html you can still see the CSS tags within the DIV tags they are just not being picked up or inherited for some reason after the first node/div tag

Thanks again for any pointers

Answer 1

Definitely not the case. Something else is going on.

Did you include your CSS file in the view or it's master page?

<link href="@Url.Content("~/Content/YourCSS.css")" rel="stylesheet" type="text/css" />

Or manually add the CSS to your view?

<style type="text/css">
    div.myfirststyle { ... }
</style>

If so, have you confirmed the spelling of classes? Typos happen, and we can't see from your image whether or not you added classes to divs. Add some of your code even if you can't format it well enough :)

Answer 2

There is definitely something else funky going on... it has nothing to do with MVC*, it occurs when the browser tries to render it, so the problem must lie with the html & css.

If would recommend validating your HTML and CSS, this will show errors with missing closing tags or anything of the likes that can cause these sorts of errors.

I would recommend using Firefox or Chrome with the Web Developer Toolbar to make html & css validation easier.

*nothing to do with MVC directly... indirectly, sure.

Answer 3

Unfortunantly the error was all on my part. While I did have an error withiin my CSS file regarding the use of the position attribute within my styles. below is the updated style:

.resultController
{
    position:static;
    width:90%;
    border: 1px solid #7C90BE;
    margin:5px;

}

.resultImage
{    
    display:table-cell;
    color:Green;
    height:36px;
    width:36px;
}

.resultContext
{
    display:table-cell;
    padding:3px;
    left:50px;
    color:Red;

}
.resultButtons
{
   top:5px;
}

The larger problem (all my fault) was the browser was not purging teh cache on close. After dumping the cache and reloading the page the styles began to render correctly. Thanks to all for taking the time to look at this and offer your input.