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.
Related
This question already has answers here:
Gradients in Internet Explorer 9
(10 answers)
Closed 9 years ago.
I have refered many sites for applying linear gradient to ie-9 and some links are saying not support as well as some link are saying it will work.can any body clear whether we can uselinear gradient or not?
This is my code:
.top_block
{
position: fixed;
display: block;
height: 150px;
width: 105px;
z-index: 9999;
background: -webkit-gradient(linear, left top, left bottom, from(#E9E9E9), to(#D3D3D3));
background: -moz-linear-gradient(top, #E9E9E9, #D3D3D3);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#E9E9E9', endColorstr='#D3D3D3',GradientType=0 );
margin-left:72px;
left: 36%;
top: 32%;
border: 6px solid white;
border-radius: 10px 10px;
-moz-border-radius: 10px 10px;
-webkit-border-radius: 10px 10px;
padding: 15px;
}
I have applied this not working in ie-9 as well as working working fine in firefox and ,chrome.
No, IE9 does not support the standard CSS gradients. This was only introduced in IE10.
IE9 does, however, support the old IE-specific -ms-filter style, in the same way as older IE versions did, so you can use this to generate gradients in IE9.
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#222222', EndColorStr='#AAAAAA')";
However, it is important to note that these filter gradients (and in fact IE's filter styles in general) have a number of bugs and quirks, some of which can make them difficult to work with.
For example, they are incompatible with CSS border-radius. If you use a filter gradient and border-radius on the same element, the gradient background will be displayed on top of the rounded corners and will hide them.
There is no way around this problem using the filter gradients.
So if you need to use gradient backgrounds and rounded corners on the same element in IE9, the best solution is to use a polyfill script such as CSS3Pie, which implements standard CSS gradients into IE9, and does it in a way that is compatible with border-radius.
This isn't the only problem you'll encounter when using filter styles, so my preference would be to avoid using them wherever possible. Polyfill scripts like CSS3Pie generally make things a lot easier to work with, and often do a good job of working around or avoiding the bugs in the fiter styles.
Hope that helps.
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)
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.
I am updating an IE6-era website so that cosmetic differences in modern (IE8, Firefox 4 in this scenario) browsers are eliminated, or at least reduced.
We've ran into an issue with buttons, which are styled using background-color: #EFEFEF; and border: 1px. In IE6 this border setting neatly reduces the border on buttons.
However, in IE8 and Firefox 4 setting a CSS style of border: 1px completely removes the border.
I've tried using border_SIDE_color to set the color of the relevant sides of the button appropriately but this has no impact.
What approach should I use instead? This is a large legacy website, containing many buttons so I am looking for a CSS-only solution, if one exists. Forcing IE8 into compatibility mode is also not an option.
Try setting border-style: outset;. Or use the shorthand version with the other styles you're already using:
.mybutton {
border: outset #EFEFEF 1px;
}
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).