css sprite active state still showing on browser Back button
===

I am trying to use CSS sprites for a Navigation bar. After a lot of Internet research, I think I have determined the 'simplest' way.  All appears to work fine EXCEPT when I click the browser's Back button.  In IE (8.0.6001.18701), the Active state is 'stuck' (looks like button is pushed down).  In Firefox (14.0.1) the Hover state is 'stuck'.  I can live with the Firefox issue as it goes away as soon as the mouse is moved off the Back button, but not the IE issue.  I currently have the navbar in a header file that I use with Includes to keep things simple and consistant.
Here is the Template html.  I use this for all my pages. (when I get past this problem, I will actuall enter in the rest of the bodies)

    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
    <link rel="stylesheet" type="text/css" href="DS.css">
    </head>
    <body>
    <div id="centerpage">
    <table border="0" width="100%" cellspacing="0" cellpadding="0" id="table1">
	<tr>
	<td>
	<!--webbot bot="Include" U-Include="Nav_Includes/Header.htm" TAG="BODY" --></td>
	</tr>
	<tr>
	<td>Enter page data here.<br>
	<hr width="770" size="1">
	<span id="timestamp">Page last updated: 
	<!--webbot bot="Timestamp" S-Type="EDITED" S-Format="%m/%d/%Y %I:%M %p" --></span></td>
	</tr>
	<tr>
	<td>
	<!--webbot bot="Include" U-Include="Nav_Includes/Footer.htm" TAG="BODY" --></td>
	</tr>
    </table>
    </div>
    </body>
    </html>

Here is the header.htm:

    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
    <title>Dolphin Storage Header</title>
    <link rel="stylesheet" type="text/css" href="../DS.css">
    </head>
    <body>
    <img border="0" src="../images/header.jpg" width="760" height="101" align="center">
    <p><a class="navHome" href="../index.htm"></a>
    <a class="navUnits" href="../units.htm"></a>
    <a class="navSpecials" href="../specials.htm"></a>
    <a class="navAbout" href="../about.htm"></a>
    <a class="navContact" href="../contact.htm"></a></p>
    </body>
    </html>

The css file:

    body {
	font-family: Arial, Helvetica, Sans-serif;
	color: #000000;
	text-align:center; /* Fix for IE not centering webpage */
	background-color: #ffe670;
	}
    #centerpage {
    width: 770px; 
	margin: 0 auto;   /* Top & Bottom = 0, Right & Left = auto to center the page horizontally */
	text-align:left;  /* 2nd part of IE fix for centering webpage */
	}
    /* Navagation bar, using 'sprite' images */	
    a.navHome {
	display: block;
	float: left;
	width: 160px;
	height: 30px;
	background-image: url('Nav_Buttons/Home.jpg');
	background-repeat: no-repeat;
	background-position; 0 0;
	}
    a.navHome:hover {
	background-position: 0 -30px;
	}
    a.navHome:active {
	background-position: 0 -60px;
	}
 
    a.navUnits {
	display: block;
	float: left;
	width: 150px;
	height: 30px;
	background-image: url('Nav_Buttons/Units.jpg');
	background-repeat: no-repeat;
	background-position; 0 0;
	}
    a.navUnits:hover {
	background-position: 0 -30px;
	}
    a.navUnits:active {
	background-position: 0 -60px;
	}
 
    a.navSpecials {
	display: block;
	float: left;
	width: 150px;
	height: 30px;
	background-image: url('Nav_Buttons/Specials.jpg');
	background-repeat: no-repeat;
	background-position; 0 0;
	}
    a.navSpecials:hover {
	background-position: 0 -30px;
	}
    a.navSpecials:active {
	background-position: 0 -60px;
	}
 
    a.navAbout {
	display: block;
	float: left;
	width: 150px;
	height: 30px;
	background-image: url('Nav_Buttons/About.jpg');
	background-repeat: no-repeat;
	background-position; 0 0;
	}
    a.navAbout:hover {
	background-position: 0 -30px;
	}
    a.navAbout:active {
	background-position: 0 -60px;
	}
 
    a.navContact {
	display: block;
	float: left;
	width: 160px;
	height: 30px;
	background-image: url('Nav_Buttons/Contact.jpg');
	background-repeat: no-repeat;
	background-position; 0 0;
	}
    a.navContact:hover {
	background-position: 0 -30px;
	}
    a.navContact:active {
	background-position: 0 -60px;
	}
 
    #timestamp {
	font-family: Arial, Helvetica, Sans-serif;
    color: #000000;
    font-size: xx-small;
    }

    H5 {
	font-family: Georgia, "Times New Roman", Times, serif;
    color: #035f8e;
    }
 
Sprites: (won't let a noob post images, sorry)
