I've got a 100% width table inside a div with a fixed width and overflow-y:scroll set. Works great in FF. In IE6, the table comes out too wide -- it does the 100% and then adds the scroll bar. If I remove the doctype, it works, but I'm pretty sure I'm stuck with the doctype I've got. Are there any work-arounds for this? I'd rather not specify the widths of my tables in px.

Here's my code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>TABLE WIDTH TEST</title>
</head>

<body style="background:#ccc;">
    <div style="width:500px; border:1px solid #999; background:#eee; margin-bottom:10px;">
        I'm 500 px wide. (Just for comparison.)
    </div>
    <div style="width:500px; height:50px; overflow-y:scroll; border:1px solid #999; background:#eee;">
        I'm wider in IE6.
        <table style="width:100%">
            <tr>
                <td>Some</td>
                <td>Data</td>
                <td>Goes</td>
                <td>Here</td>
            </tr>
            <tr>
                <td>Some</td>
                <td>Data</td>
                <td>Goes</td>
                <td>Here</td>
            </tr>
            <tr>
                <td>Some</td>
                <td>Data</td>
                <td>Goes</td>
                <td>Here</td>
            </tr>
        </table>
    </div>
</body>
</html>

1 answer

0
points

I recommend putting all of your CSS in a separate, linked file. Make another file for IE 6 fixes and link to it using conditional comments: http://www.quirksmode.org/css/condcom.html

Make your adjustments for IE 6 in the iefix.css file. I know you don't want to use pixels, but since the box modal for IE 6 is a disaster, you probably will have to.

Answered about 7 years ago by Abinadi Ayerdis