CSS #Styles.Render not rendering stylesheet - html

I've applied a css stylesheet to my view and it is not rendering when I view it. What's the problem here:
Edit: Works in Firefox 17, does not work in IE10 (something to do with my compatibility view? Not sure how to fix)
Master:
#using System.Web.Optimization
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>User_Master</title>
#Styles.Render("~/Content/Styles.css")
</head>
<body>
<header>
<p>header</p>
</header>
<nav>
#Html.Partial("~/Views/Shared/User_Nav.cshtml")
</nav>
<section>
#RenderBody()
</section>
</body>
</html>
Styles.css
header {
border-color: #0094ff;
border-bottom-right-radius:10px;
border-top:hidden;
border-left:hidden;
border-bottom:solid;
border-right:solid;
box-shadow:2px 2px;
}
Home
#{
ViewBag.Title = "Home";
Layout = "~/Views/Shared/User_Master.cshtml";
}
<h2>Home</h2>

There seem to be two parts to the problem.
CSS
One part of the problem is related to invalid CSS. For example, border-top is the shorthand declaration for a combination of style, width and colour:
border-top: [width style colour]
With this in mind, I would change your CSS as follows:
header
{
border: 2px solid #0094ff; /* width style colour */
border-bottom-right-radius: 10px;
border-top-style: hidden;
border-left-style: hidden;
box-shadow: 2px 2px 0px #000; /* x-offset y-offset blur colour */
}
IE / Compatibility Mode
If IE is coming through in compatibility mode, you're probably rendering using the IE8 (or older) engine. Unfortunately these do not understand HTML5, so things like the <header /> elements and border-radius and box-shadow CSS declarations are ignored. There are a couple of things you can try to fix this:
Add <meta http-equiv="x-ua-compatible" content="IE=edge,chrome=1" /> to your <head /> element. This will tell IE that you want to use the latest rendering engine. See this page for more information on this.
Include a JavaScript library like HTML5Shiv (which is also included in the excellent Modernizr library as well). This allows older versions of Internet Explorer to at least recognise HTML5 elements like <header />. Be aware that it won't add CSS3 support though; things like border-radius will not work, but at least you'll get normal borders.

Related

Transition starting on page load for some reason

Update: when I put the CSS internally, the problem goes away. I went in the dev tools on my chrome and compared what was happening when I reloaded the page. First image is with internal CSS, the second one is with external stylesheet, you can see different results for the background-color property:
Initial post: I have no idea why this is happening, here's a demonstration. Basically, the a takes some time to appear fully on the page.
The time it takes to 'fully' appear is the same duration specified in transition: background 5s; as in 5 seconds.
Here's the same code on another page where the effect is not observed, I also opened it in the same browser.
Here's my code in Visual Studio and in Chrome, the same behavior is observed in Edge but not in Firefox, in Firefox it just loads as it should and the :hover effects work properly. All 3 browsers are updated to their latest versions at the time of writing.
This only happens when I link to an external CSS stylesheet. When I copy the css to the html file the problem goes away!!!
CSS
a {
color: #fff;
border: none;
margin: 20px;
padding: 10px 20px;
display: inline-block;
font: bold 18px sans-serif;
background: #fd7c2a;
text-decoration: none;
-webkit-transition: background 5s; /* For Safari 3.0 to 6.0 */
transition: background 5s; /* For modern browsers */
}
a:hover {
background: #3cc16e;
}
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="description" content="" />
<!-- Specifies a description of the page. Search engines can pick up this description to show with the results of searches -->
<meta name="keywords" content="" />
<!-- Specifies a comma-separated list of keywords - relevant to the page -->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="styles.css" />
<title></title>
</head>
<body>
<p>Hover on me</p>
</body>
</html>
I solved the issue, been going through google for answers. The solution is to add <script> </script> opening and closing tags in the html file separated by space. Apparently its a bug in the browsers mentioned before.

Is there a need to install CSS3 plug-ins?

I'm working on styling my web page on a separate CSS file. I have created a link on my HTML file to apply the styling effects to my web page but it doesn't show any effect.
I tried the most basic styles to see if there was an effect to my webpage but nothing happened. I tried writing the codes with Microsoft Visual Studio, and then Notepad++ but still, no effect occurred. I also tried opening my web page using the latest version of Mozilla Firefox, Internet explorer and Microsoft Edge to see any effect but nothing happened.
I tried styling my h1 element using the codes I'll show on the next field
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="Stylesheet" href="../css/staret.css" type="text.css">
</head>
<body>
<h1> Football lives </h1>
</body>
</html>
on my staret.css file, here's what I wrote:
h1 {
color: Red;
}
I expected to see "Football lives" in red color but the actual output was the default color black.
No need to install CSS plugin. There is a little error in your code while linking CSS with HTML.
It should be, type = "text/css" in place of "text.css"
No. CSS3 is included. No need to think about it as an 'addon' or separate thing.
Your issues are with however you are authoring the file. Try putting it in a jsFiddle. : )
.box {
width: 20px;
height: 20px;
background: #ff0066;
padding: 1rem;
transform: rotate(20deg); /* CSS3 */
}
<section class='example'>
<div class='box'>hi</div>
</section>

Browser ignores CSS Selector for HTML element

