overflow-y hides page contents in a webkit browsers (Chrome and Safari)
- by Victor F
Hi,
I am currently making our website to be supported by all major browsers and I've met a very strange problem - oveflow-y attribute caused my data to be hidden. Below I've got an oversimplified code sample that works in IE and Firfox, but which doesn't work in Safari and Chrome. This is a 100% valid code and I am not sure why it doesn't display properly in webkit browsers.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body style="height: 100%;">
<form action="Webkit_Problem.html" style="height: 100%;">
<table style="height: 100%;>
<tr>
<td>
<div style="overflow-y: auto; height: 100%;>
THIS SHOULD BE VISIBLE
</div>
</td>
</tr>
</table>
</form>
</body>
</html>
http://www.alocet.com/VictorsTestFolder/Webkit_Problem.html (Live sample here)
The only way to get it working is either remove the height:100% attributes for div or a table tag (which will ruin the purpose of my html), or add height:100% to html tag
Does anyone has any suggestions?
Thank you
