First of all, pardon me for my English, it still needs a lot of work, but as I have some non-dutch people in my contact list, I will write in English from now on.

At this moment there is a big hype around CSS3 and HTML5. But we still have some issue with one of the major browsers: Internet Explorer. As all web developer know, this browser is old fashioned.
With plain css1 and css2.1 a lot is possible.

Today I will show something I recently used at work. To be honest, I never thought of the idea, I have no clue why, but I just did not think of it… Until I actually needed it.

I was creating a bar on the bottom of the browser viewport, and I wanted to make it all as small as possible.

I had an image:


And I had some blue background. Personally I think this is not very beautiful. As not all browsers support rounded corners properly, I created a single image which is big enough to put behind the image. (On the site it is part of a sprite, but for this example I only needed the actual background image)

What I did looks like the following:


Which looks much nicer.. What I did?

img {
    background: url(/img/img-bg.png);
    padding: 12px 11px;
}

Well, how easy is that?

Enjoy!