Tables stretch beyond borders of floated divs in IE for PC

Posted on by

I created a rounded corner border for a web application using styled div’s.

see also: “Stretchy rounded corner borders without tables”

Some of the application’s pages display search-results in complex tables with many spanned columns and malformed cells. TheCSS rounded-corner borders are set to stretch to 100% of the page width, but in IE, the contained tables will not shrink to fit inside the borders without making major modification to many parts of the table-generating code. So, the tables stretch beyond the CSS border. The same pages look fine in Firefox and Safari, however.

I found that the way to control them is to give the containing div a height – any height – but only in IE.

The following code does the trick:

/********************border styles****************/
/*the following keeps tables widths within floated div boundaries in IE*/
/* Hides from mac */
* html #main {height: 1%;}
/* End hide from  mac */