Rollover CSS Box, Problem with IE 7 and Appearing in Different Spots

programming web dev
1

So this is my page:
http://www.thespeedlounge.com/info.shtml

I have it set up so that when you roll over the images with your mouse, a pop-up box appears and with information about that link. The problem is that it appears in a different place in IE7 than Firefox 2.0

I used to use hacks to make it appear where I wanted it to in IE 6 but of course they no longer work. Does anyone have any suggestions?

Here’s the CSS Code that controls the hover box:

<style type="text/css">
body{
	text-align:center;
	background-image: url(images/tile.jpg);
	background-repeat: repeat-y repeat-x;
	}
A:link {text-decoration: underline;
color:black;
}
A:visited {text-decoration: underline;
color:black;
}
A:active {text-decoration: underline;
color:black;
}
A:hover {text-decoration: underline; color: red;}
#container {
	width:950px;
	margin:auto;
	padding:0px;
	text-align:left;
	}
.floatright { 
	float: right; 
	margin: 5px 5px 5px 5px;
	border: 1px solid #666;
	}
.floatleft { 
	float: left; 
	margin: 10px 10px 10px 10px;
	border: 1px solid #666;
	}
.floatmiddle { 
	float: left; 
	margin: 5px 5px 5px 30px;
	border: 1px solid #666;
	}
.floatadvertise { 
	float: left; 
	margin: 5px 5px 5px 28px;

	}
#left{
	height:685px;
	width:184px;
	}
/* Looks like you have to specify the width of #menu
or IE5 Mac stretches it all the way across the div, and 
Opera streches it half way. */
html>body #left {
	 /* ie5win fudge ends */
	width:184px;
	}
.leftmenu {
	width:170px;
	}
.leftmenu2{
	width:170px;
	height:644px;
	}
#middle{
	height:685px;
	width:736px;
	margin-left:5px;
	width:711px;
	}
/* Looks like you have to specify the width of #menu
or IE5 Mac stretches it all the way across the div, and 
Opera streches it half way. */
html>body #middle { /* ie5win fudge ends */
	width:730px;
	}
.middlemenu {
		width:716px;
		}
.middlemenu2 {
		width:722px;
		height:650px;
		}
a span {display: none;}
a {position: relative;}
a:hover {
  background-color: #dbe4f2;
  }
/* The above hover change defeats the
  IE/Win display changing bug */
a:hover span {
		display: block;
		background: #999999;
		border: 1px solid black;
		position: absolute;
		top: 5px;
 		left: 280px;
		width:160px;
		padding:5px;
	}
html>body a:hover span{ /* ie5win fudge ends */
		top: 248px;
 		left: -180px;
	}
p.middlemenu2 a {z-index: 5;}
</style>