SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Guru Todd Temple's Avatar
    Join Date
    Mar 2005
    Location
    Tennessee
    Posts
    797
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Footer Background Disappears

    LINK-
    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?

    Todd
    Todd Temple > T2 Design

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,171
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    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.

  3. #3
    SitePoint Guru Todd Temple's Avatar
    Join Date
    Mar 2005
    Location
    Tennessee
    Posts
    797
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    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....)

    /* FOR THE LATEST BROWSERS */
    html .footer {background gradient stuff here}

    /* FOR OLDER BROWSERS */
    *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?
    Todd Temple > T2 Design

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,171
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    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.

  5. #5
    SitePoint Guru Todd Temple's Avatar
    Join Date
    Mar 2005
    Location
    Tennessee
    Posts
    797
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    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?
    Todd Temple > T2 Design

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,171
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Try removing that filter, as it seems to be causing a problem.

  7. #7
    SitePoint Guru Todd Temple's Avatar
    Join Date
    Mar 2005
    Location
    Tennessee
    Posts
    797
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    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.
    Todd Temple > T2 Design

  8. #8
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,171
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Why not just ditch the filter and feed CSS3 to browsers that can handle it and an image to those that can't?

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,350
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

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

    So code would look like this:
    Code:
    .footer-shadow {
    filter:
        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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •