Help with using CSS id/class id's within MVC3

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

enter image description here

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) enter image description here

code within the CSS

output from developer toolbar notice how first div layer attributes are detected enter image description here

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

enter image description here

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

This has nothing to do with MVC and relates purely to how your HTML & CSS is rendered. Which {style} do you expect which {element} to inherit? — Petrus Theron
– Petrus Theron, Commented Mar 17, 2011 at 16:02
@FreshCode My intent was to assign a css style to each div layer. div tag with resultsContainer should inherit the resultContainer style, the resultContext div should inherit the resultContext style and the resultsImage div should inherit the resultImage sytle — rlcrews
– rlcrews, Commented Mar 17, 2011 at 16:53

David Fox · Accepted Answer · 2011-03-16 20:49:41Z

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 :)

answered Mar 16, 2011 at 20:49

David Fox

10.8k9 gold badges53 silver badges80 bronze badges

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

2 Comments

rlcrews Over a year ago

The css is declared in the _Layouts.cshtml page. I'm not using master pages since I am using the razor view engine. Are you saying I need to declare the CSS file again within the view even though I have it declared in the _Layouts page? All other CSS styles are being picked up from the default CSS. What is where is if you look at teh Divs as nodes the root note (wrapper) gets the styles applied. Every div inside the root Div gets skipped / no style is applied. And finally there are no typos.

rlcrews Over a year ago

I'll be happy to repost the code but the format was identical to above except instead of using style= I used class="cssName" the attributes you see in teh span tags were copied from the CSS file and pasted inline which then worked.

ten5peed · Accepted Answer · 2011-03-17 15:59:09Z

0

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.

answered Mar 17, 2011 at 15:59

ten5peed

15.9k3 gold badges62 silver badges74 bronze badges

Comments

David Fox · Accepted Answer · 2011-03-17 19:14:29Z

0

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.

edited Mar 17, 2011 at 19:14

David Fox

10.8k9 gold badges53 silver badges80 bronze badges

answered Mar 17, 2011 at 18:45

rlcrews

3,57221 gold badges73 silver badges121 bronze badges

2 Comments

David Fox Over a year ago

Most browsers have a keyboard shortcut for this. In Firefox, Chrome and IE its Ctrl+F5, Safari is Ctrl+r and Opera might be Ctrl+F5 too, but definitely keep those handy when you're working in separate CSS or javascript files

rlcrews Over a year ago

@David Thanks for the tip! I will burn these to memory for sure.

Collectives™ on Stack Overflow

Help with using CSS id/class id's within MVC3

3 Answers 3

2 Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related