My Box Shadow is not showing in IE7 and IE8.
#bodyContainer{
background: url(../images/site_bg.png) repeat ;
margin: 0px auto;
width:1000px;
float:left;
position:relative;
border: 1px solid #EEEEEE;
/*background:#FFFFFF;*/
box-shadow: 0 0 5px 0 #000000;
}
Use CSS3 PIE, which emulates some CSS3 properties in older versions of IE.
It supports box-shadow (except for the inset keyword).
and
There are article about CSS3 Box Shadow in Internet Explorer and Box-shadow.
Hope this helps
also you can use
style="FILTER: DropShadow(Color=#0066cc, OffX=5, OffY=-3, Positive=1);width:300px;font-size:20pt;"
style="filter: progid:DXImageTransform.Microsoft.dropShadow (OffX='-2', OffY='-2', Color='#c0c0c0', Positive='true')"
You have to use the non-standard IE filter property. See this article
box-shadow is a feature of CSS3
hence it is not supported below ie9
you can check the compatibity here:
http://caniuse.com/#search=box-shadow
Box-Shadow is not compatible below IE9
Always check compatibility of CSS Properties using following link
http://caniuse.com/css-boxshadow
Accoding to Box-shadow's MDN compatibility table, Box-shadow doesn't support in IE7 and IE8.
Check the same link (Notes section) for more info on alternative properties like Dropshadow and shadow properties.
Syntax:
filter:progid:DXImageTransform.Microsoft.DropShadow(sProperties)
filter:progid:DXImageTransform.Microsoft.Shadow(sProperties)
Related
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.
Hello guys i have the following..
.selected2:first-child{
background: url(../img/css/first-selected.png) no-repeat !important;
background-position: center center !important;
box-shadow: inset 1px 1px 5px 2px rgba(221,221,221,1) !important;
}
.selected2{
background: url(../img/css/second-selected.png) no-repeat !important;
background-position: center center !important;
box-shadow: inset 1px 1px 5px 2px rgba(221,221,221,1) !important;
}
.selected2:last-child{
background: url(../img/css/third-selected.png) no-repeat !important;
background-position: center center !important;
box-shadow: inset 1px 1px 5px 2px rgba(221,221,221,1) !important;
}
it works perfect in ie9, chrome, opera, firefox... but in ie8 i get only the second background on every li element.
What is the problem? ie8 does not support first-child?
You have two issues here: Firstly the :last-child selector, and secondly the RGBA background colours.
IE8 does not support :last-child. (It does support :first-child though)
You can see the browser support for these (and all other CSS selectors) at Quirksmode.org.
The quickest and easiest way to deal with this if you need IE8 support is simply to add classes to the relevant elements and style them that way instead. It's the old-school way of doing things, but then IE8 is something of an old-school browser.
If you really need to use selectors like :last-child, and you really need to support IE8, there are Javascript solutions you could try:
http://selectivizr.com/ -- this is a JS library that adds support for a bunch of CSS selectors to old IE versions. It requires you to also use another lib such as jQuery that it uses to do the hard work.
https://code.google.com/p/ie7-js/ -- this is a JS library that tries to patch old IE versions to fix as many of the bugs and quirks as possible and back-fill as many missing features as possible. It's pretty wide-ranging in what it does. It does include most of the advanced CSS features.
Either of these libraries should do the trick for you to add :last-child support, unless you have users with JS turned off.
However as I said, IE8 does support :first-child, so missing selectors isn't the reason for your code not working in this case. The reason your CSS isn't working for :first-child is because you're using an RGBA colour for the background. IE8 doesn't support RGBA colours.
For this, the only solution available is a JS library called CSS3Pie. This adds various CSS3 features to IE6/7/8, including RGBA colour support (albeit to a limited extent; it doesn't do everything).
IE8 and lower don't support those pseudo classes. There is a Javascript tool that makes IE7 and IE8 behave closer to IE9 and adds support for first and last childs.
https://code.google.com/p/ie7-js/
In the downloaded file, you will find IE7.js IE8.js and IE9.js just use the IE9.js it includes the other two...
As previously mentioned, you can't use the :last-child pseudo-class, but you could do .selected2 + .selected2 etc. to target the one you need.
Here's my HTML code.
<table cellspacing="0" class="assets_table">
<tbody>
<tr class="table_header"><td>ID</td><td>Title</td><td>Regarding</td><td>Status</td><td>Date</td></tr>
<tr><td>9</td><td>Testing</td><td>hijacked account</td><td></td><td> 4 Jan, 2012</td></tr></tbody>
</table>
and here's the CSS for it.
.assets_table{width:100%;border-radius:4px 4px 0 0;border:1px solid #ccc;overflow:hidden}
.assets_table .table_header{background:grey;height:30px;font-weight:bold;padding:0;border-top:1px solid #f9f9f9;}
.assets_table td {padding:5px 10px}
.assets_table tr {border-top:1px solid #ddd;padding:0 10px;}
But no paddings or borders or border-radius's practicably nothing will work on the tr's. Here is what I get. http://pastehtml.com/view/bjmptfulh.html
I have tried everything I can think of but nothing works? I tried display:table and display:block but it just kinda messes up the table. Any help here?
I think you need to apply the css to the td elements, as explained in this post: Space between two rows in a table?.
Otherwise your code looks fine.
If you view your code in Chrome, it actually works with the rounded corners on your table as well as all yoru other styles. If you are not using Chrome or a webkit browser (safari, chrome) then you will need to add other border-radius tags.
For mozilla (Firefox) you will need to add -moz-border-radius: 4px 4px 0 0;
For Opera you will need to add -o-border-radius: 4px 4px 0 0;
I also add -khtml-border-radius: 4px 4px 0 0; for some of the older versions of Opera and browsers that use the Konqueror web browser.
You will also need to check the syntax of these different forms of the styles as not everything uses the identical markup. For instance, -moz- uses -mox-border-radius-topright to change the top right corner while -webkit- uses -webkit-border-top-left-radius to adjust just that one corner.
Here is a good article on border radius and some of these new CSS3 tags. Thsi article is from 2009 so some things have already changed:
CSS Tricks border radius example
for example
#footer .tri{
border-color:transparent transparent #212121;
into this :
#footer .tri{
border-color:transparent transparent url("border-image.png");
deos that actually work!! thanks
Check out CSS3's border-image property, which does exactly what you want. As with many other CSS3 styles, this is only supported by modern browsers. Unfortunately, this is not supported even by IE9.
Is it possible to bring curve edges to divs using html and css only...without using images.
Not in a way that's compatible cross browser (in particular, IE does not yet support it). In CSS 3, you can use border-radius, which Safari and Firefox support currently as -webkit-border-radius and -moz-border-radius. For example
<div style="-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
border: 1px solid #000;
padding: 10px;">
This is a sample div.
</div>
Yes, it is possible, but it is a CSS 3 feature that may not work on all browsers (or not the same in all browsers). See this article for an example.
I assume you mean border-radius. Yes, it is possible in proper browsers (not IE) with border-radius. As it's a CSS3 property, it's not yet properly implemented and you need to do some trickery to make it work:
-moz-border-radius: 10px; /* for firefox */
-webkit-border-radius: 10px; /* for safari & chrome */
border-radius: 10px; /* for others (opera) */
Take a look at http://www.css3.info/preview/rounded-border/ for more info.
Yeah, it, certainly, is technically possible (the best kind of possible, I guess), here is an example (be sure to check the source, it really is a cool technique).