There's no need to repeat the tabs three times. You can just change the styles on the tabs to reflect which one is active.
This way, you can use those floated tabs (I haven't implemented them, out of laziness.
I cleaned out the unneeded JavaScript, as well.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1"><title>Tab Interface Sample :: Small Initiatives</title><!-- Styles to drive tab interface - move to a linked file if you prefer -->
There's no need to repeat
There's no need to repeat the tabs three times. You can just change the styles on the tabs to reflect which one is active.
This way, you can use those floated tabs (I haven't implemented them, out of laziness.
I cleaned out the unneeded JavaScript, as well.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1"><title>Tab Interface Sample :: Small Initiatives</title><!-- Styles to drive tab interface - move to a linked file if you prefer -->
<style type="text/css">
<!--
body { margin: 0; padding: 0; }
#tabmargin { margin: 20px 40px 20px 40px; }
table, td { margin: 0; padding: 0; border: 0; border-collapse: collapse; }
.tabnav a, .tabnav a:link, .tabnav a:visited { display: block; height: 16px; font-family: verdana, arial, sans-serif; font-size: 12px; line-height: 11px; background-color: #666; color: #eee; margin-right: 4px; padding: 2px 3px 0 3px; text-decoration: none; }
.tabnav a:hover, .tabnav a:focus { background: #999; color: #ff9; }
.tabnav a:active { background-color: #fff; color: #00f; }
.tabnav a.tabselected, .tabnav a.tabselected:link, .tabnav a.tabselected:visited { background-color: #ffc; color: #000; cursor: text; margin-right: 4px; }
.contentblock { padding: 10px; background-color: #ffc; color: #000; font-family: verdana, arial, sans-serif; }
.contentblock p { font-size: 11px; }
#tab1, #tab2, #tab3 { display: none; }
-->
</style><!-- Javascript permits switching between tab contents - move to linked file if you prefer -->
<script type="text/javascript">
<!--
// START tab script
// Adapted from "Javascript + CSS + DOM Magic" by Makiko Itoh
// define variables for "if n4 (Netscape 4), if IE (IE 4.x),
// and if n6 (if Netscape 6/W3C-DOM compliant)"
var n4, ie, n6;