Press Ctrl / CMD + C to copy this to your clipboard.
This post will be reported to the moderators as potential spam to be looked at
I have a Products.cshtml that was created in the backoffice. I created a partial called ProductsFilter.cshtml in Visual Studio and it is in Products.cshtml like so:
I noticed most of Products.cshtml gets css styles applied to it correctly from the Master Layout, but the Partial does not. When I html source of the rendered page, I can see the stylesheet link at the top, so it is really confusing as to why it is not getting the styes.
Did you try to look via chrome dev tool or firebug network panel?
Does your page download css file successfully ?
Maybe problem with relative path to css files ?
When I view chrome developer tools, it is loading everything correctly including the stylesheet. In the html souce code, the css link is at top like this:
<link rel="stylesheet" href="/css/compiled-styles.css">
If the elements are on the /products page, everything gets styled properly, but the partial does not. Here is the folder structure of my views and partials:
My css is located at /css/compiled-styles.css
In my razor view for Products.cshtml, doing this, which I thought would solve the problem, but it is not:
<link rel="stylesheet" href="@Url.Content("~/css/compiled-styles.css")">
It should be browser's problem, if everything ok with source code of the page.
I actually found the solution and it was very easy, but difficult to spot. The culprit was a - character. Instead of the having a class vehicle-filter-group on a form, it should have been vehicle-filter group. Notice no - between filter and group.
So the moral of the story is to always quadruple check your css even if it looks right. The smallest things always cause the biggest headaches.
Yes, Saied, css is hard to debug, so using chrome dev tools or firebug is necessarily.
Yes, Thanks for pointing me in the right direction.
is working on a reply...
Write your reply to:
Image will be uploaded when post is submitted