Cross-Browser Horizontal CSS Menu (Tabbed menu)

Example page spurred by MaxDesign's Listamatic page and its apparent lack of horizontal menus that work properly in Internet Explorer 5.0 in windows.

See also the related weblog entry for discussion.

The Styled menu

• Home
• Example (this page)
• Products
• About

The HTML code used

<ul class="menu hack"
    ><li><a href="#">Home</a></li
    ><li class="active"><a href="#">Example</a><span class="stream"> (this page)</span></li
    ><li><a href="#">Products</a></li
    ><li><a href="#">About</a></li
  ></ul>

The CSS code used

.menu {
  list-style : none;
  font-family : Verdana, sans-serif;
  font-size : 11px;
  font-weight : bold;
  border-top : .09em solid #e8e8e8;
  border-bottom : .09em solid #bbb;
  padding : 0;
  margin : 0 0 1em 0;
  height : 2.18em;
  background : #ddd url("menu-bak.gif") 0px 50% repeat-x;
}

.menu .stream { display : none; }

.menu li {
  display : inline;
}
.menu a {
  position : relative;
  margin-top : -.09em;
  float : left;
  border : .09em solid #e8e8e8;
  border-bottom : .09em solid #bbb;
  border-right : .09em solid #bbb;
  padding : .45em 10px .54em 16px;
  background : #ddd url("tab-bak.gif") 0px 50% no-repeat;
  text-decoration : none;
}
* html .menu a { margin-bottom : -.09em; }

.menu .active a {
  background-position : -400px 50%;
  border-left : none;
  border-right : none;
  border-bottom : none;
  padding-bottom : .54em;
}

.menu-ie5mac a { padding-bottom : .27em; }
.menu-ie5mac .active a { padding-bottom : .36em; }

.menu a:link,
.menu a:visited {
  color : #039;
}
.menu a:hover,
.menu a:active {
  color : #900;
  background-position : -200px 50%;
}

hr { clear : both; }

The menu was tested in the following browsers:

• Windows

  • Mozilla Firebird 0.6.1: OK
  • IE 6.0: OK
  • IE 5.0: OK
  • Opera 7.02: OK
  • Opera 6.01: Some padding appears inside <ul> tag below the tabs. :-(

• MacOSX

  • IE 5.22: OK
  • Camino 0.6.1: OK
  • Safari 1.0: A dark 1 pixel border appears below the tabs. :-(

Már Örlygsson - mar@anomy.net - http://mar.anomy.net/