CODEWITHSUNDEEP
htmlcssinternet-explorerstrict
CiscoIPPhone
CiscoIPPhone

Reputation: 9477

IE horizontal scroll problem

When scrolling the div the table cells move, but the cell text stays in the same position relative to the page. The cell text should scroll along with the cell even though it's in a relative div.

The problem can only be seen in IE (IE7 at least). The sample behaves correctly in Chrome and Firefox.

   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
        <title>IE Bug Demo</title> 
    </head>
    <body>
        <div style='width: 500px; height: 100px; overflow:auto'>
        <table style='width: 1000px; background-color: #ff00ff;'>
            <tr>
                <td style='border: 3px solid black'><div style='position:relative;'>One</div></td>
                <td><div style='position:relative;'>Two</div></td>
            </tr>
        </table>
        </div>
    </body>
    </html>

Any ideas?

Upvotes: 0

Views: 4195

Answers (3)

easwee
easwee

Reputation: 15905

This should do the trick:

   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
        <title>IE Bug Demo</title> 
    </head>
    <body>
        <div style="width:500px;height:100px;overflow:auto;position:relative;">
        <table style="width: 1000px; background-color: #ff00ff;">
            <tr>
                <td style="border:3px solid black;"><div style="position:relative;">One</div></td>
                <td><div style="position:relative;">Two</div></td>
            </tr>
        </table>
        </div>
    </body>
    </html>

Upvotes: 2

Robusto
Robusto

Reputation: 31883

DIVs in TABLE TDs don't play nice together. I would avoid this markup pattern at all costs. There is a lot of difference in the way IE and the rest handle the conflicts, and it just becomes a huge headache.

Upvotes: 0

Artsiom Anisimau
Artsiom Anisimau

Reputation: 1179

Try to remove position:relative . And keep in mind - avoid style definition in html without need. Keep them in css

Upvotes: 0

Related Questions