Dialog layout problem in Internet Explorer Standard Compliance mode
I've found a bug with dialog layout with Internet Explorer when
DOCTYPE says that this document is standard compliant. The dialog
content is shifted more and more after each dialog opening. I suppose
ii is caused by different block size calculation is such mode.
How to reproduce:
1. create html document with dialog and <!DOCTYPE html PUBLIC "-//W3C//
DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/
xhtml1-transitional.dtd">
2. open dialog
3. close dialog and open it again.
Here is example HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="jquery-ui-
themeroller.css"/>
<script src="jquery-1.2.6.js"></script>
<script src="jquery-ui-1.6rc2.js"></script>
<script>
$(document).ready(function(){
$('#confirm').dialog({
autoOpen: false,
modal: true,
overlay: { 'background-color': '#000',
'filter': 'alpha(opacity=75)',
'-moz-opacity': 0.75,
'opacity': 0.75 },
resizable: false,
width: 300,
height: 150,
buttons: { 'Yes': function() {
var form = $('form.confirmable').get(0);
if (!form.onsubmit || form.onsubmit() !=
false) {
form.submit();
}
$(this).dialog('close'); },
'No': function() { $(this).dialog('close'); } }
});
});
</script>
<style>
html,body {
font-size: 8pt;
font-family: Tahoma, Verdana, Arial, sans-serif;
}
</style>
</head>
<body>
<input type="button" value="Open dialog"
onclick="$('#confirm').dialog('open')"/>
<div id="confirm" title="Confirmation">
Are you sure you want to commit these changes?
</div>
</body>
</html>