Menu
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?
691
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.
129
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
