Search code examples
javascripthtmlcssinternet-explorer-10

Click only works when clicking div text, not the rest of the div

UPDATE

I added a jsfiddle with a little more code from the site. This one works like I'm describing. I would of added the extra code sooner but the stylesheet is 1000+ lines and I didn't know what was relevant.

https://jsfiddle.net/noL14v9w/1/

ORIGINAL POST

I'm in IE10. I have a square div, 300px by 300px. Inside the div, I have some text. If I click the text, it fires my click event. If I click the div but not on the text, it doesn't fire the click event.

The same issue occurs when I set a CSS hover class. The hover rules only get applied when I hover over the text, not anywhere else in the div.

HTML:

<div class="openStartAuditButton" onclick="alert('WTF');">asdf</div>

CSS:

.openStartAuditButton{
    height:300px;
    width:300px;
    margin-top:20px;
    font-size:24px;
    background-color:grey;
    color:white;       
    margin-left:auto;
    margin-right:auto;
    text-align:center;
}

.openStartAuditButton:hover{
    background-color:lightgrey;
}

/* I also have box sizing set on all elements, but removing this does nothing: */

* {
  -webkit-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box; 
}

DOCTYPE:

<!DOCTYPE html>
<html lang="en">
   ...

Applied Rules:

enter image description here

Solution

  • To answer your question why it happens:

    Yes, it is caused by height:100%in combination with z-index:99.
    The 100% height makes the navHolder the size of the complete window, and because the navHolder has a high z-index (99) it will be on top of all the elements.

    Removing the 100% height, will make sure the navHolder does not overlap the elements below anymore, and makes your click work.

    Why it did work on the text, is a bit weird (in chrome it does not).

    edit
    I found out why it does weird in IE 10: http://alex.leonard.ie/2013/01/27/ie-bug-text-ignores-z-index-of-higher-elements/. It is a known bug.