August 21, 2008 | By | Styling

Ok, so I’m getting into my site now. The wrapper is in place, and I’m moving on to the menu:

As you can see, this isn’t your ordinary set of tabs and is causing a number of problems for browsers.

Rounded Corners

The problem with this menu is that it’s got a curved highlight hover. There are 4 different ways to curve boxes:

1. Nifty Corners:

Uses JavaScript to insert <b> 1px in height and reducing in width.

PROS: Scalable, Works on all browsers
CONS: Doesn’t support borders, Fixed Radius

2. Background image

Have a single fixed image appear in the background.

PROS: Fast loading speed, Works on all browsers, Supports borders, Flexible radius
CONS: Isn’t scalable

3. Positioned Spans

Have 4 span blocks load up inside the list item. The blocks are given a background image and are then absolutely positioned into the 4 corners.

PROS: Scalable, Adjustable radius, Supports borders
CONS: Slow loading speed, Doesn’t work well on IE6

4. CSS 3

Use the new CSS 3 rounded corner properties:

  • -webkit-border-radius (safari)
  • -moz-border-radius (firefox 3)

PROS: Fast loading speed, Scalable, Adjustable radius, Supports borders
CONS: Doesn’t work on IE and old browsers

In the end I took the CSS 3 option. The lack of curvy corners didn’t make it look dirty as it would on sites that are totally curvy.