box-shadow and IE9 compatibilty - html

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.

Related

Conditional comments not working for browsers other than Internet Explorer

<!--[if !IE]>
<style type="text/css" media="screen">
.title {
color: rgba(0, 0, 0, 0);
display: block;
font-family: sans-serif;
font-size: 50px;
margin-left: 0px;
margin-right: 5px;
text-align: right;
text-shadow: rgba(255, 255, 255, 0.247059) 2px 2px 2px, #888 0px 0px 0px;
}
</style>
<![endif]-->
This piece of code in head tags doesn't works never... why? I have been searching a lot throught internet and everyone says it works... but, actually, in my web-page doesn't. I have used it a lot of times and it worked... but something I should have wrong...
Anybody can help me, please?
Thanks in advance!
As posted in this SO answer (that I linked to in the comments):
Browsers other than IE treat the conditional statements as comments because they're enclosed inside comment tags.
<!--[if IE]>
Non-IE browsers ignore this
<![endif]-->
However, when you're targeting a browser that is NOT IE you have to use 2 comments, one before and one after the code. IE will ignore the code between them, whereas other browsers will treat it as normal code. The syntax for targeting non-IE browsers is therefore:
<!--[if !IE]-->
IE ignores this
<!--[endif]-->
You have this:
<!--[if !IE]>
some stuff
<![endif]-->
which non-IE browsers see as this:
(There's nothing, because it's just a comment to non-IE browsers).
You need this:
<!--[if !IE]-->
some stuff
<!--[endif]-->
so that both the opening and closing tags are fully-contained comments to non-IE browsers, and the style is rendered.
What Mystere Man means is that these conditional comments were only supported in versions of Internet Explorer prior to Internet Explorer 10. Since you are saying "apply these styles if it not Internet Explorer" you have a logical impossibility.
I would personally write these as follows-
<style type="text/css" media="screen">
.title {
color: #000000;
color: rgba(0, 0, 0, 0);
display: block;
font-family: sans-serif;
font-size: 50px;
margin-left: 0px;
margin-right: 5px;
text-align: right;
text-shadow: rgba(255, 255, 255, 0.247059) 2px 2px 2px, #888 0px 0px 0px;
}
</style>
You will notice the extra "color" property of the title class - this will be overridden in browsers that support RGBA (which will use that value instead) but will be a fallback value for those browsers that do not support it. That way all browsers that do not support RGBA (for example Firefox 2 and below) will also have a usable fallback colour. I've not bothered providing a fallback for text-shadow as Internet Explorer 8 and below do not support this property either - your users can live without it.
There is no harm providing a standard CSS property that a browser does not understand, it will simply be ignored by that browser and only used in browsers that do understand it. See more about CSS fallback properties.
If you must use conditional comments to solve this you could look at targeting those versions of Internet Explorer you know do not support RGBa (don't penalise users of Internet Explorer 9 - 11 whose browsers do support the property).
<!--[if lte IE 8]>
<style type="text/css" media="screen">
.title {
color: #000000;
}
</style>
<![endif]-->
Do not do this when fallback properties are a better solution, as in this case.
I will answer myself because I found the problem, which wasn't anything related with IE selector tag neither rgba attribute in itselves (as somebody said before: IE 10 supports this last one), but with the alpha gradient applied. For some reasson, the alpha value is not rendered very well in IE and it results in a completely different style. Changin the 0 (alpha value) in the font color and playing a little with those color values is possible to get a very similar result in IE and other browsers.
So, thank you so much for everyone who has been trying to help me. I hope this helps another person.
:)
you're missing the [endif]:
<!--[if !IE]>
<style type="text/css" media="screen">
.title {
color: rgba(0, 0, 0, 0);
display: block;
font-family: sans-serif;
font-size: 50px;
margin-left: 0px;
margin-right: 5px;
text-align: right;
text-shadow: rgba(255, 255, 255, 0.247059) 2px 2px 2px, #888 0px 0px 0px;
}
</style>
<!--[endif]-->
note: this will apply the style on non-IE browsers. If you wanted to use it on IE browsers, change the !IE to IE

Umbraco not rendering IE box shadows

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');

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);

Transparent background rendering White in Internet Explorer

