A quick note to developers that are styling elements that use monospace fonts (pre, code, q, etc). Be aware that some browsers, like Safari and Chrome, have their own fixed-width font size preference, which by default is set to 13px. This upsets proceedings when you apply a proportional (% or em) font-size to the body.

There are three solutions to counter this problem:

1. Apply font-size to each element separately
2. Remove monospace from the font stack and treat it as a variable spaced font
3. Use a fixed font size

Firefox and Internet Explorer have a single default font size so you can’t apply a larger size to monospace elements.

On the same subject, Google Chrome users can also set different default sizes for their serif and sans-serif fonts. By default these are identical so it will not affect the styling for the majority of users.

IE6 is broken.

#menu ul.level2 li {
display: block;
}

#menu ul.level2 li a {
display: block;
float: none;
border: 1px solid transparent; /* Stops the box from jittering on hover */
margin: 0.25em 0px;
padding: 0.3em 0.6em;
background: transparent;
color: #666666;
font-weight: normal;
}

#menu ul.level2 li a:hover {
background: #f36e45 url(../images/menu-level2-bg-hover.gif) left top repeat-x;
color: #ffffff;
border: 1px solid #f2683d;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
}

2 major problems. There is a large margin on the bottom of my list items, and there is a funny dark grey border around each list item. So why these 2 bugs?

Grey Border

The grey border is caused by IE6′s failiure to render transparent borders. It instead falls back to the color property (which in this case is set to #666666).

This is the first place on my site where I need to render something differently in IE6 to other browsers. There are 2 ways of doing this:

1. Use the famous ‘* html’ hack. IE has a mysterious wrapper around the html tag (god only knows why!).
2. Include another stylesheet for IE6

For a site of this size, the sensible option was to include a separate stylesheet for IE and below. The stylesheet should only render in IE5 and 6 because of the @import hack (hides the stylesheet from all v4 browsers):

<!--[if lt IE 7]>

<mce:style type="text/css" media="screen"><!  @import "style/ie6.css"; -->

<!--[endif]-->

To fix the border, we set the border color to a color we’ll never use within the element or on any of it’s children – pink is usually a good bet. We then apply the Microsoft CSS filter property to that color to make it transparent.

#menu ul.level2 li a {
border-color: pink;
filter: chroma(color = pink);
}

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.