Korny’s blog

I’ve been playing in the wonderful world of css - partly for work, and partly for fun.

I wanted to have fluid sized, png-based, rounded-corner dialogs for a web site. This is something that has been solved many times, but not (as far as I can see) for internet explorer 6 - which still has a big share of the browser market.

The best solution I’ve found for other browsers is the one by Scott Schiller at Schillmania - http://www.schillmania.com/content/projects/even-more-rounded-corners/ - which uses a single image, with cunning sprite tricks to get it into position. But on ie6, it has to revert to gif images.

The problem is, you can use pngs on ie6 - most simply, by using the iepngfix.htc behaviour trick (see http://www.twinhelix.com/css/iepngfix/) - but it has one big problem - you can’t align the png images to the right or bottom, so most of the usual tricks used to display corners don’t work.

So, I’ve been hacking around with ways to do corners where all the images are top-left aligned. I have a solution, I’m not sure it’s perfect, but it works - see the demo page at http://www.sietsma.com/korny/corner_test/test.html. This works in ie6, ie7, Firefox 2 and 3, and Safari.

Some caveats:

- it uses the iepngfix.htc behaviour - I experimented with using the Microsoft AlphaImageLoader stuff directly, but iepngfix does some tricks that I can’t reproduce easily, so for now I’m using the code directly.

- it’s a long way from semantic markup; there are a number of divs in there just to make it look right. I can’t see a way around this - I could make some javascript to turn a semantically-nice html page into the mess shown, which might be a good idea - but the end result would be the same (and doing it in javascript can make for ugly corner loading, and hassles re-running the javascript if you populate stuff via ajax). Anyone with hints on how to make this more web-standards-friendly, please tell! I’m still pretty new to the world of front-end stuff.

- there’s a bit of fiddling to make links work properly - the ie png stuff causes screwups if you use relative or absolute positioning on a div with a background image, and then add links to it.  So I had to mess around a bit to work around this - and I probably need to mess around more to make it cleaner.

- there are some ie-specific bits in there, added via conditional comments; at least one of them was pure trial-and-error to get things lining up right!

- there is probably more work needed to make padding and things consistent across browsers.

I’ll try to blog more later about the details, and about how I generated the images…