SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Enthusiast
    Join Date
    Mar 2009
    Posts
    44
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Image overlay not working in IE

    Hi,

    I am using the following css to create an overlay but it still isn't working in IE. Can anyone suggest what I might need to do to have the desired effect?

    The image and overlay can be seen here

    Code:
      #slider .slideoverlay{
        /* Fallback for web browsers that doesn't support RGBa */
        background: rgb(255, 255, 255);
        /* RGBa with 0.6 opacity */
        background: rgba(255, 255, 255, 0.8);
        /* For IE 5.5 - 7*/
        filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#ddffffff, endColorstr=#ddffffff);
        /* For IE 8*/
        -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ddffffff, endColorstr=#ddffffff)";
        position: absolute;
        bottom: 0px; left: 0px;
        width: 825px; padding: 8px 18px 0px 12px;
        height: 72px;
        font-size: 28px; line-height: 31px;
        overflow: none;
      }
    Thanks,
    Rachel

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,301
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Hi Rachel,

    Which version(s) of IE is this failing in? And what is not working? When you use a script like this, it's best to keep track of any changes you make and test in each browser at each point so that you can identify where the problem starts. Normally a script like this will be designed to work in all browsers.

  3. #3
    SitePoint Enthusiast
    Join Date
    Mar 2009
    Posts
    44
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    It's actually failing in 7,8 and 9! The weird thing is that I'm using a similar image slider in another website (same css) and it works fine so I'm wondering if I need to alter something else?

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,301
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Does the original code work in those browsers? If so, what did you change?

  5. #5
    SitePoint Enthusiast
    Join Date
    Mar 2009
    Posts
    44
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I made changes to the layout of the image slider so a few tweaks to the css file but I've just tested the original css and still no joy (although it IS still working on the other site!)

    This has baffled me!

  6. #6
    SitePoint Enthusiast
    Join Date
    Mar 2009
    Posts
    44
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    fyi..

    2 sites - same code - 2 different results!

    Site 1
    Site 2

  7. #7
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,301
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    It could well be styles for other elements on the page causing trouble. If you create a page with just the gallery and its CSS, does it work? If so, then gradually add in the styles for the rest of the page and see where things go wrong. It could also be a JS issue, I guess.

  8. #8
    SitePoint Enthusiast
    Join Date
    Mar 2009
    Posts
    44
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm wondering if it might be a js issue. I have actually created the page with just the image slider and it's still not working

    Thanks for your help.

  9. #9
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,301
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    What if you create a page with just the original slider. Does it work in IE? Or is there an example page with it working in IE (Your first link above was offline).

  10. #10
    SitePoint Enthusiast
    Join Date
    Mar 2009
    Posts
    44
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry, I miss typed the URL

    The two sites, for comparison, are

    Site 1
    Site 2

  11. #11
    SitePoint Enthusiast
    Join Date
    Mar 2009
    Posts
    44
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    I was just about to copy the original image slider into it's own page and I realised there was an extra bit of css in the head of the page...

    Code:
          <!--[if IE]>
          <style type="text/css">
            #slider .slideoverlay{
              background: transparent;
            }
          </style>
          <![endif]-->
    I've applied it to my problem image slider and it's working fine now!!

    Thanks for your perseverence, these things can be so frustrating!

    Rachel

  12. #12
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,301
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Great, glad you got it! I thought to my self, as I posted here, that you may just figure it out yourself with enough moral support. It's amazing how often that happens.


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
  •