Extremely weird IE7/8 border/opacity compatibility issue
The weird problem is borders disappearing when Opacity is applied in IE/8/9, but NOT in 7!
I've basically got a menu with tabs on 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 about the stars, I couldn't get the code block formatting working right.
Basically this is just supposed to unfade the buttons when the mouse is hovered over them, but the borders just disappear! This problem only occurs on IE8/9, but everything works fine on IE7,FF,Chrome,Safari.
I've trawled the internet looking for some weird IE8+ border/opacity issues, but there don't seem to be any.
Has anyone encountered something similar?
The filter style is for IE7 and lower only.
IE8 requires you to use -ms-filter (ie with a vendor prefix) instead. Plus the syntax is more complex in IE8. It looks like this:
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
IE9 drops support for filter entirely, and replaces it with standard CSS3 opacity , which works the same as it does in all other browsrs.
Quirksmode.org has the full details: http://www.quirksmode.org/css/opacity.html
This is what I discovered so far, I don't think removing background-color of your table cells could be a 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's just the nth Microsoft's 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 the beautiful result when background-color is applied on IE8 :
