ansaurus

Question

Answer 1

A:

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

Artic 2010-03-11 14:17:11

The example is simplified. In the real product I'm positioning various things inside the cell and it helps a lot to be able to position them relative to the cell.

CiscoIPPhone 2010-03-11 14:21:34

Answer 2

A:

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.

Robusto 2010-03-11 14:47:15

How exactly they don't go together? Care to elaborate abit more?

easwee 2010-03-11 15:38:27

For one thing, if anything sets a px or % width on the div it can either under-flow the cell or overflow it. Even without that, a div in a td can cause unexpected whitespace to appear above or below the div that can't be accounted for ... and it may only show up in one column when all the others seem fine. But it throws off your layout. Do they work sometimes? Sure. But that markup pattern caused me enough headaches that I got tired of tweaking, tweaking, tweaking and just dumped the whole thing. Seriously, what does it buy you?

Robusto 2010-03-11 15:55:55

The cells in question are my table header cells. They contain text, which is not allowed to wrap but can be cut off if the cell isn't wide enough to contain all the text. In addition to this the cells contain a table sort indicator and a resize handle to change the size of the cell. All this would be very difficult without divs or spans. Using easwees solution it does what I want so I'll see how it goes.

CiscoIPPhone 2010-03-11 16:25:13

Answer 3

+1 A:

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"&gt;
    <html xmlns="http://www.w3.org/1999/xhtml"&gt;
    <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>

easwee 2010-03-11 15:37:35

ansaurus

tags:

views:

answers:

IE horizontal scroll problem

related questions