Geek Answers Handbook

Extremely strange IE7 / 8 border / opacity compatibility issue

A strange problem is the disappearance of borders when Opacity is applied in IE / 8/9, but NOT in 7!
I basically have a tabbed menu at the top of the screen. Ie:

<table> <tr> <td class="tab">button 1...<*/td> <td class="tab">button 2....<*/td> . . . </tr> </table> <style> td { opacity: 0.45; filter:alpha(opacity=45); . . . } td.tab:hover { opacity: 1; filter:alpha(opacity=100); }

Sorry for the stars, I could not handle the code formatting correctly.
Basically, it’s just assumed that you press the buttons when the mouse moves on them, but the borders just disappear! This problem occurs only in IE8 / 9, but everything works fine on IE7, FF, Chrome, Safari.
I wasted the Internet looking for some weird IE8 + border / opacity issues, but it didn't seem to be there.
Has anyone come across something similar?

+7
source share
2 answers

The filter style is only for IE7 and below.

IE8 requires the use of -ms-filter (i.e. with a vendor prefix). Plus, the syntax is more complicated in IE8. It looks like this:

 -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";

IE9 fully supports filter support and replaces it with standard CSS3 opacity , which works the same as in all other browsers.

Quirksmode.org contains complete information: http://www.quirksmode.org/css/opacity.html

+3
source

This is what I have discovered so far, I don’t think that removing the background-color your table cells may be the solution for you.

 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <style type="text/css"> table {border-top:1px solid #cccccc; border-left:1px solid #cccccc;} table td {border-bottom:1px solid #cccccc; border-right:1px solid #cccccc; padding:3px;} table tr.opaque td { -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter:alpha(opacity=100); opacity:1;} /* By adding background-color below, the table borders cells disappears in IE8. It just the nth Microsoft trigger tree! IE7 does not have this issue. */ table tr.opaque td {background-color:#ffffff;} </style> </head> <body> <table border="0" cellpadding="0" cellspacing="0"> <tr><td><p>column 1</p></td><td><p>column 2</p></td><td><p>column 3</p></td></tr> <tr class="opaque"><td><p>column 1</p></td><td><p>column 2</p></td><td><p>column 3</p></td></tr> <tr><td><p>column 1</p></td><td><p>column 2</p></td><td><p>column 3</p></td></tr> </table> </body> </html>

And this is a great result when background color is applied on IE8 :

enter image description here

0
source

More articles:


All Articles