Vertical Javascript Menu

I am trying to take the dynamicdrive script located here: http://www.dynamicdrive.com/dynamicindex17/tabcontent.htm

and make it so the tabs are verticaly aligned on the left hand side of the content box.
test page: http://dotmediaweb.com/newsite/tabtest2.html

in FireFox I have accomplished this much, but i cant seem to get the tabs to go to the same length and the script looks messy in I.E. even though it's CSS Valid according to W3C. I am at my wits end trying to get this to line up properly without killing the scripts functions.

CSS Code:

.shadetabs {
padding : 3px 0;
margin-left : 0;
margin-top : 1px;
margin-bottom : 0;
font : bold 12px Verdana;
list-style-type : none;
text-align : right;
}
.shadetabs li {
width : 475px;
height : 25px;
}
.shadetabs li a {
text-decoration : none;
position : relative;
z-index : 1;
padding : 3px 7px;
margin-right : 3px;
border : 1px solid #778;
color : #2d2b2b;
background : white url(shade.gif) repeat-x top left;
}
.shadetabs li a:visited {
color : #2d2b2b;
}
.shadetabs li a:hover {
text-decoration : underline;
color : #2d2b2b;
}
.shadetabs li a.selected {
position : relative;
top : 1px;
}
.shadetabs li a.selected {
background-image : url(shadeactive.gif);
border-bottom-color : white;
}
.shadetabs li a.selected:hover {
text-decoration : none;
}
.boxright {
padding : 1px;
border-width : 1px;
border-style : solid;
border-color : #cacaca;
height : 350px;
width : 450px;
margin-right : 700px;
float : right;
}
.tabcontent {
display : none;
}
@media print {
.boxright {
display : block !important ;
}

Code (markup):

HTML Code (tableless DIV):

<p><a href="javascript:countries.cycleit('prev')" style="margin-right: 25px; text-decoration:none">Back</a> <a href="javascript: countries.expandit(8)">Click here to select last tab</a> <a href="javascript:countries.cycleit('next')" style="margin-left: 25px; text-decoration:none">Forward</a></p>


<div id="country1" class="boxright">
Tab content 1 here<br />Tab content 1 here<br />
</div>

<div id="country2" class="boxright">
Tab content 2 here<br />Tab content 2 here<br />
</div>

<div id="country3" class="boxright">
Tab content 3 here<br />Tab content 3 here<br />
</div>

<div id="country4" class="boxright">
Tab content 4 here<br />Tab content 4 here<br />
</div>

<div id="country5" class="boxright">
Tab content 4 here<br />Tab content 5 here<br />
</div>

<div id="country6" class="boxright">
Tab content 4 here<br />Tab content 6 here<br />
</div>

<div id="country7" class="boxright">
Tab content 4 here<br />Tab content 7 here<br />
</div>

<div id="country8" class="boxright">
Tab content 4 here<br />Tab content 8 here<br />
</div>

<div id="country9" class="boxright">
Tab content 4 here<br />Tab content 9 here<br />
</div>

<ul id="countrytabs" class="shadetabs">
<li><a href="#" rel="country1" class="selected">All Assets---</a></li>
<li><a href="#" rel="country2">Video Games</a></li>
<li><a href="#" rel="country3">Shopping----</a></li>
<li><a href="#" rel="country4">Services-----</a></li>
<li><a href="#" rel="country5">Video---------</a></li>
<li><a href="#" rel="country6">Community--</a></li>
<li><a href="#" rel="country7">Application--</a></li>
<li><a href="#" rel="country8">Domains-----</a></li>
<li><a href="#" rel="country9">Development</a></li>
</ul>

<script type="text/javascript">

var countries=new ddtabcontent("countrytabs")
countries.setpersist(true)
countries.setselectedClassTarget("link") //"link" or "linkparent"
countries.init()

</script>

Code (markup):