Weird z-index or link issue in IE

Question

I am programming a website for my school and I wanted to make the characters in the background have a hover over effect. When you hover over these characters in most browsers, a popup shows up saying who they are. This works fine in all browsers other than Internet Explorer. In IE, a tiny part of the link is clickable, but the rest isn't. I'm not sure if this has something to do with the z-index of the like, because it has the z-index set very high.

Here is the CSS:

*
{
margin:0px;
padding:0px;
}

#grass
{
left: 0px;
background-repeat: repeat;
background-image: url(http://thestopitcampaign.com/images/grass.jpg);
bottom:0px;
margin:0px;
position:fixed;
padding:0px;
font-size:15px;
height: 200px;
width: 100%;
z-index:-6;
}

#env
{
z-index: -5;
position:fixed;
height:500px;
bottom:0px;
width:100%;
left:0px;
}

.envimg
{
bottom:0px;
position:fixed;
float:left;
display:block;
margin-left:auto;
margin-right:auto;
}

#people
{
padding: 0px;
bottom: 0px;
position: fixed;
width: 900px;
right: 50%;
left: 50%;
margin-right: -450px;
margin-left: -450px;
z-index:-4;
}

#school
{
width: 500px;
right: 50%;
left: 50%;
margin-right: -250px;
margin-left: -250px;
margin-bottom: 0px;
z-index:-5;
}

body, html
{
font-family: "PT Sans", sans-serif;
overflow-x:hidden;
overflow-y:auto;
-ms-overflow-x:hidden;
-ms-overflow-y:auto;
height:100%;
width:100%;
z-index:-7;
}

#wrapper
{
z-index: 1000;
position: relative;
height:100%;
padding-left:10px;
padding-right:10px;
overflow-x:hidden;
overflow-y:auto;
-ms-overflow-x:hidden;
-ms-overflow-y:auto;
}

.cloud
{
bottom: 0px;
left: -600px;
position:fixed;
z-index:-6;
}

#cloudpic
{
height:200px;
}

#sunmoon
{
position:fixed;
top:100px;
right:200px;
z-index:-7;
height:300px;
}

#sunmoonimg
{
height:300px;
}

#content
{
top: 40px;
border-color: black;
border-style: solid;
border-width: 2px;
background-color: #e6e6e6;
max-width: 1000px;
margin-right: auto;
margin-left: auto;
display: block;
position: relative;
z-index: 1;
padding:30px;
-moz-border-radius: 15px;
border-radius: 15px;
}

h1
{
font-family: "Mate SC", sans-serif;
font-weight:normal;
font-size:7em;
margin:10px;
}

#main
{
text-align: center;
height:100%;
display:inline;
}

#logo
{
display: inline;
width: 100px;
}

@<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>

@.nav ul
{
display: inline;
list-style-type:none;
margin-top:10px;
position:relative;
}

.nav li
{
display: inline;
margin:10px;
}

.nav a
{
display: inline;
text-decoration:none;
color:black;
}

.nav a:hover
{

    color: #ff451b;

}

#logodiv
{
top:10px;
width: 600px;
margin-right: auto;
margin-left: auto;
display: block;
position: relative;
z-index: 4;
text-align:center;
}

.nodec
{
text-decoration:none;
color:black;
}

img
{
display:inline;
}

#navbar
{
margin-right: auto;
margin-left: auto;
position: relative;
top: 0px;
display: block;
z-index: 4;
text-align:center;
font-size:30px;
font-family:"Oswald","American Typewriter","serif";
}

#header
{
margin-bottom: 10px;
font-size: 10px;
}

#logocorner
{
position:absolute;
bottom:10px;
left:10px;
z-index:-3;
}

#logopic
{
width:100px;
}

.nav a:active
{
    color: #c45c00;
}

#™
{
position:absolute;
top:0px;
}

#body
{
background-color: #7ebcff;
}

.name
{
font-weight:bold;
}

#name
{
border:1px solid black;
outline:none;
width:200px;
}

#message
{
height:50px;
width:200px;
resize:both;
border:1px solid black;
outline:none;
}

.name
{
text-align:left;
width:120px;
}

.post
{
text-align:left;
}

table.bulletin
{
position:relative;
display:block;
margin-left:auto;
margin-right:auto;
max-width:500px;
}

.post
{
display:block;
margin:5px;
}

td
{
padding:5px;
}

#post
{
width:200px;
position:relative;
margin-left:auto;
margin-right:auto;
display:block;
text-align:center;
margin-top:20px;
}

#submit
{
display:block;
position:relative;
width:202px;
text-align:center;
}

#showbulletin
{
cursor:pointer;
cursor:hand;
}

#showbulletin:hover
{
color: #ff451b;
}

#query
{
width:100px;
border:1px solid black;
outline:none;
}

#newmotd
{
width:100px;
border:1px solid black;
outline:none;
}

#motd
{
text-align:center;
margin-bottom: 20px;
font-size:15px;
font-style: italic;
}

#signup
{
    padding: 10px;
    background-color: #f98f0c;
    right:20px;
    top: 20px;
    display: block;
    position: absolute;
    border-radius: 5px;
    -moz-border-radius: 5px;
    z-index: 5;
}

input.signup
{
    width:200px;
}

input.signupsubmit
{
    width:200px;
}

#txtDefaultHtmlArea
{
background-color: white;
height:300px;
width: 100%;
resize:both;
}

#signup:active
{
    background-color: #ff6914;
}

iframe
{
    background-color: white;
}

#suspensionlink
{
    left: 20px;
    padding: 10px;
    background-color: #f9de43;
    top: 20px;
    display: block;
    position: absolute;
    border-radius: 5px;
    -moz-border-radius: 5px;
    z-index: 5;
}

#suspensionlink:active
{
    background-color: #ffc500;
}

.suspform
{
    text-align: center;
    display: block;
}

textarea.suspform
{
    padding: 2px;
    text-align: left;
    margin-right: auto;
    margin-left: auto;
    display: block;
    position: relative;
    height: 100px;
    width: 300px;
}

span.suspform
{
    margin-bottom: 5px;
    margin-top: 15px;
    font-weight: bold;
}

form.suspform
{
    width: 600px;
    margin-right: auto;
    margin-left: auto;
    display: block;
    position: relative;
}

#submitref
{
    margin-top: 10px;
}

input.suspform
{
    padding: 2px;
    width: 150px;
    text-align: left;
    margin-right: auto;
    margin-left: auto;
    display: block;
    position: relative;
}

.cover
{
    display: block;
    margin-right: auto;
    margin-left: auto;
    position: relative;
    width: 400px;
    border-color: black;
    border-width: 1px;
    border-style: solid;
}

area
{
border: 1px dashed black;
}

HERE IS THE DIV FOR THE ANCHOR TAGS

#container_people
{
z-index: 500;
padding: 0px;
bottom: 0px;
position: fixed;
height: 284px;
width: 1390px;
right: 50%;
left: 50%;
margin-right: -688.5px;
margin-left: -688.5px;
}

#popup
{
    text-align: center;
    padding: 5px;
    background-color: #e6e6e6;
    left:0px;
    bottom: 10px;
    display: block;
    position: absolute;
    border-radius: 5px;
    -moz-border-radius: 5px;
    z-index: 5;
    display:block;
    width:170px;
}

a
{
outline:none;
}

HERE ARE THE ANCHOR TAGS

.hoverover
{
    z-index: 5;
}

and here is the HTML for the page:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <link rel="stylesheet" type="text/css" href="http://www.thestopitcampaign.com/stylesheet.css?1330921248" />
        <script type="text/javascript" src="http://thestopitcampaign.com/javascript/jquery.js?1330921248"></script>
        <script type="text/javascript" src="http://thestopitcampaign.com/javascript/curvycorners.js?1330921248"></script>
        <link href='http://fonts.googleapis.com/css?family=PT+Sans|Mate+SC|Righteous|Oswald' rel='stylesheet' type='text/css'>
        <meta name="description" content="STOP IT! ANTI-BULLYING CAMPAIGN." />
            <meta name="keywords" content="STOP, IT, stop, it, bullying, campaign, school, kids, adults" />     <title>
        The Stop It Campaign!       </title>
    </head>
    <body id="body">
        <div id="wrapper">

START

Zoe: the good witness',270);" onmouseout="popuphide();"> Luca: the victim',450);" onmouseout="popuphide();"> Mateo: the bystander',630);" onmouseout="popuphide();"> Mrs. Bowers: the teacher',810);" onmouseout="popuphide();"> Max: the bully',1005);" onmouseout="popuphide();">

