G
Guest
I found an annoying bug. Please, see the following HTML.
<!doctype html public "-//w3c//dtd html 4.0 strict//en">
<html>
<head>
<style>
.test { border: solid 1px #000; }
</style>
</head>
<body>
Goal is to have a inner DIV element that hides the overflow.
<h1>Bug</h1>
<table width=200px border=1>
<tr>
<td width=100px>TD1</td>
<td width=100px>TD2<br>
<div style="width:100px" class=test>
[Div1]
<div class=test>
[Div2]
<div class=test>
[Div3]
<div style="overflow:hidden;width:100%"
class=test>ThisIsAVeryLongStringThatWillOverflow</div>
</div>
</div>
</div>
</td>
</tr>
</table>
Notice that despite the fact the long string has
"overflow:hidden;width:100%", it is truncated by the browser,
but the DIV takes the original space to render, thus, affecting the size
of TD2
<hr>
<h1>Workaround</h1>
<table width=200px border=1>
<tr>
<td width=100px>TD1</td>
<td width=100px>TD2<br>
<div style="width:100px" class=test>
[Div1]
<div style="position:relative;overflow-x:hidden;width:100px" class=test>
[Div2]
<div class=test>
[Div3]
<div class=test>ThisIsAVeryLongStringThatWillOverflow</div>
</div>
</div>
</div>
</td>
</tr>
</table>
</body>
</html>
<!doctype html public "-//w3c//dtd html 4.0 strict//en">
<html>
<head>
<style>
.test { border: solid 1px #000; }
</style>
</head>
<body>
Goal is to have a inner DIV element that hides the overflow.
<h1>Bug</h1>
<table width=200px border=1>
<tr>
<td width=100px>TD1</td>
<td width=100px>TD2<br>
<div style="width:100px" class=test>
[Div1]
<div class=test>
[Div2]
<div class=test>
[Div3]
<div style="overflow:hidden;width:100%"
class=test>ThisIsAVeryLongStringThatWillOverflow</div>
</div>
</div>
</div>
</td>
</tr>
</table>
Notice that despite the fact the long string has
"overflow:hidden;width:100%", it is truncated by the browser,
but the DIV takes the original space to render, thus, affecting the size
of TD2
<hr>
<h1>Workaround</h1>
<table width=200px border=1>
<tr>
<td width=100px>TD1</td>
<td width=100px>TD2<br>
<div style="width:100px" class=test>
[Div1]
<div style="position:relative;overflow-x:hidden;width:100px" class=test>
[Div2]
<div class=test>
[Div3]
<div class=test>ThisIsAVeryLongStringThatWillOverflow</div>
</div>
</div>
</div>
</td>
</tr>
</table>
</body>
</html>