overflow-y hides page contents in a webkit browsers (Chrome and Safari)

Posted by Victor F on Stack Overflow See other posts from Stack Overflow or by Victor F
Published on 2011-01-06T20:52:36Z Indexed on 2011/01/06 20:53 UTC
Read the original article Hit count: 383

Filed under:
|
|
|
|

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

© Stack Overflow or respective owner

Related posts about html

Related posts about css