END

  <img class="envimg" id="school" src="http://thestopitcampaign.com/images/school.png" alt="school" /> </div> <div id="sunmoon"> <img id="sunmoonimg" src="http://thestopitcampaign.com/images/sun.png" alt="sun" /> </div> <div id="grass"></div> <div class="cloud" id="cloud1"><img src="http://thestopitcampaign.com/images/cloud.png" alt="cloud" id="cloudpic" /></div> <div id="logodiv"> <a href="http://thestopitcampaign.com/index.php" title="home" class="nodec"><h1>STOP IT!</h1></a> </div> <div id="motd"> <p>"STAND UP, SPEAK UP, INFORM and DOCUMENT "</p> </div> <div id="navbar"> <ul class="nav"> <li class="nav"><a href="http://thestopitcampaign.com/about" class="nav">About</a></li> <li class="nav"><a href="http://thestopitcampaign.com/parents" class="nav">Parents</a></li> <li class="nav"><a href="http://thestopitcampaign.com/educators" class="nav">Educators</a></li> <li class="nav"><a href="http://thestopitcampaign.com/bulletin" class="nav">Bulletin</a></li> </ul> </div> <a href="http://thestopitcampaign.com/signup" class="nodec" title="Join STOPIT"><div id="signup" style="text-align:center;"> Join the campaign!<br/>6 members! </div></a> <a href="http://thestopitcampaign.com/reflection" class="nodec"><div id="suspensionlink">Suspension Reflections</div></a> <div id="logocorner"><img src="http://thestopitcampaign.com/images/logo.png" id="logopic" alt="logo" title="The StopIt Campaign" /><span id="™">&trade;</span></div> <script type="text/javascript" src="http://www.thestopitcampaign.com/javascript/environment.js?1330921248"></script> </div> </body> </html> 

Thank you for helping me, because I have spent a very long time trying to figure this out and I am sure we all agree that IE is very frustrating for web developers.

LINK TO SITE: http://thestopitcampaign.com

Answer 1

I'm not sure which IE is giving you fits - but I've run into odd hover state issues with absolutely positioned links before in at least IE7.

Even if you give it display:block, the "clickable" or "rolloverable" area is confined to the text in the link, but not the padding or other arbitrary dimensions. As you don't have any text in these links, yes, you will be confined to a very small area.

What has worked for me is giving the link a background image - even one that doesn't actually exist.

So, in an IE-only style sheet, try something like:

#container_people a {
    background: url(trasparent.gif);  
 }

I've found that the image file (transparent.gif) doesn't actually have to exist . IE just has to think it exists. Hackish, yeah, but it works.

That has cleared up a number of link issues for me.

Answer 2

也许具有跨浏览器功能的javascript框架（例如jquery） （或一般而言）或jquery工具 （特殊覆盖...工具提示）值得一看。