I met a wired problem for a web page in IE7/8. The page configured to be dir="rtl". And divRow is made very large width so as its containing div doesn't wrap.
Click the editor area, type some words, then click the "Hello world" text. The layout will turns to be messy, because the offset and width of div with divRow class changed.
I suppose this is a IE7/8 bug. Is there any way to workaround this?
Basically, divRow must to have its contained div not wrap.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style>
div
{
border: 1px;
border-color: black;
}
.divRow
{
/* this is to make its containing div not to wrap */
min-width: 2000px;
}
div.divEditor
{
width: 100%;
}
iframe
{
height: 100%;
width: 100%;
}
</style>
<script>
function $(id)
{
return document.getElementById(id);
}
function focusToRight()
{
var elem = $("innerDiv1");
function fcs()
{
elem.focus();
}
setTimeout(fcs, 1);
}
</script>
</head>
<body dir="rtl">
<div>
<div id='main'
style="overflow: hidden; position: relative; width=100%">
<div class="divRow" id="firstRow">
<div style='float:right' id='innerDiv1'>
Hello world.
</div>
<div style='float:right' id='innerDiv2'>
This is to make it is very very very very very very very very
very very very very very very very very long
</div>
</div>
<div class="divEditor">
<iframe id="editorIFrame" onbeforedeactivate="focusToRight();"
src="about:blank"></iframe>
</div>
</div>
</div>
<script>
//document.getElementById('main').style.width='40px';
//$("editorIFrame").document.designMode = "on";
document.frames["editorIFrame"].document.designMode = "On";
</script>
</body>
</html>