[jQuery] Trouble with BlockUI in IE 7
(If this is a duplicate post, I'm sorry. I created it on the Nabble
Forums before I joined the mailing list, so it ended up on the forum,
but the mailing-list didn't accept it.)
Hi,
I ran into a problem with BlockUI when I tried to use it on one of my
company's old sites (so please, don't get started on the awful table-
based layout). The overlay and the message are incorrectly positioned.
I can make it work by hacking the code to use the IE6 absolute
positioning code.
Here's an example page to recreate the problem:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>BlockUI Test Page</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.block.js"></script>
<script type="text/javascript">
function block() {
$.blockUI();
window.setTimeout('$.unblockUI()', 5000);
return false;
}
$(function() { $('td').click(block) });
</script>
<style type="text/css">
* {
margin: 0;
padding: 0;
font-size: 130%;
text-align: center;
}
.table {
border: 0;
height: 100%;
width: 100%;
border-collapse:collapse;
}
.cell1 {
background-color: #CCFFCC;
}
.cell2 {
background-color: #FFCCCC;
}
.cell3 {
background-color: #CCCCFF;
}
</style>
</head>
<body>
<table class="table">
<tr>
<td colspan="2" class="cell1">Click to block</td>
</tr>
<tr>
<td class="cell2">Click to block</td>
<td class="cell3">Click to block</td>
</tr>
</table>
</body>
</html>
Cheers,
C-J