Results 1 to 8 of 8

Thread: IE8 img opacity css conundrum - Any gurus here?

  1. October 1st, 2009, 09:12 AM #1
    willwank
    willwank is offline
    D'oh!! willwank's Avatar
    Join Date
    Oct 2006
    Location
    Hamilton, ON
    Posts
    4,145

    Default IE8 img opacity css conundrum - Any gurus here?

    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.
    "If you put a thing in the center of your life, who lacks power to nourish, it will eventually destroy you, and everything you are"
    Oh btw, it's come full circle. Node/V8 - Low Level Server Side JavaScript. Benchmarked here - libs & packages here - read up here
    Other stuff:: Textpattern CMS | Vim | Douglas Crockford | GT.M db |@willwankman | 437654594
    Reply With Quote Reply With Quote
  2. October 1st, 2009, 09:28 AM #2
    jdoughs
    jdoughs is offline
    Great White North jdoughs's Avatar
    Join Date
    Jan 2009
    Posts
    513

    Default

    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
    Reply With Quote Reply With Quote
  3. October 1st, 2009, 09:38 AM #3
    KinkyRubber
    KinkyRubber is offline
    New User
    Join Date
    Sep 2009
    Location
    Tenerife
    Posts
    16

    Default

    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
    Reply With Quote Reply With Quote
  4. October 1st, 2009, 01:59 PM #4
    willwank
    willwank is offline
    D'oh!! willwank's Avatar
    Join Date
    Oct 2006
    Location
    Hamilton, ON
    Posts
    4,145

    Default

    Quote Originally Posted by KinkyRubber View Post
    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 ?
    "If you put a thing in the center of your life, who lacks power to nourish, it will eventually destroy you, and everything you are"
    Oh btw, it's come full circle. Node/V8 - Low Level Server Side JavaScript. Benchmarked here - libs & packages here - read up here
    Other stuff:: Textpattern CMS | Vim | Douglas Crockford | GT.M db |@willwankman | 437654594
    Reply With Quote Reply With Quote
  5. October 1st, 2009, 02:18 PM #5
    KinkyRubber
    KinkyRubber is offline
    New User
    Join Date
    Sep 2009
    Location
    Tenerife
    Posts
    16

    Default

    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*
    Reply With Quote Reply With Quote
  6. October 1st, 2009, 02:34 PM #6
    willwank
    willwank is offline
    D'oh!! willwank's Avatar
    Join Date
    Oct 2006
    Location
    Hamilton, ON
    Posts
    4,145

    Default

    Quote Originally Posted by KinkyRubber View Post
    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.
    "If you put a thing in the center of your life, who lacks power to nourish, it will eventually destroy you, and everything you are"
    Oh btw, it's come full circle. Node/V8 - Low Level Server Side JavaScript. Benchmarked here - libs & packages here - read up here
    Other stuff:: Textpattern CMS | Vim | Douglas Crockford | GT.M db |@willwankman | 437654594
    Reply With Quote Reply With Quote
  7. October 1st, 2009, 02:39 PM #7
    KinkyRubber
    KinkyRubber is offline
    New User
    Join Date
    Sep 2009
    Location
    Tenerife
    Posts
    16

    Default

    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.
    Reply With Quote Reply With Quote
  8. October 1st, 2009, 02:44 PM #8
    willwank
    willwank is offline
    D'oh!! willwank's Avatar
    Join Date
    Oct 2006
    Location
    Hamilton, ON
    Posts
    4,145

    Default

    Quote Originally Posted by KinkyRubber View Post
    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...
    "If you put a thing in the center of your life, who lacks power to nourish, it will eventually destroy you, and everything you are"
    Oh btw, it's come full circle. Node/V8 - Low Level Server Side JavaScript. Benchmarked here - libs & packages here - read up here
    Other stuff:: Textpattern CMS | Vim | Douglas Crockford | GT.M db |@willwankman | 437654594
    Reply With Quote Reply With Quote
« Previous Thread | Next Thread »

Posting Permissions

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

Forum Rules