MikePadgett.com

More IE woes: the curved corner DIV

— Rendering CSS rounded corners is still surprisingly difficult thanks to inconsistently-applied browser standards.”

In my current efforts to adhere to div-only layouts, it was expected that I would eventually get to a sticky point.

I’m not used to hacking CSS, so progress for me has been slow. Hacking CSS is something of an unnatural process, particularly when you feel most comfortable you’re coding pages fluently from a design.

Of course, it’s not the CSS that’s the problem, it’s the browsers. Or perhaps I should say, the browser. For as Dunstan shows, curved corners are not especially difficult with selectors. It’s good old Internet Explorer that has the issues.

The Microsoft response is particularly horrid, manifested in an abhorrence of nested divs. As someone later pointed out, the whole point of good CSS is that unnecessary markup is removed.

“The drawback to this solution,” owns MS’ Markus Mielke, “is that the code can be difficult to read, and you can end up with convoluted HTML that’s hard to maintain. The DIVs really have no reason to be in the code other than to provide insertion points for each corner, since you can’t put all the images in one DIV.” But that’s his solution, over and above which he suggests we try Google. Great.

If you can get past the invective that was hurled at this by way of response, you certainly find some alternatives that do cater for IE in this particularly thorny area. Though it contains some javascript workings, Alessandro Fulciniti’s “Nifty Corners” solution is one of the tidiest, with Roger Johansson’s cross-browser and transparency effort one of the cleverest.

Finally, a good little tool to help overcome the alien div-only methodology are fu2k.org’s layout test pages- very handy for figuring out the whats and the whys!