Hello folks,
I have a simple bug that defies my ability to find a work around. In
IE7 strict-mode, if you have a table with width 100% in a DIV block..
the content will appear UNDER the div's scrollbar. If you switch to
quirks-mode the problem goes away - meaning the table width adjusts to
accomodate the scrollbar.
To see, display the follow html and click "add text" until you get a
scrollbar. Some text will appear under the scrollbar. Remove the
doctype tag, and reload, to go into quirks-mode, and the problem is
not reproducable.
Anyone know what is going on, or have a work around?
Thank you!
Gary
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><ht ml lang="en"
xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<html>
<head>
<style>
#box { border:1px solid #000; height:70px; width:50%; overflow:auto;
overflow-x:hidden }
#text1 { background:#fff ; }
#text2 { background:#fcc ; }
</style>
<script>
function addText(){
var el = document.getEle mentById("text2 ");
el.innerHTML += "a ab a abc a abcd a abcde";
}
</script>
</head>
<body>
<div id=box>
<table width=100%>
<tr><td width=50%>
<div id=text1>test test</div>
</td>
<td>
<div id=text2>test test</div>
</td></tr>
</table>
</div>
<a href="#" onclick="addTex t(); return false;">add text</a>
</body>
</html>
I have a simple bug that defies my ability to find a work around. In
IE7 strict-mode, if you have a table with width 100% in a DIV block..
the content will appear UNDER the div's scrollbar. If you switch to
quirks-mode the problem goes away - meaning the table width adjusts to
accomodate the scrollbar.
To see, display the follow html and click "add text" until you get a
scrollbar. Some text will appear under the scrollbar. Remove the
doctype tag, and reload, to go into quirks-mode, and the problem is
not reproducable.
Anyone know what is going on, or have a work around?
Thank you!
Gary
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><ht ml lang="en"
xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<html>
<head>
<style>
#box { border:1px solid #000; height:70px; width:50%; overflow:auto;
overflow-x:hidden }
#text1 { background:#fff ; }
#text2 { background:#fcc ; }
</style>
<script>
function addText(){
var el = document.getEle mentById("text2 ");
el.innerHTML += "a ab a abc a abcd a abcde";
}
</script>
</head>
<body>
<div id=box>
<table width=100%>
<tr><td width=50%>
<div id=text1>test test</div>
</td>
<td>
<div id=text2>test test</div>
</td></tr>
</table>
</div>
<a href="#" onclick="addTex t(); return false;">add text</a>
</body>
</html>
Comment