I'm currently having some trouble with a CSS based navigation design.

Whilst building my initial home page using Dreamweaver MX, the design has appeared as it should whilst previewing the design in IE5 & IE6.

Since uploading the home page I have experienced some problems. When first visiting the URL, everything appears as it should, but a second visit results in all of my a:link styles appearing as standard text links. Meanwhile the a:hover styles appear as they should.

Does anyone have any clue why this is happening?

The URL is www.hier-asl/test.htm

The attached CSS style sheet appears as follows:

body {
background-color: #FFFFFF;
background-image: url(Images/back-grad_02.jpg);
background-repeat: repeat-x;
}
.box a:link {
border-left-width: 2px;
border-left-color: #FFFFFF;
border-left-style: solid;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
color: #003399;
text-decoration: none;
text-align: center;
margin: 0px;
background-image: url(Images/nav-slice.jpg);
background-repeat: repeat-x;
height: 19px;
width: 90px;
padding-top: 2px;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #003366;
}
.box a:hover {
border-left-width: 2px;
border-left-color: #FFFFFF;
background-repeat: repeat-x;
border-left-style: solid;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
color: #003399;
text-decoration: none;
text-align: center;
margin: 0px;
padding: 2px;
background-image: url(Images/nav-over.jpg);
height: 19px;
width: 90px;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #003366;
}
.imageTopRight{
margin: 0px 0px 20px 20px;
float: right;
}
.drop a:link {
border-left-width: 2px;
border-left-color: #FFFFFF;
border-left-style: solid;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
color: #003399;
text-decoration: none;
text-align: center;
margin: 0px;
background-image: url(Images/drop-up.jpg);
background-repeat: repeat;
height: 19px;
width: 92px;
padding-top: 2px;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #003366;
border-right-width: 2px;
border-right-style: solid;
border-right-color: #FFFFFF;
}
.drop a:hover {
border-left-width: 2px;
border-left-color: #FFFFFF;
background-repeat: repeat;
border-left-style: solid;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
color: #003399;
text-decoration: none;
text-align: center;
margin: 0px;
padding: 2px;
background-image: url(Images/drop-over.jpg);
height: 19px;
width: 92px;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #003366;
border-right-width: 2px;
border-right-style: solid;
border-right-color: #FFFFFF;
}
.footer a:link {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
color: #003366;
text-decoration: none;
}
.footer a:hover {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
color: #FFFFFF;
text-decoration: none;
}
.top a:link {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
color: #003366;
text-decoration: none;
background-color: #CCCCFF;
height: 15px;
width: 85px;
border: 1px solid #FFFFFF;
text-align: center;
padding-bottom: 2px;
}
.top a:hover {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
color: #003366;
text-decoration: none;
background-color: #FFCC00;
height: 15px;
width: 85px;
border: 1px solid #FFFFFF;
text-align: center;
padding-bottom: 2px;
}
.text {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 13px;
font-weight: normal;
color: #003366;
}

Sorry to have trobled everyone with this.

It turns out that I made a simple error with my CSS styling.

I was simply following a tutorial, which only mentioned the use of the a:link and the a:hover psudo classes.

Although I thought it was an odd thing to do, I neglected to include an a:visited or a:active psudo class in my link style.

I have since added these and everything appears at it should.