Hello and thanks in advance for any direction! I am stumped!

Firefox displays what I expected from the following code, but the first tab is only partially seen in IE7. The active state, and therefore tab color change, is applied dynamically via php based on the query string of the single index.php page. (Alphabetical query strings represent the different pages and numerical strings represent individual item numbers.)

When I remove the first link in the "sliding doors" navigation (home tab) IE actually shows what is expected. This is rather confusing as the active state assignment seems ok as the left background image is applied correctly, but the right background image and the actual link are missing from IE7.

Test link: http://sevenstarssoap.com/test/index.php

abbreviated code:
Code:
<body id="active">
<?$path = $_SERVER['PHP_SELF'];
$page = basename($path);
$page = basename($path, '.php');
 
$query = $_SERVER['QUERY_STRING'];
$query = explode('=', $query);
$query = $query[1];?>

<div id="wrapper">
<div id="header">
<h1>Seven Stars Soap</h1>
<h2>Handmade Glycerin Soap Collections</h2>
<h5>soothe and pamper dry skin</h5>
<div id="hnav">
<ul>
<li <? if(($page == 'index') && ($query == '')) print ' class="active"'; ?><a href="index.php">Home</a></li>
<li <? if(($page == 'index') && ($query == 'a' | ($query > '0' && $query < '30'))) print ' class="active"'; ?>><a href="index.php?pg=a" title="SevenStarsSoap.com product catalog.">Collections</a></li>
<li <? if(($page == 'index') && ($query == 'b')) print ' class="active"'; ?>><a href="index.php?pg=b" title="About SevenStarsSoap.com">About</a></li>
<li <? if(($page == 'index') && ($query == 'c')) print ' class="active"'; ?>><a href="index.php?pg=c" title="Contact SevenStarsSoap.com">Contact</a></li>
</ul>
</div></div>
associated css:
Code:
* {margin:0;padding:0}
body {
	font-family: Georgia, "Times New Roman", Times, serif;
  background-color: #aaa;
	color: #000;
}
ul, ol, dl, p, h1, h2, h3, h4, h5, h6 {
	margin-top: 14px;
	margin-bottom: 14px;
	padding-top: 0;
	padding-bottom: 0;
}
#wrapper {
	width: 760px;
	margin-right: auto;
	margin-left: auto;
	color: #000;
	background-color: #eee;
	background-position: left top;
	border-left: 2px solid #636;
	border-right: 2px solid #636;
	border-bottom: 2px solid #636;
}
#header {
  padding-bottom:20px;
  color: #fff;
	background-color: #636;
	margin-bottom:0em;
	text-align:center;
}
#header h1 {
  font: normal 200% Georgia, "Times New Roman", Times, serif;
	padding-left:0px;
	padding-top:0px;
	margin-top: 0px;
	color: #eee;
	background-color: transparent;
}
#header h2 {
  font: italic 130% Georgia, "Times New Roman", Times, serif;
	color: #eee;
	background-color: transparent;
}
#hnav {
  float:left;
	font-size:80%;
	margin: 0;
	padding: 0;
	width: 100%;
	margin-top: -6px;
}
#hnav ul {
  list-style-type: none;
	margin: 0 auto;
}
#hnav li {
  float:left;
	background: url("img/left.png") no-repeat left top;
  margin:0;
  padding:0 0 0 4px;
}
#hnav li a {
	float:left;
	display:block;
  background: url("img/right.png") no-repeat right top;
  padding:5px 15px 4px 9px;
	color:#eee;
	border-right: 1px solid #636;
	text-decoration:none;
}
/* Commented Backslash Hack
   hides rule from IE5-Mac \*/
#hnav a {float:none;}
/* End IE5-Mac hack */
#hnav a:hover {
  color:#000;
	background-color: #636;
}
body#active li.active  {
	color:#636;
	background-image:url("img/left-on.png");
}
body#active li.active a:link, body#active li.active a:visited {
  color:#636;
	background-image:url("img/right-on.png");
  padding-bottom:5px;
}
I apologize if this inquiry is posted in the wrong forum. By now I am unsure whether the issue is that of php or css! Please indicate if I should have posted the complete css/xhtml/php. Thank you.