I try to use box-shadow with css3, but it's not working on IE, works fine on chrome and firefox.
I know, on IE9 I must used box-shadow without moz or webkit prefix
I use an iFrame in my WebPage for login (Made for ERP login), And this iframe have a known bug, when you use html5 you can be redirected after login, That's why I must use <html> tag and not <!DOCTYPE html> (I've open a ticket for fix this bug)
If I use <!DOCTYPE html> my box-shadow work, but my iframe freeze.
If I use <html> My iFrame work fine but my box-shadow is not diplayed.
So, actually I must choose between design or functionality, but I'm pretty sure stackoveflow know an issue for that.
If you know a solution or a hack, it can be cool
Here my code : (work with <!DOCTYPE hml> but want the same effect with <html>)
#header-container{
-webkit-box-shadow:0 5px 8px rgba(0, 0, 0, 0.15);
-moz-box-shadow:0 5px 8px rgba(0, 0, 0, 0.15);
box-shadow:0 5px 8px rgba(0, 0, 0, 0.15);
}
The CSS3 box-shadow is a Candidate Recommendation.
It is method of displaying an inner or outer shadow effect to elements and it can be partially emulated in older IE versions using the non-standard shadow filter. Partial support in Safari, iOS Safari and Android Browser refers to missing inset and blur radius value support.
IE9 has no problem showing box-shadow except when shadowing a box within a table-cell (If the CSS of the table has its border-collapse property set to collapse, then the box-shadow is not applied. This is fixed in a future releases).
As mentioned earlier, IE6-8 requires Visual Filters to emulate CSS3 box-shadows without JavaScript. In order to illustrate this, I will show several different types of box-shadows below and show both the CSS3 syntax and the equivalent Visual Filter CSS recipe. Some of these recipes produce almost identical results, while others are rough equivalents.
Note that all these examples use a variation of Paul Irish’s Conditional CSS Pattern in order to create the IE-only rules. This involves replacing the <body> tag of the document with this HTML:
<!-- Extra white-space below is just to make it easier to read. :-) -->
<!--[if lt IE 7 ]> <body class="ie6"> <![endif]-->
<!--[if IE 7 ]> <body class="ie7"> <![endif]-->
<!--[if IE 8 ]> <body class="ie8"> <![endif]-->
<!--[if IE 9 ]> <body class="ie9"> <![endif]-->
<!--[if (gt IE 9) ]> <body class="modern"> <![endif]-->
<!--[!(IE)]><!--> <body class="notIE modern"> <!--<![endif]-->
We can then apply CSS specific to a version of IE. For example:
body.ie7 #box {
/* insert IE7 specific CSS here */
}
(Note: Paul Irish’s technique officially has the conditional comments around the html tag, not the body tag. You can use either for these techniques to work. I just prefer using the latter.)
All these Visual Filter recipes depend on the box “having layout”. If you have any difficulty with the Visual Filters activating, set zoom: 1 or a static width inside the IE6-8 specific CSS to force the block to have layout.
Type #1: Simple, Unblurred Shadows
In order to simulate simple, un-blurred box-shadows in IE, we use IE’s DropShadow Visual filter:
#box {
/* CSS for all browsers. */
border: solid 1px #808080;
background: #ffffcc;
margin: 10px;
padding: 10px;
/* CSS3 Box-shadow code: */
box-shadow: 5px 5px 0px #ff0000;
-webkit-box-shadow: 5px 5px 0px #ff0000;
-moz-box-shadow: 5px 5px 0px #ff0000;
}
/* IE6-8 Specific Code */
body.ie6 #box,
body.ie7 #box,
body.ie8 #box {
zoom: 1;
filter: progid:DXImageTransform.Microsoft.DropShadow(OffX=5, OffY=5, Color=#ff0000);
}
There are two exceptions to this solution. The first deals with when the block has a transparent background, and the other has to do with negative box-shadow offsets.
Type #1a: Blocks With Transparent Backgrounds
Let’s say you use the above CSS, but omit the background property:
#box {
/* CSS for all browsers. Note there is no background-color, so box will be transparent */
border: solid 1px #808080;
margin: 10px;
padding: 10px;
/* CSS3 Box-shadow code: */
box-shadow: 5px 5px 0px #ff0000;
-webkit-box-shadow: 5px 5px 0px #ff0000;
-moz-box-shadow: 5px 5px 0px #ff0000;
}
/* IE6-8 Specific Code */
body.ie6 #box,
body.ie7 #box,
body.ie8 #box {
zoom: 1;
filter: progid:DXImageTransform.Microsoft.DropShadow(OffX=5, OffY=5, Color=#ff0000);
}
Doing this will results in some unexpected results in IE6-8. The results in IE7 are as hideous and unreadable as the average YTMND page! In order to fix this issue in elderly IE, one must add a background color in IE6-8 only and remove it with the Chroma filter.
Note: All the other types of box-shadow recipes that follow should also use this Chroma filter method when it is desirable to have a transparent background in the box itself.
Type 1b: Negative Shadow Offsets
If there are negative shadow offsets, you will see a small difference with the position of the box being shadowed:
#box {
/* CSS for all browsers. */
border: solid 1px #808080;
background: #ffffcc;
margin: 10px;
padding: 10px;
/* CSS3 Box-shadow code: */
box-shadow: -10px -5px 0px #ff0000;
-webkit-box-shadow: -10px -5px 0px #ff0000;
-moz-box-shadow: -10px -5px 0px #ff0000;
}
/* IE6-8 Specific Code */
body.ie6 #box,
body.ie7 #box,
body.ie8 #box {
zoom: 1;
filter: progid:DXImageTransform.Microsoft.DropShadow(OffX=-10, OffY=-5, Color=#ff0000);
}
Type #2: Glowing box-shadow
The second box-shadow I use a lot is what I call the “glowing box” effect. This happens when a shadow with a large blur radius is put directly behind a box (i.e. the x- and y-offsets are set to 0, and the blur-radius is a non-zero number). It is possible to simulate this effect in IE using the Shadow filter. This filter must be applied four times (north, south, east and west of the box) in order to simulate the CSS3 effect. Here is the CSS recipe:
#box {
box-shadow: 0 0 5px #666666;
-webkit-box-shadow: 0 0 5px #666666;
-moz-box-shadow: 0 0 5px #666666;
}
body.ie6 #box,
body.ie7 #box,
body.ie8 #box {
zoom: 1;
filter: progid:DXImageTransform.Microsoft.Shadow(Color=#cccccc, Strength=5, Direction=0),
progid:DXImageTransform.Microsoft.Shadow(Color=#cccccc, Strength=5, Direction=90),
progid:DXImageTransform.Microsoft.Shadow(Color=#cccccc, Strength=5, Direction=180),
progid:DXImageTransform.Microsoft.Shadow(Color=#cccccc, Strength=5, Direction=270);
}
Two important caveats about the Visual Filter rules:
As mentioned before, the CSS for IE6-8 uses a lighter color for the shadow. This is due to the way the Shadow filter behaves: it requires a lighter shade to simulate the same effect.
Also he Visual Filters examples are pushed down and to the right compared to the CSS3 example. This is for the same reasons as stated in Type 1b, and a developer would again have to use margins or positioning to get the box in exactly the same place as it is in IE6-8.
You may be able to "cheat" by adding:
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
This will tell IE to render using up-to-date standards, which includes the box-shadow.
However, this is at best a hack and probably won't help much. You should really focus on fixing the bug that's stopping you from properly declaring a <!DOCTYPE>.
The doctype tag is not a replacement for the html tag, you should have both.
If you have only the doctype tag and not an html tag, the markup is invalid. The browser will try to make the best of the broken code, but there are a number of ways that it can misinterpret parts of the rest of the code.
If you have only the html tag and not a doctype tag, the browser will parse the page in quirks mode, which is basically using the oldest standards possible. This will disable some features from newer standards, like CSS3.
If you can't use the HTML5 doctype, you should use one for an older standard, for example HTML 4.01:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
W3C has a list of Recommended Doctype Declarations where you can see the different versions and variations.
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.
I am looking at a fix for a website - I have applied a box-shadow to a div. This renders perfectly in:
Safari, Firefox, Chrome.
The SAME CSS renders perfectly in IE when displayed via ASP.NET razor views.
The CSS that works in the above .NET, doesn't render via Umbraco.
I am using a separate stylesheet for IE (8.0+) and using:
box-shadow: 5px 5px 0px #000
in the main stylesheet (for all other browsers) I am using:
box-shadow: 0px 40px 100px 2px #000;
neither work for IE and I am stumped now.
IE makes me want to drink bleach - anybody have any ideas where I am going wrong?
Thank you in advance!
This does indeed have to do with IE compatibility. Remove this line from your html:
<meta http-equiv="X-UA-Compatible" content="IE=8" />
The line above forces newer versions of Internet Explorer to render the page as IE8 would, by default. See MSDN's Specifying legacy document modes for more details.
I'm guessing the link to your css is relative or something, it's got absolutely nothing to do with umbraco - you have full control over the html. Perhaps paste a link to your website or your html code.
also for cross browser drop shadows you need something like this
-moz-box-shadow: 3px 3px 4px #444;
-webkit-box-shadow: 3px 3px 4px #444;
box-shadow: 3px 3px 4px #444;
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#444444')";
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#444444');
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);
I'm having a problem with my form that looks okay in Firefox but it goes lower than I want it to on Chrome and IE. Also footers go higher in IE when there perfect in Chrome and FF.
I just want to know if there is any way I can make the CSS specific to each browser so if I opened my page in FF, IE or Chrome it would use the CSS specific to it.
Thanks
Update:
I have found this code to make a separate style sheet for IE:
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="all-ie-only.css" />
<![endif]-->
Is there one I can make for all the other browsers?
In IE you can add a specific stylesheet using conditional comments:
http://css-tricks.com/how-to-create-an-ie-only-stylesheet/
For Mozilla and Chrome you could use vendor specific tags.
In Chrome you would use something like this (As Chrome is webkit based, you add -webkit before tags):
#foo {
-webkit-border-radius:5px;
-webkit-box-shadow: 5px 5px 5px #000;
}
And in Mozilla you would use (add -moz before tags):
#foo {
-moz-border-radius:5px;
-moz-box-shadow: 5px 5px 5px #000;
}
You have to remember you cannot do this in all tags.
List for Mozilla:
https://developer.mozilla.org/en/CSS_Reference/Mozilla_Extensions
List for Chrome:
http://qooxdoo.org/documentation/general/webkit_css_styles