Hi,
I just added an image to my site with info boxes that appear when the mouse is hovered over different parts of the image. I'm using Javascript for this but am not very experienced with it.
The problem is with the position of the info boxes -- in IE they appear in different locations every time I scroll down a little. (It seems like they move farther up when I scroll farther down.) This doesn't happen in Firefox.
How can I better control the position of the info boxes?
I've included some relevant sections of the code below. You can also view the complete page at
Thanks!!
LL_infoID = new Array();
LL_infoID[1] = "GeneEditing";
...script...
<style type="text/css">
<!--
.infoboxstyle {
position: absolute;
width: 400px;
padding: 6;
color: black;
border: black;
border-style: solid;
border-top-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-right-width: 1px;
background-color: #ECF1F9;
z-index: 1;
visibility: hidden;
font-size: 11px;
}
-->
</style>
</head>
<body leftmargin="0" topmargin="10" marginwidth="0" marginheight="10">
<div
id="GeneEditing"
class="infoboxstyle">
Infobox content here.
</div>
...other code...
<map name="therapies">
<area shape="rect" coords="231,0,281,34" href="project9.php#3" onMouseOver="LL_showinfo(1)" onMouseOut="LL_hideallinfo()">
</map>
I just added an image to my site with info boxes that appear when the mouse is hovered over different parts of the image. I'm using Javascript for this but am not very experienced with it.
The problem is with the position of the info boxes -- in IE they appear in different locations every time I scroll down a little. (It seems like they move farther up when I scroll farther down.) This doesn't happen in Firefox.
How can I better control the position of the info boxes?
I've included some relevant sections of the code below. You can also view the complete page at
Thanks!!
LL_infoID = new Array();
LL_infoID[1] = "GeneEditing";
...script...
<style type="text/css">
<!--
.infoboxstyle {
position: absolute;
width: 400px;
padding: 6;
color: black;
border: black;
border-style: solid;
border-top-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-right-width: 1px;
background-color: #ECF1F9;
z-index: 1;
visibility: hidden;
font-size: 11px;
}
-->
</style>
</head>
<body leftmargin="0" topmargin="10" marginwidth="0" marginheight="10">
<div
id="GeneEditing"
class="infoboxstyle">
Infobox content here.
</div>
...other code...
<map name="therapies">
<area shape="rect" coords="231,0,281,34" href="project9.php#3" onMouseOver="LL_showinfo(1)" onMouseOut="LL_hideallinfo()">
</map>
