Problem with IE8

[rainemaida]

For some reason the caption on the slider here:

http://zcf.websitesnewcastle.com/

… seems to have a black kinda transparent background on IE8. I’m not sure where abouts it’s coming from as even in Firebug isn’t not clear.

Can somebody help me out plz?

Cheers.

[NghiQuach]

the black transparent background is coming from this line in ie8.

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#4C000000,endColorstr=#4C000000)

[rainemaida]

Hi,

That’s being put in by the slider plugin I am using. What can I put in my IE8 stylesheet to remove the gradient?

Cheers.

[NghiQuach]

I’m kinda of a newbie when it comes to css but maybe just override that with

filter: alpha(opacity=0 );

maybe the value has to be 100 not sure.

EDIT: i put 100 and it seems to do the job.

[ElijahFowler]

[@NghiQuach](https://css-tricks.com/forums/profile/40628/NghiQuach “NghiQuach”), that will work and so will using “filter: none; -ms-filter:none;”, but you’re better off removing the style so that your CSS will be cleaner, taking into account you don’t need it for something else. In this case the style isn’t used for anything else.

So the better solution would be to remove the CSS that’s not needed. In this case this is what you have is a filter and a background color (rgba) on the element. Now for the color you’re overwriting it with “background-color: transparent !important;” but you’re not touching the filter. Here’s the two snippets of code you’ve got (I organized them a bit):

.slider-wrapper .slider .soliloquy-container .soliloquy-caption .soliloquy-caption-inside {
background-color: transparent !important;
color: #333;
font-size: 16px;
line-height: 24px;
text-align: left;
text-shadow: 0!important;
width: 280px;
}

.soliloquy-container .soliloquy-caption .soliloquy-caption-inside {
background: rgba(0,0,0,.5);
color: #fff;
display: block;
font-size: 14px;
-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#4C000000,endColorstr=#4C000000);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#4C000000,endColorstr=#4C000000);
line-height: 18px;
margin: 0;
padding: 10px;
text-align: center;
text-shadow: 0 1px 0 rgba(0,0,0,.3);
zoom: 1;
}

Now instead of using “background-color: transparent !important;” you should have just removed the style you didn’t need. So let’s see what that would look like:

.slider-wrapper .slider .soliloquy-container .soliloquy-caption .soliloquy-caption-inside {
color: #333;
font-size: 16px;
line-height: 24px;
width: 280px;
}

.soliloquy-container .soliloquy-caption .soliloquy-caption-inside {
display: block;
margin: 0;
padding: 10px;
zoom: 1;
}

All the styling you were overwriting has been removed, leaving clean CSS. No more IE8 problems. Now if you wanted to get even more clean with it you could merge the two and remove extra selectors (the class of the element is specific enough in most cases):

.soliloquy-caption-inside {
color: #333;
display: block;
font-size: 16px;
line-height: 24px;
padding: 10px;
width: 280px;
zoom: 1;
}

Now the css has been merged together so the next time you need to change something it’s all in one place, and you won’t have to go chasing down where the style you want to change is or resort to using “!important” (which should be used as little as possible for many reasons).

HTH,

-Elijah

EDIT: Going back and looking at the earlier posts I realized that there may be multiple stylesheets involved (silly me =P). If the styling your overwriting is coming from the plugin stylesheet you should go into that stylesheet and make the changes there if possible. If not I can understand why you would overwrite the style. In that case like I said above, try this, adding “!important” only if you have to:

.slider-wrapper .slider .soliloquy-container .soliloquy-caption .soliloquy-caption-inside {
-ms-filter: none;
filter: none;
}

[Author]

Posts