First things first, so far I have been using the technique described by Douglas Bowman in his post Sliding Doors of CSS in my projects, this technique however isn’t perfect in both a technical and usability point of view but it was the best available so far in my opinion, some of the issues I have with it are:

1. The left part of the tab is not clickable without the use of javascript (so user hovers and tries to click but nothing happens);
2. You need 1 image that is very long applied to the HTML element a to “fake” a dynamic effect;
3. In order to use this technique for buttons you need to add an extra unnecessary HTML element around it like a div or a span.

To see my point you can check out one of his samples here

Now I would like to turn this around and introduce a new technique which follows these target rules:

1. The styling must be applieable to 1 HTML element so we don’t need to “clutter” our HTML pages with unnecessary HTML elements saving some data transmission (altough small);
2. The button or tab must be fully clickable over the parts the user can see;
3. The button or tab must follow the principals of Unobtrusive Javascript (so it must look and be hoverable like a button even when javascript is disabled);
4. It must work flawless in all the latest of commonly used W3C compliant browsers (Firefox / IE8 / Opera / Safari / Chrome);
5. It must be true dynamic with the use of a maximum of 3 images (forming the left and right corners and the middle part) for each state (normal / hover / active etc..);
6. The rounded corners must be able to have a transparent background to overflow nicely into the design behind it (so you don’t have to make alot of buttons with different backgrounds);

Current issues with this technique

It will not work in IE6 or IE7 and some other older browsers, it will however still be usable for your users, but they will look a bit worse. I didn’t had the time to figure out some “nice” “hacks” which you can include by using IE6 / IE7 only stylesheets. Due to some other issues it will also not work in for example FF2 and Opera 8.01, it does work however in all major new browsers.

Outcome of current tests with this technique

So far I tested this technique on the following system / browsers combinations:

The following list is tested and is working 100% and will look like the image below.

Mac OS X:

• Firefox 3.5
• Firefox 3.0.11
• Safari 4

Windows:

• Internet Explorer 8
• Chrome 2.0
• Opera 9.64

Linux:

• Firefox 3.0.11

Tested but not working 100%, see resulting images for the current issues.

Windows:

• Firefox 2.0
• Opera 8.01
• IE 7 / IE 6

The technique

What CSS 2.1 techniques will we use exactly?

We will use the following new techniques available to us:

• The pseudo elements :before and :after;
• Generated content using the content property;

Creating a button

In this article I will only describe the Button from the final example to explain the technique, the tab isn’t that different though and is visible in the final example.

Step 1: The HTML structure

Put down the following HTML structure in your HTML document:

<div class="component-button-container">
  <a class="component-button" href="#">Button 1</a>
  <a class="component-button" href="#">Button 2 slightly longer.</a>
</div>

Step 2: The images

The next thing we need is some images, the following is a list of images I quickly created using GIMP with some article on the internet wich I can’t remember anymore . I needed a total of 6 images for each component wich formed the left middle and right of 2 states.

Button – Normal state:

• Left corner
• Middle
• Right corner

Button – Hover state:

• Left corner
• Middle
• Right corner

I am not a designer so they are suppose to look crap and are merely used for the example . Download these button images and upload them to some dir on your webserver.

Step 3: Doing some CSS

Now it’s time to do some CSS magic, in the example which I provide at the end I have put the most important CSS for clearance into embedded CSS, which means it has been put between the following tags straight in the HTML document served:

&lt;<span class="start-tag">style</span><span class="attribute-name"> type</span>=<span class="attribute-value">"text/css"</span>&gt;&lt;/style&gt;

.component-button:before, .component-button:after {
display: inline-block;
width: 7px;
content: '\a0'; /* Hexcode for non-breaking space */
}

.component-button:before {
background: transparent url('samples/img/component-button-normal-left.png') no-repeat top left;
margin-left: -7px;
padding-left: 10px;
}

.component-button:after {
background: transparent url('samples/img/component-button-normal-right.png') no-repeat top right;
margin-right: -7px;
padding-right: 10px;
}

.component-button:hover:before {
background-image: url('samples/img/component-button-hover-left.png');
}

.component-button:hover:after {
background-image: url('samples/img/component-button-hover-right.png');
}

<pre id="line11">.component-button {
display: block;
float: left;
background: transparent url('samples/img/component-button-normal-middle.png') repeat-x top left;
height: 20px;
line-height: 20px;
margin: 0 7px;
}
<pre id="line11">.component-button:hover {
background-image: url('samples/img/component-button-hover-middle.png');
}

The "display: block" ensures that we can influence the height of the HTML element and the float will make it display nicely next to another button. The "margin: 0 7px;" ensure that other buttons are not rendered above this HTML element.

The final example of this technique can be found here it also contains some added styling to make it look somewhat better and it has styling / example for the tabs asswel.

Your comments

If you found some way to fix the minor issues in the FF2 / Opera 8.01 browsers or have successfully made it work in IE6 and / or IE7, feel free to post your comment and share it with me and the rest

Update 2011-08-12:
Since writing this article the web has moved forward fast, nowadays I would not bother to create rounded effects (altough archievable using some javascript) but create it using CSS3, for a good resource check out Super Awesome Buttons with CSS3 and RGBA by Mark.

This in my opinion is the a new milestone for webdevelopers with the long awaited full support of the W3C CSS 2.1 specification allowing us webdevelopers to create good semantic / clean styled webpages.

Ofcourse we can’t drop support for IE6 / IE7 just yet (or can we?), atleast we can start by following others in the industry and warn our visitors about there use of an old / insecure / inferieur browser and encourage them to upgrade, so in the end we will be able to spend the time otherwise lost in fixing quirks on focussing more on the quality of our websites.

Ill be upgrading my websites with a nice message asswel and post the method I used.

Also don’t be shy to post / “spam” any bugs to the Microsoft developers at their blog.

Soon the world will be a better place

Well that is ofcourse if I can find the time / interesting stuff to post