Databases
StackOverflow2013
Postsdbo
POWeird z-index or link issue in IE
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POWeird z-index or link issue in IE
    primarykey
    data
    text
    <p>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.</p> <p>Here is the CSS:</p> <pre><code>* { 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; } @&lt;link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'&gt; @.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; } </code></pre> <p>HERE IS THE DIV FOR THE ANCHOR TAGS</p> <pre><code>#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; } </code></pre> <p>HERE ARE THE ANCHOR TAGS</p> <pre><code>.hoverover { z-index: 5; } </code></pre> <p>and here is the HTML for the page:</p> <pre><code>&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt; &lt;link rel="stylesheet" type="text/css" href="http://www.thestopitcampaign.com/stylesheet.css?1330921248" /&gt; &lt;script type="text/javascript" src="http://thestopitcampaign.com/javascript/jquery.js?1330921248"&gt;&lt;/script&gt; &lt;script type="text/javascript" src="http://thestopitcampaign.com/javascript/curvycorners.js?1330921248"&gt;&lt;/script&gt; &lt;link href='http://fonts.googleapis.com/css?family=PT+Sans|Mate+SC|Righteous|Oswald' rel='stylesheet' type='text/css'&gt; &lt;meta name="description" content="STOP IT! ANTI-BULLYING CAMPAIGN." /&gt; &lt;meta name="keywords" content="STOP, IT, stop, it, bullying, campaign, school, kids, adults" /&gt; &lt;title&gt; The Stop It Campaign! &lt;/title&gt; &lt;/head&gt; &lt;body id="body"&gt; &lt;div id="wrapper"&gt; </code></pre> <p>START </p> 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();"> <p>END </p> <pre><code> &lt;img class="envimg" id="school" src="http://thestopitcampaign.com/images/school.png" alt="school" /&gt; &lt;/div&gt; &lt;div id="sunmoon"&gt; &lt;img id="sunmoonimg" src="http://thestopitcampaign.com/images/sun.png" alt="sun" /&gt; &lt;/div&gt; &lt;div id="grass"&gt;&lt;/div&gt; &lt;div class="cloud" id="cloud1"&gt;&lt;img src="http://thestopitcampaign.com/images/cloud.png" alt="cloud" id="cloudpic" /&gt;&lt;/div&gt; &lt;div id="logodiv"&gt; &lt;a href="http://thestopitcampaign.com/index.php" title="home" class="nodec"&gt;&lt;h1&gt;STOP IT!&lt;/h1&gt;&lt;/a&gt; &lt;/div&gt; &lt;div id="motd"&gt; &lt;p&gt;"STAND UP, SPEAK UP, INFORM and DOCUMENT "&lt;/p&gt; &lt;/div&gt; &lt;div id="navbar"&gt; &lt;ul class="nav"&gt; &lt;li class="nav"&gt;&lt;a href="http://thestopitcampaign.com/about" class="nav"&gt;About&lt;/a&gt;&lt;/li&gt; &lt;li class="nav"&gt;&lt;a href="http://thestopitcampaign.com/parents" class="nav"&gt;Parents&lt;/a&gt;&lt;/li&gt; &lt;li class="nav"&gt;&lt;a href="http://thestopitcampaign.com/educators" class="nav"&gt;Educators&lt;/a&gt;&lt;/li&gt; &lt;li class="nav"&gt;&lt;a href="http://thestopitcampaign.com/bulletin" class="nav"&gt;Bulletin&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;a href="http://thestopitcampaign.com/signup" class="nodec" title="Join S.T.O.P. I.T."&gt;&lt;div id="signup" style="text-align:center;"&gt; Join the campaign!&lt;br/&gt;6 members! &lt;/div&gt;&lt;/a&gt; &lt;a href="http://thestopitcampaign.com/reflection" class="nodec"&gt;&lt;div id="suspensionlink"&gt;Suspension Reflections&lt;/div&gt;&lt;/a&gt; &lt;div id="logocorner"&gt;&lt;img src="http://thestopitcampaign.com/images/logo.png" id="logopic" alt="logo" title="The StopIt Campaign" /&gt;&lt;span id="™"&gt;&amp;trade;&lt;/span&gt;&lt;/div&gt; &lt;script type="text/javascript" src="http://www.thestopitcampaign.com/javascript/environment.js?1330921248"&gt;&lt;/script&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>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.</p> <p>LINK TO SITE: <a href="http://thestopitcampaign.com" rel="nofollow">http://thestopitcampaign.com</a></p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USKeiran Paster
    1. USKeiran Paster
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. COInstead of posting all your code, please provide a [reduced test case](http://css-tricks.com/reduced-test-cases/). Preferably on [dabblet](http://dabblet.com/) or [Jsfiddle](http://jsfiddle.net/).
      singulars
      1. POWeird z-index or link issue in IE
      1. USbookcasey
    2. COAs bookcasey mentions, saying here is my site please fix it isn't very helpful. Can you at least point us to the html that controls the tag and its css?
      singulars
      1. POWeird z-index or link issue in IE
      1. USmrtsherman
    3. COFew questions: 1. Which version of IE (Makes a huge difference), 2. Are you testing on the same computer with each browser (I'm seeing a lot of positioning, so monitor size can change things) 3. I went to the browser in Chrome, and my computer fan kicked up right away, so there may be other more pressing issues if the site is memory intensive. Oh, and PS: nice looking site.
      singulars
      1. POWeird z-index or link issue in IE
      1. USAnthony
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload