IE8 img opacity css conundrum - Any gurus here?

willwank · October 1st, 2009, 08:12 AM

Im strugeling to set a a:hover img opacity in IE8. Think Iv tried every possible solution now, gotten codeblind and can't figure this one out.
This is what I got:

THE HTML

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
            "http://www.w3.org/TR/html4/strict.dtd"> /*strict for Internet Explorer 8*/

..... snip .....

<table class="effect" cellspacing="0" cellpadding="0" border="0">
<tr>
<td>
{foreach from=$hof var=$gallery counter=$counter}
<div class="thumbbox">
<a href="xpgt/click.php?id={$gallery.gallery_id|urlencode}&l=thumb&g=default&u={$gallery.gallery_url|urlencode}" target="_blank" title="{$gallery.description|htmlspecialchars}"><img src="{$gallery.preview_url|htmlspecialchars}" border="0" alt="{$gallery.description|htmlspecialchars}" width="200" height="147"></a>
</div>
{/foreach}
</td>
</tr>
</table>

It's tgpx code.

THE CSS

Code:

.effect
{
	margin:0px 0px 0px 2px;
	padding:0px 0px 0px 0px;
}

.thumbbox
{
	float:left;
	width:203px;
	height:149px;
	margin:0px 0px 0px 0px;
	padding:0px 0px 0px 0px;
	background:url('thumbback.png')no-repeat;	
}

.thumbbox img
{
	width:200px;
	height:147px;
	margin:0px 0px 0px 0px;
	padding:0px 0px 0px 0px;
}

.thumbbox a:hover img
{
filter:alpha(opacity=80); /*for Internet Explorer 6/7*/
filter:"alpha(opacity=80)"; /*for Internet Explorer 8*/
-moz-opacity:0.80;
opacity:0.80;
}

I have tried to set a class on the anchor itself, the img tag and the td tag. To no avail in IE8. Have tried tons of diff ways here. The way I got it now works fine in FF and Opera but not in IE8. It used to work in IE6/7 but I havn't checked. I read somewhere that IE8 doesn't support pseudo classes like setting a hover on a img tag so I tried setting it on the a tag but IE8 didn't like that either. Lost here so any help and input is greatly appriciated.

jdoughs · October 1st, 2009, 08:28 AM

I cant spot an error but I can offer this link, I used it a few times to get hover opacity.

Css3 opacity: transparency of an element in css

The examples do work in FF and IE8 (did not test in 6/7)

KinkyRubber · October 1st, 2009, 08:38 AM

Hi willwank,

change this:

Code:

.thumbbox a:hover img
{
filter:alpha(opacity=80); /*for Internet Explorer 6/7*/
filter:"alpha(opacity=80)"; /*for Internet Explorer 8*/
-moz-opacity:0.80;
opacity:0.80;
}

into:

Code:

.thumbbox a:hover img
{
filter:alpha(opacity=80); /*for Internet Explorer 6/7*/
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
-moz-opacity:0.80;
opacity:0.80;
}

and then it works fine.

Regards
Tina

willwank · October 1st, 2009, 12:59 PM

Quote:

Originally Posted by KinkyRubber

Hi willwank,

change this:

Code:

.thumbbox a:hover img
{
filter:alpha(opacity=80); /*for Internet Explorer 6/7*/
filter:"alpha(opacity=80)"; /*for Internet Explorer 8*/
-moz-opacity:0.80;
opacity:0.80;
}

into:

Code:

.thumbbox a:hover img
{
filter:alpha(opacity=80); /*for Internet Explorer 6/7*/
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
-moz-opacity:0.80;
opacity:0.80;
}

and then it works fine.

Regards
Tina

Thanks for the alternative but it didn't make any difference for me. However, Im not able to get the example images in the link jdoughs provided to show any opacity either. I have now removed IE7 and 8 completely from my pc and reinstalled IE8 from scratch without any add-ons or toolbars, all default settings. Still no opacity

Can someone see if they get any opacity with IE8 on thumb hover on publicsexclip.com/index2.php ?

KinkyRubber · October 1st, 2009, 01:18 PM

It can't work on IE8 'cause you haven't any rules for the IE opacity in your Stylesheet.

You only have in your "colors-Green.css":

Code:


.thumbbox a:hover img
{
   filter:"alpha(opacity=80)";
  opacity:0.80;
}

and it has to be this rule:

Code:

.thumbbox a:hover img
{
filter:alpha(opacity=80); /*for Internet Explorer 6/7*/
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
-moz-opacity:0.80;
opacity:0.80;
}

Most of the problems in programming are caused by the persons in front of the Computer.*smile*

willwank · October 1st, 2009, 01:34 PM

Quote:

Originally Posted by KinkyRubber

It can't work on IE8 'cause you haven't any rules for the IE opacity in your Stylesheet.

You only have in your "colors-Green.css":

Code:


.thumbbox a:hover img
{
   filter:"alpha(opacity=80)";
  opacity:0.80;
}

and it has to be this rule:

Code:

.thumbbox a:hover img
{
filter:alpha(opacity=80); /*for Internet Explorer 6/7*/
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
-moz-opacity:0.80;
opacity:0.80;
}

Most of the problems in programming are caused by the persons in front of the Computer.*smile*

Hehe, I know

The rules are there, I just changed them for a second to try out something. Doesn't make any diff for me in IE8 regardless how it's done. ctrl+r and youll see.

KinkyRubber · October 1st, 2009, 01:39 PM

On my system Windows 7 with IE8 it works. The only difference to FF is: in FF is a "play-button" shown with the opacity in IE8 not.

willwank · October 1st, 2009, 01:44 PM

Quote:

Originally Posted by KinkyRubber

On my system Windows 7 with IE8 it works. The only difference to FF is: in FF is a "play-button" shown with the opacity in IE8 not.

Ok, thanks

Something odd with my IE installation then. Hmmm... strange. What could cause my IE to not show the opacity...

October 1st, 2009, 08:28 AM	#2 (permalink)
jdoughs Great White North Join Date: Jan 2009 Posts: 433	I cant spot an error but I can offer this link, I used it a few times to get hover opacity. Css3 opacity: transparency of an element in css The examples do work in FF and IE8 (did not test in 6/7) __________________ linkspun - Premier Adult Link Trade Community - ICQ - 464/\281/\250

October 1st, 2009, 01:18 PM	#5 (permalink)
KinkyRubber New User Join Date: Sep 2009 Location: Tenerife Posts: 16	It can't work on IE8 'cause you haven't any rules for the IE opacity in your Stylesheet. You only have in your "colors-Green.css": Code: .thumbbox a:hover img { filter:"alpha(opacity=80)"; opacity:0.80; } and it has to be this rule: Code: .thumbbox a:hover img { filter:alpha(opacity=80); /for Internet Explorer 6/7/ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; -moz-opacity:0.80; opacity:0.80; } Most of the problems in programming are caused by the persons in front of the Computer.smile

October 1st, 2009, 01:39 PM	#7 (permalink)
KinkyRubber New User Join Date: Sep 2009 Location: Tenerife Posts: 16	On my system Windows 7 with IE8 it works. The only difference to FF is: in FF is a "play-button" shown with the opacity in IE8 not.