So I have a table that is contained within a div. The table is larger than the div. I don't want to resize the div by hand and all browsers except IE resize it to contain the whole table automatically. Without any overflow attribute changes, IE makes the last td overlap with the containing div's border. If I set overflow: auto;, IE adds scroll bars and the other browsers still just resize the containing div.
While we have a temporary fix in the aforementioned solution of using overflow: auto;, I don't think the client will be much happier with the scroll bars than they are with the element overlapping the border. Is there something I can do to make IE behave as the other browsers without manually resizing the containing div explicitly? Perhaps a display: property?
An image of the overlap can be seen at http://i.stack.imgur.com/lwWUk.png .
All help appreciated. Thanks very much everyone.
Just to be sure, you are using a DOCTYPE, aren't you? If not, IE will be going into quirks mode, which will trigger all kinds of odd layout incompatibilities. In fact, the other browsers will also go into quirks mode without a doctype, but it'll be quirky in different ways. With a doctype, they all go into standards mode, which should eliminate a large proportion of the weird layout glitches you may get.
If this does apply to you, then add the following line to the top of you HTML:
If that doesn't help, it's hard to diagnose exactly what is causing your problem without some code that replicates it. The graphic you supplied does help but isn't sufficient. A good way to share the problem is to re-create it with a snippet of code in JSFiddle, and share that (a lot of questions here are solved this way).