This code has been tested in FireFox ans IE6/7. I haven't had the opportunity to test it on a Mac, but it should work fine.
What you need:
- A graphics editor (Photoshop, The GIMP, Pain Shop Pro, whatever)
- A text editor (like Crimson Editor or Notepad)
- Caffeine (optional)
Step 1: Making The Images
This is the background image for our sub-nav menu (the bar directly below the tabs). The only technical requirement here is that the image be 25px in height, in order to work with the CSS I'm supplying.
This small image is essentially just a 1-2px wide vertical line, again, 25px in height, that will serve as a separator between our sub-nav elements. Hint: Make the image 2px side and use a light line next to a dark line to create a beveled look.
This is the background image for our main menu tabs. My tabs are 90px wide and 29px high (oops.... I was off by one).
Of course, if you don't feel like making your own images, you can always grab these....