Footer Background Disappears

Capture Productions | Knoxville Tennessee Video Production Company

I have a background gradient in the .footer-shadow that is not showing at all in IE8, IE7, and Firefox 3.0 PC but appears fine in Safari and Firefox 3.6 PC. Can someone tell me why and how I can fix it?


You are using CSS3, which is not supported in those older browsers. There are JavaScript plugins that can assist with this. Otherwise, you’ll need to use an image.

Ralph, is there a way to write some additional CSS to detect and/or target the older browsers? PaulO’B has shown me some tricks in the past like this. (not sure if this is correct, but…)

html .footer {background gradient stuff here}

*html .footer {background: url(footer-background.gif) no-repeat 0 0;}

Do you know of a way to rewrite the CSS to serve a background image GIF for that div if it is a old browser?

Just put the styles for older browsers first, and the more modern ones second, and the good browsers will read the last one, while the older ones will ignore it.

I have added your suggestion and it still is not showing in IE8 and others. I wonder why?

Try removing that filter, as it seems to be causing a problem.

I was kind of wanting to keep it. I need to find some way to target old browsers to show the gif background image and target CSS3 compatible browsers to show the css gradient with the filter.

Why not just ditch the filter and feed CSS3 to browsers that can handle it and an image to those that can’t?


You can’t add more than one filter property but you can add more than one filter value.

So code would look like this:

.footer-shadow {
    progid:DXImageTransform.Microsoft.gradient(startColorstr='#Ff0000', endColorstr='#EDEDED')
    progid:DXImageTransform.Microsoft.Blur(PixelRadius=3, MakeShadow=true, ShadowOpacity=0.30);

However the blur filter will just blur the gradient and can’t be used in combination with the gradient filter (as far as I can tell). Remove the blur filter and your gradient will show.

I belive that to get the blur (shadow) effect you would need to add the blur to an absolutely place div which is shimmed under the gradient so that the filters are not in the same stacking content.