CSS for Navigation Designs

Buttons Done Right: Image + Text

For semi-graphical buttons we want to use regular text on top of a graphical backgroun. Again, the following method uses the following XHTML code:

		<ul id="nav_menu">
			<li><a href="#">Solutions</a></li>
			<li><a href="#">Services</a></li>
			<li><a href="#">Pricing</a></li>
			<li><a href="#">Portfolio</a></li>
			<li id="about_us"><a href="#">About Us</a></li>
		</ul>
	

Each also assumes that the basic list-look has been thwarted as follows:

		ul#nav_menu { 
			list-style-type: none; 
			margin: 0; 
			padding: 0; 
		}
		
		ul#nav_menu li { margin: 0; padding: 0; }
	

Semi-Graphical Buttons

This too is a pretty easy concept: give the anchor element a background image that looks like a single button. Here's our background:

First, let's prepare the li and anchor element for the background by setting display to be block-level for the anchor and matching the height and width of our image:

		ul#nav_menu li { margin: .5em 0; padding: 0; }
		ul#nav_menu li a { 
			display: block;
			width: 120px;
			height: 32px;
		}
	

We also want to set it up so that the text is formatted properly. That is, so that the text, if made larger by the browser, doesn't overflow or wrap. This really isn't a great thing to do for accessibility reasons, and there are some mildly complex ways around it, but those can wait for now:

		ul#nav_menu li a { 
			display: block;
			width: 120px;
			height: 32px;
			white-space: nowrap;
			overflow: hidden;
		}
	

Now let's give the anchor our image as a background:

		ul#nav_menu li a { 
			display: block;
			width: 120px;
			height: 32px;
			white-space: nowrap;
			overflow: hidden;
			background: url("images/button_bg.gif") no-repeat;
		}
	

And before we take a look, let's make sure the text is styled:

		ul#nav_menu li a { 
			display: block;
			width: 120px;
			height: 22px;
			white-space: nowrap;
			overflow: hidden;
			background: url("images/button_bg.gif") no-repeat;
			font-family: Verdana,sans-serif;
			font-size: 85%; 
			color: #fff;
			text-align: center;
			text-decoration: none;
			padding: 5px 0;
		}
	

Be sure to subtract any top/bottom padding from the height of the element!

This code results in the following presentation in standards-compliant browsers:

One problem: non-standard browsers, like IE on Windows, don't always calculate padding as part of the height, resulting in this:

As interesting as it may look, it does cut our buttons in half. Let's use the IE child trick to get around this.

First, we ignore the padding in terms of the anchor's height:

		ul#nav_menu li a { 
			display: block;
			width: 120px;
			height: 32px;
			white-space: nowrap;
			overflow: hidden;
			background: url("images/button_bg.gif") no-repeat;
			font-family: Verdana,sans-serif;
			font-size: 85%; 
			color: #fff;
			text-align: center;
			text-decoration: none;
			padding: 5px 0;
		}
	

Then we write a second rule right after this rule that relies on the child selector syntax, which IE is blind to, to change the way standard-compliant browsers display this:

		ul#nav_menu li > a { height: 22px; }
	

IE ignores this; other browsers take this property in the cascade and apply it.

I promised I would show you how to avoid using white-space: nowrap and overflow: hidden with buttons. The technique relies on the sliding doors method, which we will cover later in the page on graphic tabs.

Now lets move on to buttons which are purely graphical.