I have a strange behavior that in my ASP.NET MVC project when I apply inline styling to html elements - they are not shown in the browser. But if I put the same styling in an external css file using a css class it will work (even putting the css class in a <style> tag on the same page doesn't work.
Example:
NOT Working
<div style="height: 100px; width: 100px; background: red;">
ABC
</div>
NOT Working
<!DOCTYPE html>
<html>
<head>
<style>
.myClass {
height: 100px;
width: 100px;
background: red;
}
</style>
</head>
<body>
<div class="myClass">
ABC
</div>
</body>
</html>
Working
mystyle.css
.myClass {
height: 100px;
width: 100px;
background: red;
}
index.cshtml
<div class="myClass">
ABC
</div>
If I don't use a cshtml file and just load a static html file then all variations work.
Why is that? How do we fix it?
At the end of the day, what truly matters in this case is the code that's sent to the browser, not the backend means that was used to send the code to the browser. If it works when you send it via an html page but it doesn't work when you send it via a cshtml page then something different is being sent to the browser in these two cases.
So the key to understanding the issue is to figure out what's different. Use developer tools to view source on the page sent via the html page, and view source on the page sent via a cshtml page. Compare the html sent in both cases. Given that the sample code is quite small it should be easy to spot the difference. Once you find the difference, you will have a good clue as to what's going on.
Your code sample doesn't contain anything related to MVC, therefore it should be sent "as is" to your browser.
So if it works in a simple .htm file (and it is), it will also work in a .cshtml, unless you forgot to tell us something about "what is not working".
Depending of your browser, you can use F12 or Ctrl U (etc) key to see page source, and check if it matches what you put in your editor.
You can also use Developer tools, or Firebug in Firefox to examine exactly which style is applied to which element.
Also, if your sample is not complete, your MVC website is maybe using some features as a layout page and some default CSS which prevent your inline style to do exactly what you were expecting.
Related
I would like to know why if I run this code into a browser (I just write it into a new local jsp file and run it into a browser):
<style>
.rounded_control {
border-radius: 20px;
background-color: #e00;
color=#e00;
}
</style>
<textarea rows="3" class="rounded_control"></textarea>
The style is correctly applied. But if I run this code on a liferay server JSP page, the style does not apply.
PS: The style is ugly and stupid, this is just for test purpose of course :)
<!DOCTYPE html>
<html>
<head>
<style>
.main {
background-image: url('a.jpg');
}
.main:hover {
background-image: url('b.jpg');
}
</style>
</head>
<body>
<div class="main">
</div>
</body>
</html>
When I load the page, my a.jpg didnt appear at all, hence no hover effect
Is it something wrong with my code?
http://jsfiddle.net/ZH9EL/6/
Nothing is wrong with your code. The first image is being redirected to the main website so you don't have an image being loaded. You will have to host it locally. I used a different image and it works.
No there is nothing wrong with your code, it could work, but I believe it is risky to use 2 images, if 1 is not loading it will not work...
You'd like to use two images but if hover image is taking to long to load or just not loading at all it will not work very well..
You might want to try Alois Mahdal's answer: https://stackoverflow.com/a/19967062/3217130 please read their reply..
Your css should be something like:
<style>
#main {
width: **Yoor-width-in-pixels**.px; height: **Yoor-heigth-in-pixels**px;
background: url('a-b.jpg') no-repeat left top;
}
#main:hover { background-position: -Yoor-negative-width-in-pixelspx 0px }
</style>
This will work and will load normal and hover at the same time so you wont face problems with dns or server delay and other problems that could make pages look ugly if images are not loaded...
Please try Alois Mahdal's answer, this will work for you, if you don't understand how to create this for your images (a-b.jpg and new smaller but better code) then I would like to tell you how to do this with your images and classes and the result you need.. I create sprites with Paint .NET or I use spriteme.org to optimize CSS on running websites you can copy new css and images if you're using spriteme.org they will be created on the fly. There are lot's of ways to create or edit images...
I hope my answer was helpful to you,
Happy coding
I'm trying to put some inline server tags on a page so I can get the right path for an image, using Visual Studio 2012.
I'm doing it like this:
<style type="text/css">
.someclass
{
background-image: url(<%=Url.Content("~/Content/Images/messageIcon.gif")%>);
}
</style>
The problem is that once this is written, the whole style section loses the color formatting withing the VS2012 editor. Is tyhere a different way to do this (or an option in VS2012), so that I won't lose the colors and the indentation?
The reason that visual studio is losing its formating is that you are mixing css and server-side code as below.
<style type="text/css">
.someclass
{
background-image: url(<%=Url.Content("~/Content/Images/messageIcon.gif")%>);
}
</style>
You should separate your css from your code.
Image paths are relative to the location of the css file, so css like below is correct, therefore you do not need use a application path worked out by Url.Content(~)
.someclass
{
background-image: url(../Images/messageIcon.gif);
}
That is a Visual Studio Highlight issue or feature for css styles. Try to use server relative URLs, that are known.
If you need to insert a server-side code into css styles, you can use style attribute in html-markup. For example:
<div class="beautiful-button" style="background-image: url('<%=Url.Content("~/Content/Images/messageIcon.gif")%>')">
...
</div>
If you don't like this code or you need to use it more than one time in different places, the best way would be to create your own server-side control with a public property URL (for example). Finally it will be looked like this:
<asp:MyOwnControl runat="server" class="beautiful-button" URL="~/Content/Images/messageIcon.gif" />
I need to override some <style> elements within my Razor page so I've inserted the styles immediately after the opening code block:
#{
ViewBag.Title = "New Account";
Layout = "~/Views/Shared/_Layout_Form.cshtml";
}
<style type="text/css">
#main
{
height: 400px;
}
</style>
The page renders correctly in the browser but Visual Studio green squiggles at <style> complaining that:
<Validation (XHTML 1.0 Transitional): Element 'style' cannot be nested within element 'style'>
I've doublechecked the master page - no problems highlighted there.
What's Visual Studio expecting at this point? What's the correct way to override styles on a page by page basis? Via jQuery?
The style element cannot be nested under the <body> or child elements of the <body>, instead it should go to the <head> element of the page.
If you try to override the styles like this, they get inserted into the default section of your layout page by #RenderBody(), which I assume is inside the <body> of the layout page, while the default styles still stay in the <head>.
The proper way to override some part of the layout page from the content page would be something along these lines, using Razor sections:
_layout.cshtml
<head>
#if (IsSectionDefined("Style"))
{
#RenderSection("Style");
}
else
{
<style type="text/css">
/* Default styles */
</style>
}
</head>
<body>
#RenderBody()
...
page.cshtml
#{
Layout = "layout.cshtml";
}
#section Style
{
<style type="text/css">
#main
{
height: 400px;
}
</style>
}
<!-- Body content here -->
...
Now if the Style section is defined on the content page, its contents will override the defaults from the layout page.
I suggest you read more on Razor layouts and sections. A nice article on this by ScottGu can be found here.
Regarding Visual Studio markup validation warnings
Visual Studio has a problem when markup that makes up a single page is being split up between different files like this. In most cases there is no way for Visual Studio (or any such IDE for that matter) to know how the different page fragments will be dynamically put together in the end. So usually you can't avoid some of these warnings on a project.
Personally I would ignore the warnings if I know what I'm doing and the resulting pages pass the markup validation (http://validator.w3.org/).
If you really want to hide the warnings, you need to disable the appropriate validation options in Visual Studio. E.g. for HTML in Visual Studio 2012 this can be done in Tools > Options > Text Editor > HTML > Validation.
This appears to be a quirk of using Razor. The validator can't "see" the overall HTML because it's scattered across multiple files using Razor logic to piece it all back together again.
The trick I just figured out is to "hide" the <style> and </style> from the validator. Instead of:
<style>
use:
#MvcHtmlString.Create("<style type\"text/css\">")
And instead of:
</style>
use:
#MvcHtmlString.Create("</style>")
The validator doesn't understand these lines are generating <style> and </style>, so it stops complaining about them.
Make sure you're using a #section XXX around the <style> element where "XXX" is referencing a #RenderSection(name: "XXX", required: false) in a master file that is within the HTML <head> element. This is necessary to make sure the <style> element gets inserted in the <head> element where it belongs.
I've seen this happen on my projects as well. Fortunately, when you run the program, it figures itself out and everything should render as expected.
Due to the separation of content at design time, I believe a few of the warnings from razor pages can be safely ignored.
If the CSS isn't actually being recognized, make sure to add that to the question, but if all you're doing is trying to get a perfect no warnings build, then you might just have to set VS to ignore parser errors such as these.
I think you should be set style in HeadContent
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
<style type="text/css">
.hideGridColumn {
display: none;
}
</style>
</asp:Content>
That good for me.
The style tag should be in the head tag, not in the body tag.
You should make a region in the head tag in your layout, and put the style tag in that region.
If you ViewSource one the page as it appears in the browser have you got
<style type="text/css">
//some other style stuff, then
<style type="text/css">
#main
{
height: 400px;
}
</style>
</style>
As that's what the validator implies.
If the page passes a W3 validation test, just ignore VS. I think it struggles a bit with Razor.
I have a messaging tool within the website I am currently working on. The idea is to have a header div and a details div (display="none") for each message.
Ideally, if javascript enabled, I have just the header showing and when the user clicks on it, the details div slide open.
This is fine but how should I work it if javascript is disabled? I was thinking of expanding all messages if disabled, but I don't want a flicker briefly when the page loads of all images open and, if javascript enabled, they collapse.
I'm using ASP.NET and was thinking of checking javascript status of the browser server side but i found out that it can't be done cleanly.
Any suggestions on how to achieve this?
One option is to place this in your head (after the defined styles):
<noscript>
<style type="text/css">
#mydivid {display: block;}
</style>
</noscript>
EDIT: Ive actually posted a better answer, which works off a correct default state.
Actually, the most semantically correct way that you could do this is to append another stylesheet to the head via javascript containing styles that will be implemented if javascript is enabled.
In your example, you will retain the default display for the elements in question.
Then you will create an additional stylesheet (js-enabled-styles.css for example), and place your display:none within that.
Then, in a script tag in your head you will append an additional stylesheet. Using jquery this would be:
$('head').append('<link rel="stylesheet" href="js-enabled-styles.css" type="text/css" />');
You are right the server can only tell you if the browser has JavaScript, it has no clue if it is enabled or not.
Things you can try is do not use onready or onload, just put the lines at the bottom of your JavaScript to hide the content. You might even want to place it directly after the elements on the page.
<div id="foo">
asdf
</div>
<script type="text/javascript">
jQuery("#foo").css("display","none");
</script>
One side note, sounds like you should be using a definition list instead of two divs. Would make probably more sense to a person using a screen reader.
I believe you're looking for the <noscript> tag.
You could achieve the result you describe in one of several ways, but here's a fairly straightforward one. Define your default style for the divs to be the following:
<style type="text/css">
div.details
{
display: none;
}
</style>
And after this style tag, use a noscript block to override the default (JavaScript enabled) style, as such:
<noscript>
<style type="text/css">
div.details
{
display: block;
}
</style>
</noscript>