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

**URL:** <https://forum.kirupa.com/t/rollover-css-box-problem-with-ie-7-and-appearing-in-different-spots/212700>\
**Category:** web dev\
**Created:** [January 13, 2007, 6:13am UTC](https://forum.kirupa.com/t/rollover-css-box-problem-with-ie-7-and-appearing-in-different-spots/212700 "2007-01-13T06:13:10Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![jp182](https://avatars.discourse-cdn.com/v4/letter/j/a183cd/32.png) [@jp182](https://forum.kirupa.com/u/jp182)\
**Post date:** [January 13, 2007, 6:13am UTC](https://forum.kirupa.com/t/rollover-css-box-problem-with-ie-7-and-appearing-in-different-spots/212700/1 "2007-01-13T06:13:10Z")

</div>

So this is my page:  
[http://www.thespeedlounge.com/info.shtml](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:

```auto
<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>

```