By mamasdiner on

I'm hoping someone can keep me from pulling the last hair out of my head over this issue.

I have created blocks and placed them in the header region. Inside two blocks are slideshows created using Views. The issue is not with the slideshow images.

I have a different background image for each block and have specified a background color as well.
All looks well in both Firefox and Safari, but Internet Explorer 7 & 8 show the background color overlayed on top of the background image.
The fade and everything works fine it's just the background color showing when it shouldn't. I can see the background image is there when the page loads and also around the edges of the background images.

I have searched the forums and tried everything I can think of. I have tweeked my css file, removing background colors, adding transparency, etc. to no avail and am ready to throw in the towel.

When I used the developer tool on Internet Explorer I thought I had located the problem as being the filter: alpha(opacity=0); code since when I removed it I was able to see the background image, however, when I try that now it does not work.

My theme is Acquia Prosper and I'm also using Skinr. I've upgraded to the latest releases of all modules.

The url in question: www.rexranch.com

Thanks in advance for your help.
Heather

⋅ Categories: Drupal 6.x

Comments

theabacus’s picture

theabacus commented 
<div class="views_slideshow_singleframe_slide views_slideshow_slide views-row-1 views_slideshow_singleframe_hidden views-row-even">
<div class="views_slideshow_singleframe_slide views_slideshow_slide views-row-2 views_slideshow_singleframe_hidden views-row-even">
<div class="views_slideshow_singleframe_slide views_slideshow_slide views-row-3 views_slideshow_singleframe_hidden views-row-even">

and so on...

They all have an inline style "alpha(opacity=0) BACKGROUND-COLOR: #715812", which is causing a problem. My guess is the alpha property works in FF and Safari not in IE, thus it is not a problem in real browsers. You can use IE 8 developer tools to see it better.

mamasdiner’s picture

mamasdiner commented

Thanks for your quick reply!

I did notice the code you mention when using IE's Developer tool, but I have no idea where this is located in my css files?

I have been through all of them searching specifically for "alpha(opacity=0)" and even looked in module folders such as views, but still can not figure out where or how this line of code is being added or how to delete it.

Any ideas?

Thanks again!

theabacus’s picture

theabacus commented

It won't be in your CSS file since it is inline. Most likely it is added by some Javascript (jQuery) dynamically...although it could be added by the PHP code (views template perhaps?).

mamasdiner’s picture

mamasdiner commented

I've looked through the Views folder and found opacity in a "tabs.js" file, but not alpha(opacity=0).

I also found "opacity" in the jquery.cycle.all.min file in the Views Slideshow module folder. However, not "alpha(opacity=0)".

It looks like the jquery.cycle.all.min file has quite a few "opacity:1" and "opacity:0" I just don't know which one to change since I'm sure what the code is referring to preceding opacity.

I read another post that suggested changing "cleartypeNoBg" from false to true, but that did not work for me.

Any more ideas?

mamasdiner’s picture

mamasdiner commented

I can't believe I didn't see this sooner!

Go to Sitebuilding > Views
Go to the view created for the slideshow.
Click on Slideshow settings (wheel looking icon to the right).
Scroll ALL the way down and at the bottom you will see Internet Explorer Options.
Click to expand.
Choose False for ClearType. It even says "Some background issues could be fixed by setting this to false."
I left ClearType Background to False.
Click on Update.
Make sure you Save the view since you can not see the changes after clicking update. (at least I couldn't)
Then refresh the browser.

Background image shows correctly now.

Hope this helps someone else to not waste as much time as I did.

loophole080’s picture

loophole080 commented

i'd almost given up the will to live trying to fix this in css!

kettultim’s picture

kettultim commented

When you turn ClearType off it renders the font terribly in IE. Is there a better fix for this? Perhaps some hardcoding within the js? I can't seem to find where it dictates those inline styles.

kettultim’s picture

kettultim commented

I think a better fix to this solution is to keep ClearType set to "true" and set the ClearType background to True. This way when the slide is on it's paused state, the type will render clearly in IE. When animated, it looks rough but hey, this is IE.. no one should be using it anyway.

vunger’s picture

vunger commented

This comment makes me wish there were "Like" links in Drupal the way there are in Facebook.

dalehgeist’s picture

dalehgeist commented

That's the ticket.

lias’s picture

lias commented

This worked for me perfectly. Thanks!

Ftegg’s picture

Ftegg commented

Mamasdiner, I'm sure I feel as grateful as you would have if someone had given you this information when you were getting exasperated over the CSS files.
So, a massive thank you for posting this!!

videobored’s picture

videobored commented

I was so glad to find this thread, as it sounds like exactly the problem I am having. I have turned on/off the cleartype flags in the slideshow settings, but it doesn't make a difference in my particular case. Can any of you guys think of anything else I can try? I'm pulling my hair out. It works fine in everything except IE8 (7 & 9 are fine).

This is the in-progress site:
http://184.106.75.105/

If I disable the scripts the images show (but don't animate, obviously). If I disable styles, the images show and animate, although the layout breaks of course. The gray color is set as the background for HTML and for body. Removing those declarations makes no difference. There is no background color set for the slideshow divs or wrappers.

Any help would be greatly appreciated!
-=vb=-

stephenplatz’s picture

stephenplatz commented

Weeeeee! Thanks, I'm glad I found this post before I pulled my hair out!

frazras’s picture

frazras commented

works perfectly

"I would rule the world - If only I had the source code"
R.A.Smith -- "ƒrÅzRâ§"
http://www.exterbox.com

scotwith1t’s picture

scotwith1t
Location Birmingham, AL
commented

So glad I checked here! I started to think it was just an IE bug I would just have to figure out, but it started becoming apparent that it was a module setting...wonder if this is cross-posted to views_slideshow anywhere!?

scotwith1t’s picture

scotwith1t
Location Birmingham, AL
commented

I find it ridiculous that here i am almost a year later and i'm the next comment on this again, having the same exact issue again with views slideshow! :) i wonder if this should be set by default...hmmm...either way, it made me giggle to find myself here in this node again.