I am following a tutorial in a book and it says to use CSS to set different background colors for the html and body elements. The body is capped at a max-width of 1020px, so the html background color will show on either side if the window is wide enough. Here is the CSS code for the background colors, the layout CSS is in a separate file:
html{
background-color: rgb(235, 177, 131);
background-color: hsl(27, 72%, 72%);
}
body{
color: rgb(91, 91, 91);
background-color: ivory;
}
I have tested this in Chrome, Safari, and Firefox and all three ignore the html style rule. However, when I specify the background color inline, such as:
<html style="background-color: hsl(27, 72%, 72%);">
Then it works. Does anyone know what might be going on here?
** EDIT **
Here is the beginning of the HTML file, you can see that I am linking the stylesheets in the head element:
<!doctype html>
<html style="background-color: hsl(27, 72%, 72%);">
<head>
<meta charset="utf-8" />
<meta name="keywords" content="triathlon, running, swimming, cycling" />
<title>Tri and Succeed Sports</title>
<link href="tss_layout.css" rel="stylesheet" />
<link href="tss_styles.css" rel="stylesheet" />
</head>
** UPDATE **
Found the problem. I was missing the semi-colon at the end of the #charset directive before the html style rule. This caused the browser to ignore it. Works fine now.
You could try creating a class like
.html {
background-color: red;
}
and then
<html class="html">
</html>
Also, here is a fiddle of your code, and pictures in Chrome, Firefox, and IE
Chrome:
Firefox:
IE (trashy browser on win7):
EDIT: I shrunk the body 4 times so I could show it works.

CSS not working in HTML application

I am working on a HTML application, and I am trying to style an info panel. Here is the CSS code I have so far:
#info_panel {
width:900px;
height:100px;
margin:auto;
background-color:brown;
border-bottom-left-radius:25px;
border-bottom-right-radius:25px;
border-top-left-radius:25px;
border-top-right-radius:25px;
}
I do not have a problem with the first four lines. The problem arises with the border radius properties. I noticed that the shadow property does not work either. I know that this code would normally work in a web browser, but this being an application, there seems to be a problem. Unfortunately, there is very little documentation on this subject. I would include a fiddle, but of course I could not because it would be running in a web browser. Any help is welcome! :)
From what I gather, your HTA is essentially running on Internet Explorer's rendering engine. Only IE9 and IE10 support the border-radius property. Older IEs will not show rounded corners or box shadows. Do you have IE8 installed?
If you need these style features for the older IE rendering, then look into CSS3 PIE: http://css3pie.com/
To really run HTA with IE9 you need to set document type and a x-ua compatible meta tag:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="x-ua-compatible" content="IE=9"/>
....
Notice the order, there shouldn't be any style, script or link tags before meta.
There also seems to be a bug in IE9. Radius is not rendered, when assigned it to a fieldset element which has a legend element too. Without legend borders are rounded.
I am curious as to why you are using the longhand version to specify the border radius. Have you tried the universal shorthand?
-moz-border-radius:25px;
-webkit-border-radius:25px;
border-radius:25px;
This the box shadow code:
-webkit-box-shadow: 0px 0px 25px 0px rgba(0,0,0,0.5);
-moz-box-shadow: 0px 0px 25px 0px rgba(0,0,0,0.5);
box-shadow: 0px 0px 25px 0px rgba(0,0,0,0.5);

Border Radius Not WORKING in IE9

Border Radius is not working in IE9. The following Attribute i used in my project. and also i add the .HTC file also
-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
behavior: url(Styles/border-radius.htc);
.myclass {
border-style: solid;
border-width: 2px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border-radius: 15px;
}
IE9 will use the default border-radius, so just make sure you include that in all your styles calling a border radius. Then your site will be ready for IE9.
-moz-border-radius is for Firefox, -webkit-border-radius is for Safari and Chrome.
Furthermore: don't forget to declare your IE coding is ie9:
<meta http-equiv="X-UA-Compatible" content="IE=9" />
Some lazy developers have <meta http-equiv="X-UA-Compatible" content="IE=7" />. If that tag exists, border-radius will never work in IE.
Use
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
This is an old thread, but it did not help me. My solution was to add the HTML 5 doctype declaration to the page:
<!DOCTYPE html>
Other HTML doctype declarations may work too - my problem was I was generating the pages with no doctype declaration at all.
You need to put this in your HTML header
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
Answer discovered here ie9 border radius
border-radius.htc broke normal border-radius in ie9, include border-radius.htc file in ie versions below 9 with conditional comments
in IE9 border-radius works without any behavior files.
This answer will also help with lower versions of ie, like ie6,7,8.
Using CSS Pie -> http://css3pie.com/
This will allow you to specify your border radius normally and then include the pie.htc script in your css. This magically make it work in IE6. Look at that!
This also works with other CSS3 properties like background gradients.
You can also try adding this to your head ->
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
Good luck!
border radius supported ie-7, ie-8, ie-9 via javascript
check this tutorial how to show border radius in ie
http://davidwalsh.name/css-rounded-corners
If you use at the same time border-radius with
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='######', endColorstr='######',GradientType=0 ),
just comment this filter.
No matter what you include or what you write border-radius doesn't work in ie9. Changing the browser mode or document mode is never a solution because that it is on the client side. So i am afraid my friend there is no plausible way to make border-radius work properly in ie9 unless you take the help of javascript.