In my page layout I have two <div> tags. One, with id #image-panel and the other with #image-content-panel.
The two <div>s are stacked on top of each other using position: absolute. #image-content-panel (has higher z-index) is on top of #image-panel.
Both <div>s have background: transparent.
The page renders fine in Chrome, Safari, and Firefox i.e. I can see the image through the text (heading and paragraph etc.). But in IE (version 8) #image-content-panel is being redered with a white background.
You can see screenshots below:
Rendering in Crome, Safari, Mozilla
Rendering in IE 8
Relevant CSS and HTML code :
HTML Code
CSS Code
I'd like the page to render same in IE too.
Any help is appreciated.
Please propose an Alternative solution too if this can't be fixed.
UPDATE
The Jquery Cycle Plugin will add a background colour to elements in older versions of IE.
You need to set the cleartypeNoBg option to true in your Cycle initialisation.
$("#image-content-panel").cycle({
fx : 'scrollRight',
speed : 2700,
cleartypeNoBg: true
});
EDIT The below is not relevent
IE8 doesn't support rgba values and will fallback to a solid colour. If you don't define a fallback it will default to white which is what you are seeing.
There's a couple of ways to handle this.
1. Accept IE8's limitations.
#header {
z-index: 100 !important;
width: 100%;
height: 50px;
background: rgb(0,0,0);
background: rgba(0,0,0,0.6);
margin: 10px 0 0 0;
}
#header will have a solid black background in browsers that don;t support rgba. Semi opaque in browsers that do.
2.Use a filter
#header {
z-index: 100 !important;
width: 100%;
height: 50px;
background: rgba(0,0,0,0.6);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)"
margin: 10px 0 0 0;
}
#header will have 60% transparent black background in IE8 and proper browsers. Personally, I hate using filters. They make your markup hideous and are difficult to maintain unless you are excellent at converting rgb to hex codes in your head (which I'm not). Also, this particular filter is IE8+. It will not work in IE7, though there are other filters that will work in IE6-7. You should also probably separate this out in to an IE8 specific stylesheet or use some other method to prevent IE9 from using the filter as IE9 supports rgba.
3.Use a 1px x 1px black, semi-transparent .png
#header {
z-index: 100 !important;
width: 100%;
height: 50px;
background: url(background.png) repeat;
margin: 10px 0 0 0;
}
This is the route I usually go down simply because it's simple. It takes seconds to create a .png if you need to change the alpha and you don't need to worry about browser inconsistencies.
As others have said, IE8 doesn't support RGBA colour values.
There is a hack you can use to work around this though: I recommend trying out CSS3Pie on your site; it implements a number of modern CSS features into old versions of IE, including RGBA colours in backgrounds.
Hope that helps.

Text shadow for IE

I am building a website and I am using the text-shadow function, however it doesnt work for IE.
Graphic:
text-shadow: 0.1em 0.1em 0.2em black;
Is there any solution or hack to over come this, or something that mimics the text-shadow function for IE.
For some versions of IE, Dropshadow filter may do what you need:
http://msdn.microsoft.com/en-us/library/ms532985%28v=vs.85%29.aspx
I was looking for a cross-browser text-stroke solution that works when overlaid on background images. think I have a solution for this that doesn't involve extra mark-up, js and works in IE7-9 (I haven't tested 6), and doesn't cause aliasing problems.
This is a combination of using CSS3 text-shadow, which has good support except IE, then using a combination of filters for IE. CSS3 text-stroke support is poor at the moment.
IE Filters:
The glow filter looks terrible, so I didn't use that.
David Hewitt's answer involved adding dropshadow filters in a combination of directions. ClearType is then removed unfortunately so we end up with badly aliased text.
I then combined some of the elements suggested on useragentman with the dropshadow filters.
Putting it together
This example would be black text with a white stroke. I'm using conditional HTML classes by the way to target IE (http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/).
#myelement {
color: #000000;
text-shadow:
-1px -1px 0 #ffffff,
1px -1px 0 #ffffff,
-1px 1px 0 #ffffff,
1px 1px 0 #ffffff;
}
html.ie7 #myelement,
html.ie8 #myelement,
html.ie9 #myelement {
background-color: white;
filter: progid:DXImageTransform.Microsoft.Chroma(color='white') progid:DXImageTransform.Microsoft.Alpha(opacity=100) progid:DXImageTransform.Microsoft.dropshadow(color=#ffffff,offX=1,offY=1) progid:DXImageTransform.Microsoft.dropshadow(color=#ffffff,offX=-1,offY=1) progid:DXImageTransform.Microsoft.dropshadow(color=#ffffff,offX=1,offY=-1) progid:DXImageTransform.Microsoft.dropshadow(color=#ffffff,offX=-1,offY=-1);
zoom: 1;
}
The IE filter class also puts a shadow on any background images you have. For instance, I have an H1 tag that has a line as part of the background, when I put the IE text shadow filter on, the line in the background inherits that shadow.
I've been looking and investigating this issue also for some time now and would like to share a maybe contradictory finding while testing my site on IE10.
I have this html structure :
<p>Meer info op onze <a class="links" target="_self" href="/leden">ledenpagina</a></p>
combined with CSS :
p { display: inline-table;
color: #FFF;
text-shadow: 0px 1px 2px #111, 0px 1px 0px #111;
margin: 0px 20px; }
a.links {
text-decoration: underline;
color: #FFFF60;
font-size: 1.1em; }
If i look at the outcome of this in IE10, the achor text "ledenpagina" does receive the text-shadow style as defined in the parent (p tag).
The assumption this could have anything to do with a combined text-decoration:underline selector was false (tested by applying text-decoration also on the p tag)
Result can be witnessed here : http://tczelem.be (slide down the header slider tab)
So the text-decoration selector does seem to have some effect in IE10.
![enter image description here][2]