Image overlay not working in IE

HTML & CSS
1

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

  #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

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

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

Does the original code work in those browsers? If so, what did you change?

5

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

fyi…

2 sites - same code - 2 different results!

Site 1
Site 2

7

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

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 :frowning:

Thanks for your help.

9

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

Sorry, I miss typed the URL

The two sites, for comparison, are

Site 1
Site 2

11

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…


      <!--[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 :slight_smile:

12

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. :slight_smile: