IE 7 - strict - table bug

Thread view:

Enable EMail Alerts

Start New Thread

Thread rating:

Gary - 15 Jul 2008 00:59 GMT

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"><html 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.getElementById("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="addText(); return false;">add text</a>

</body>
</html>

Reply to this Message

dorayme - 15 Jul 2008 03:37 GMT

In article
<7616e128-459f-400f-b8a1-6457280918c1@i76g2000hsf.googlegroups.com>,

> Hello folks,
> I have a simple bug that defies my ability to find a work around. In
[quoted text clipped - 18 lines]
> <style>
> #box { border:1px solid #000; height:70px; width:50%; overflow:auto;

As far as I see there is a clash between your specification of width of
100% and your wish to clear the scrollbar. This happens in many
browsers, try adding width: 100%; to the P in:

<http://dorayme.890m.com/alt/scrollBoxTest.html>

I have tested in IE 6 and it behaves as with FF and Safari with and
without the width. With the width at 100%, it grabs the whole width of
the div box, the scroll bars grab a set piece of space *on top"

Signature

dorayme

Reply to this Message

Webmaster Forum / HTML, CSS, Scripts / CSS / July 2008

IE 7 - strict - table bug