List items

I think I made this too difficult when I asked before, so i thought I could simplify it.

I have 4 links in a sub nav, all which are list items

If the page address matches the address of the li link, then it is styled one way (not linked, white background, black text. If it's not, the li is styled another way, blue background, white text, hyperlinked. It doesn't seem to like changes like this on list items right in the middle of an unordered list. Is anybody truly familiar with the ambiguities of list items? I want the same exact size ansd horizontal location for the white unlinked tab (BST) as it is for the other blue tabs, but it drops down. Also, even though ?I have on on hover white border for the top, left and right

I use javascript to write this part of the page and here it is, but don't worry, all it's doing is deciding whether the li will have one style or another

if (pagetest.test(currentlocation))
{
document.write("<li id='solutionsNolink'>" + names[count] + "</li>");
}
else
{
document.write("<li><a href='solutions" + names[count] + ".asp'>" + names[count] + "</a></li>");
}

Here are the related style sheet entries

#solutionsNav {
margin: 0px;
padding: 0px;
background: #3399CC;
height: 25px;
}

#solutionsNav img {
padding-top: 6px;
padding-left: 12px;
padding-bottom: 0px;
margin: 0px;
float: left;
vertical-align: bottom;
}

#solutionsNav li {
font-family: Verdana, Arial, Helvetica;
font-size: 12px;
border-top: solid 1px #3399CC;
border-left: solid 1px #3399CC;
border-right: solid 1px #3399CC;
border-bottom; solid 0px #3399CC;
margin: 0px;
float: right;
}

#solutionsNav li a {
color: #FFFFFF;
background: #000066;
border-top: solid 1px #3399CC;
border-left: solid 1px #3399CC;
border-right: solid 1px #3399CC;
border-bottom; solid 0px;
padding-bottom: 2px;
padding-top: 2px;
padding-left: 10px;
padding-right: 10px;
}

#solutionsNav li a:hover {
border-top: solid 1px #FFFFFF;
border-left: solid 1px #FFFFFF;
border-right: solid 1px #FFFFFF;
border-bottom; solid 0px;
}

#solutionsNav ul {
padding-right: 10px;
padding-top: 6px;
padding-bottom: 0px;
padding-left: 0px;
margin: 0px;
list-style: none;
}


#solutionsNolink {
background: #FFFFFF;
test-decoration: none;
color: #000000;
float: right;
margin: 0px;
padding-bottom: 2px;
padding-top: 2px;
padding-left: 10px;
padding-right: 10px;
}

Here's the related html where I build the list and call the javascript listed above (subNav() to decide the styling

<div id="solutionsNav">
<img src="../images/bstDescrip.gif"/>
<ul>
<script language="javascript">
subNav();
</script>
</ul>
</div>

The problems are as follows.

1) I cannot make the blue tabs and the white tab line up vertically (white tab drops down)

2) IE ignores the bottom padding for the blue tabs

3) IE picks up the white border for the left and right sides of the blue tab for the hover, but ignores the specs for the top border, whereas opera and mozilla are fine with this (white border on top left and right on hover) Tabs are named BST, HST, RT, NST

Here's the visual

http://www.comh.com/web07test/solutions/solutionsBST.asp

I hope someone's an expert in here. Normally I thought I could solve any problem, but this one's really got me. A very obscure subtlety I am missing. Thanks to anyone in advance