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 */
It is not a straightforward process to create a rounded corner border in css that stretches both horizontally and vertically, and won't look bad when the page gets too small, AND also looks good in Firefox for Mac and PC, Safari for Mac, and IE for PC.
Here is one solution:
Click this link to view example
This is based on Example 5 of
Creating Liquid Layouts with Negative Margins
by Ryan Brill