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

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 */