Good Evening,
I recently discovered an issue with one of my applications and IE for
opaciyt and was able to simplify the issue to share with others.
When using filter CSS property in IE to control opacity a table block
can get cropped / truncated when another field in the same parent
table changes it's filter settings.
I was able to resolve the issue by reducing the number of Tables used
in the form but thought others may be interested in the issue; basic
solution was to replace the outer Table with a div block. Pardon the
JavaScript, I am sure this can be re-produced with just pure CSS but
this took me quite a lot of simplifying to get it to this ;)
This issue only affects IE and I think it is related to their filter
property. I verified with IE 7 and IE 6.
[Q] Has anybody else seen this issue and is there a resolution while
still allowing nested tables?
Here is the test code:
<html>
<head>
<title>Opacity Bug in IE</title>
</head>
<body>
<table width="400px">
<tbody>
<tr>
<td style='background: #eeeeee; border: 1px solid
navy'>
<table>
<tbody>
<tr>
<td>
<div
onclick="this.style.filter=null">
Click Me
</div>
</td>
</tr>
</tbody>
</table>
<table style="filter:alpha(opacity=50); -moz-
opacity: 0.5; opacity: 0.5; border: 1px solid navy" width="100%">
<tbody>
<tr>
<td style='background:
#888888'>This will Crop.</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</body>
</html>
~
Cheers,
- JsD
--~--~---------~--~----~------------~-------~--~----~
--
You received this because you are subscribed to the "Design the Web with CSS"
at Google groups.
To post: [email protected]
To unsubscribe: [email protected]
-~----------~----~----~----~------~----~------~--~---
