Microsoft Windows Vista Community Forums - Vistaheads
Recommended Download



Welcome to the Microsoft Windows Vista Community Forums - Vistaheads, YOUR Largest Resource for Windows Vista related information.

You are currently viewing our boards as a guest which gives you limited access to view most discussions and access our other features. By joining our free community you will have access to post topics, communicate privately with other members (PM), respond to polls, upload content and access many other special features. Registration is fast, simple and absolutely free so , join our community today!

If you have any problems with the registration process or your account login, please contact us.

Driver Scanner

IE8 issue with opacity and hover

microsoft.public.internetexplorer.general






Speedup My PC
Reply
  #1 (permalink)  
Old 07-14-2009
span_nflx
 

Posts: n/a
IE8 issue with opacity and hover
Noticed buggy behavior with rendering in IE8 standards mode. From what I can
tell, it looks like when opacity filter is applied to a parent element,
a:hover styles for the child elements aren't getting applied properly.

Here's the html markup that can be used to reproduce the problem. In the
first example, items turn red on hover as expected. In the second example,
items don't turn red on hover (caused by opacity filter). Make sure you set
to IE8 standards mode.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<style type="text/css">
body { background:
url(http://cdn-0.nflximg.com/us/pages/me...ette_cereb.jpg)
no-repeat; width: 950px; }
h1 { margin: 10px 200px; text-align: center; }
.bar { padding: 20px; border: 1px solid black; }
.foo a { background-color: yellow; display: block; padding: 2px; border:
1px solid black; }
.foo a:hover { background-color: red; color: #666; paddings: 10px; }

#ex1 { background-color: white; width: 700px; }
#ex1 { position: absolute; left: 100px; top: 100px; }
#ex2 { background-color: white; width: 700px; }
#ex2 { position: absolute; left: 100px; top: 300px; }
#ex2 {
opacity: .70;
filter: alpha(opacity=70);
filter: progidXImageTransform.Microsoft.Alpha(opacity=70 );
-moz-opacity: .70;
}
</style>
</head>

<body>
<h1>Example of opacity hover bug in IE8 standards mode</h1>
<div id="ex1" class="bar">
<span>Item background turns red on :hover as expected</span>
<div class="foo"><a href="#">Item1</a></div>
<div class="foo"><a href="#">Item2</a></div>
<div class="foo"><a href="#">Item3</a></div>
</div>
<div id="ex2" class="bar">
<span>Using opacity filter. Item background <em>don't</em> turn red on
:hover.</span>
<div class="foo"><a href="#">Item1</a></div>
<div class="foo"><a href="#">Item2</a></div>
<div class="foo"><a href="#">Item3</a></div>
</div>
</body>

</html>

Reply With Quote
Sponsored Links
  #2 (permalink)  
Old 09-03-2009
negleden
 

Posts: n/a
RE: IE8 issue with opacity and hover
filter: progidXImageTransform.Microsoft.Alpha(opacity=70 );
yes, this directive works, but it's generate an alert about trying to run
activex or something dangerous element.
Which user will allow that for see a transparent element on web site?!

"span_nflx" wrote:

> Noticed buggy behavior with rendering in IE8 standards mode. From what I can
> tell, it looks like when opacity filter is applied to a parent element,
> a:hover styles for the child elements aren't getting applied properly.
>
> Here's the html markup that can be used to reproduce the problem. In the
> first example, items turn red on hover as expected. In the second example,
> items don't turn red on hover (caused by opacity filter). Make sure you set
> to IE8 standards mode.
>
> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
> "http://www.w3.org/TR/html4/strict.dtd">
> <html>
>
> <head>
> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
> <style type="text/css">
> body { background:
> url(http://cdn-0.nflximg.com/us/pages/me...ette_cereb.jpg)
> no-repeat; width: 950px; }
> h1 { margin: 10px 200px; text-align: center; }
> .bar { padding: 20px; border: 1px solid black; }
> .foo a { background-color: yellow; display: block; padding: 2px; border:
> 1px solid black; }
> .foo a:hover { background-color: red; color: #666; paddings: 10px; }
>
> #ex1 { background-color: white; width: 700px; }
> #ex1 { position: absolute; left: 100px; top: 100px; }
> #ex2 { background-color: white; width: 700px; }
> #ex2 { position: absolute; left: 100px; top: 300px; }
> #ex2 {
> opacity: .70;
> filter: alpha(opacity=70);
> filter: progidXImageTransform.Microsoft.Alpha(opacity=70 );
> -moz-opacity: .70;
> }
> </style>
> </head>
>
> <body>
> <h1>Example of opacity hover bug in IE8 standards mode</h1>
> <div id="ex1" class="bar">
> <span>Item background turns red on :hover as expected</span>
> <div class="foo"><a href="#">Item1</a></div>
> <div class="foo"><a href="#">Item2</a></div>
> <div class="foo"><a href="#">Item3</a></div>
> </div>
> <div id="ex2" class="bar">
> <span>Using opacity filter. Item background <em>don't</em> turn red on
> :hover.</span>
> <div class="foo"><a href="#">Item1</a></div>
> <div class="foo"><a href="#">Item2</a></div>
> <div class="foo"><a href="#">Item3</a></div>
> </div>
> </body>
>
> </html>
>

Reply With Quote
Reply


Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

vB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off

Similar Threads
Thread Thread Starter Forum Replies Last Post
sidebar opacity =?Utf-8?B?UGV0ZXIgTy4=?= microsoft.public.windows.vista.general 4 11-09-2009 13:24
png32(alpha) with css opacity issue lunter microsoft.public.internetexplorer.general 0 09-01-2008 18:23
IE 7 issue with appendChild with opacity Daniel microsoft.public.internetexplorer.general 3 08-09-2008 22:51
Sidebar always on top, but with opacity? Curt B microsoft.public.windows.vista.general 3 02-02-2008 16:43
Sidebar opacity dev microsoft.public.windows.vista.general 4 05-14-2007 14:25




All times are GMT +1. The time now is 19:23.




Driver Scanner - Free Scan Now

Vistaheads.com is part of the Heads Network. See also XPHeads.com , Win7Heads.com and Win8Heads.com.


Design by Vjacheslav Trushkin for phpBBStyles.com.
Powered by vBulletin® Version 3.6.7
Copyright ©2000 - 2014, Jelsoft Enterprises Ltd.
Search Engine Optimization by vBSEO 3.6.0 RC 2

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120