<style type="text/css"> #tabsC { float:left; width:100%; background:#EDF7E7; font-size:93%; line-height:normal; } #tabsC ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabsC li { display:inline; margin:0; padding:0; } #tabsC a { float:left; background:url("tableftC.gif") no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabsC a span { float:left; display:block; background:url("tabrightC.gif") no-repeat right top; padding:5px 15px 4px 6px; color:#464E42; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabsC a span {float:none;} /* End IE5-Mac hack */ #tabsC a:hover span { color:#FFF; } #tabsC a:hover { background-position:0% -42px; } #tabsC a:hover span { background-position:100% -42px; } </style>
<div id="tabsC"> <ul> <li><a href="#" title="Link 1"><span>Link 1</span></a></li> <li><a href="#" title="Link 2"><span>Link 2</span></a></li> <li><a href="#" title="Link 3"><span>Link 3</span></a></li> <li><a href="#" title="Longer Link Text"><span>Longer Link Text</span></a></li> <li><a href="#" title="Link 5"><span>Link 5</span></a></li> <li><a href="#" title="Link 6"><span>Link 6</span></a></li> <li><a href="#" title="Link 7"><span>Link 7</span></a></li> </ul> </div>
