Maybe I need to start off smaller - I cant even get the tabs to work proper.

I am trying to use a set of css based tabs
This is the css code Im attempting

Code:
#tab_header {
      float:left;
      width:100%;
      background:#DAE0D2 url("../images/tabbg.png") repeat-x bottom;
      font-size:93%;
      line-height:normal;
      }
    #tab_header ul {
      margin:0;
      padding:10px 10px 0;
      list-style:none;
      }
    #tab_header li {
      float:left;
      background:url("../images/loff.png") no-repeat left top;
      margin:0;
      padding:0 0 0 9px;
      }
    #tab_header a {
      display:block;
      background:url("../images/roff.png") no-repeat right top;
      padding:5px 15px 4px 6px;
      text-decoration:none;
      font-weight:bold;
      color:#202020;
      }
    #tab_header a:hover {
      color:#336699;
      }
    #tab_header #tab_current {
      background-image:url("../images/lon.png");
      }
    #tab_header #tab_current a {
      background-image:url("../images/ron.png");
      color:#336699;
      padding-bottom:5px;
      }

Then I am replacing in categories_tab.php
Code:
$link = '<a class="' . $new_style . '" href="' . zen_href_link(FILENAME_DEFAULT, 'cPath=' . (int)$categories_tab->fields['categories_id']) . '">' . $categories_tab_current . '</a>';
    echo $link;
    $categories_tab->MoveNext();
  }
with
Code:
$link = '<div id="tab_header"><ul><li><a href="' . zen_href_link(FILENAME_DEFAULT, 'cPath=' . (int)$categories_tab->fields['categories_id']) . '">' . $categories_tab_current . '</a></li></ul></div>';
	echo $link;
	$categories_tab->MoveNext();
But it just stacks every tab in its own unordered list.
I tried adding the div and ul in separate lines but that didnt change anything either.

1 more note - I also started getting forbidden access warnings when it went haywire.

Is there anything written on this - all the threads I saw in the search dealing with the category_tabs says they are left for customization but I need to figure out how.

Thanks for any advice.