Trouble with unordered list

I have an unordered list that I am using for a subnavigation. I can get all the link li's to work, but I can't get the non linked one to look proper

Here is the html code with javascript deciding which styling to use for each line item
<div id="solutionsNav">
<img src="../images/bstDescrip.gif"/>
<ul>
<script language="javascript">
var names = new Array(4);
names[0]="NST";
names[1]="RT";
names[2]="HST";
names[3]="BST";

var currentlocation=window.self.location;
var count;
var pagetest;

for (count=0; count <names.length; count++)
{
pagetest = new RegExp(names[count], "i");
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>");
}
}
</script>
</ul>
</div>



Here, you can see that I pick solutionsNolink as an id for the li if it refers to the page that you are on. Otherwise, it is a link (else statement). The links show up okay. I want the non linked part (white tab) to be the same size as the linked part (blue tab). but it refuses to do so.

Here is the link where you can visually see what I am talking about (sub nav where it has, BST, RT, HST, NST)

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

Here are the related style sheet entries

#solutionsNav {
margin-top: 0px;
margin-bottom: 0px;
padding-top: 0px;
background: #3399CC;
height: 23px;
}

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

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

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

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

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

#solutionsNolink {
background: #000066;
color: #000000;
float: right;
display: block;
padding: 0px;
margin: 0px;
}



I need to make the white tab the same size and position as the blue tabs, but it doesn't seem to want to let me do this. Is there a rule against changing styling in the middle of an unordered list?

Thanks.

 

right, first i am no good at JS so forgive me if i am miles out.

You are getting two results with your IF statment. One that tells JS it is a current page or not. Over here in the tag why don't you assign class to both of them. than add another tag is you CSS file for that class.

Try it as I said this class - CSS is easy way to keep property disply same. Sorry if you knew this already. good luck

 

Hi kmria,

You read the javascript correctly. Nice job. Both are actually styled. One is assigned an id (solutionsNolink) because it will only occur once on the page (because it represents the current page). For the plain li that appears to have no class or id assigned to it, it actually does have styling assigned to it through #solutionsNav li . I tried to turn all of these child defs #solutionsNav li, #solutionsNav li a, #solutionsNav li a:hover, into classes instead, and then referenced the classes on the page, but it didn't change anything.