CODEWITHSUNDEEP
htmlcssz-index
Keiran Paster
Keiran Paster

Reputation: 600

Weird z-index or link issue in IE

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 S.T.O.P. I.T."><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

Upvotes: 0

Views: 532

Answers (2)

chipcullen
chipcullen

Reputation: 6960

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.

Upvotes: 1

liveoak
liveoak

Reputation: 11

maybe a javascript framework with cross browser abilities e.g. jquery (in general) or jquery tools (special overlay ... tooltip) is worth to have a look.

Upvotes: 0

Related Questions