I am a Web Designer

Here’s an oddity. Opera, the underused and almost forgotten power in the browser wars prides itself on its rendering of web standards compliant code. It comes as some surprise then to me, that it is still so underpowered where css3 is concerned. But that’s by-the-by. As a consequence of this lack of support, I must check over my designs in Opera after I’ve employed some CSS3 specific styling.

So, after applying some border-radius styling to my navigational hyperlinks, right here on shubox.net, and knowing full well that Opera does not yet support the border-radius property, I check out the look to make sure that all’s well and there are no nasty surprises. But on this occasion there was a remarkable consequence!

You can see from the above image, that Opera somehow splits the background borders on the contact and services links when going to a new line. This behaviour makes no sense at all and I’m surprised at Opera.

Luckily, I immediately wondered what would happen if I used another little-used CSS property: inline-block. This effectively creates a self-contained block-level element while allowing it to remain inline within it’s parent. As you can see from the next image, this did the trick.

You can see that the ‘contact’ link is now happily inline and unbroken. Adding inline block meant that the link became too padded – this is due to the element now occupying it’s own space and taking it’s relative size values from the line-height rather than font-size. A little CSS ‘fixing’ was needed to stop the links looking bloated. Specifying the line-height for the element and removing most of the existing padding was sufficient to regain its previous elegance.

As a matter of interest, those viewing this article, and indeed this website on a browser that doesn’t support the CSS3 border-radius standard (Opera, and all versions IE most significantly), here’s how the rest of us see those links.

So much prettier don’t you think?