CODEWITHSUNDEEP
jqueryhtmlcssinternet-explorer
illusorydeveloper
illusorydeveloper

Reputation: 49

IE7, hover divs only react to mouse over border

I'm using jQuery UI to overlay divs. The HTML looks like this:

<div id="s7Wrapper" style="position: relative; width: 722px; height: 500px; text-align: center; margin-left: 39px; overflow-x: hidden; overflow-y: hidden; pointer-events: auto; ">
            <div id="center">
                <img class="s7urlloading" src="3.gif" style="position: absolute; width: 32px; height: 32px; z-index: 4000; margin-left: 344.94701910014567px; margin-top: 233.99999999999997px; display: none; ">
                <img class="s7url" src="'http://google.com" style="left: 0px; top: 0px; height: 499.99999999999994px; width: 721.8940382002913px; ">
            <div id="tooltip" class="text_7 ui-draggable" style="position: absolute; width: 247px; height: 53px; left: 20px; top: 403px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; border-top-color: white; border-right-color: white; border-bottom-color: white; border-left-color: white; border-image: initial; "></div>
<div id="tooltip" class="text_6 ui-draggable" style="position: absolute; width: 246px; height: 33px; left: 22px; top: 353px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; border-top-color: white; border-right-color: white; border-bottom-color: white; border-left-color: white; border-image: initial; "></div>
<div id="tooltip" class="text_5 ui-draggable" style="position: absolute; width: 248px; height: 51px; left: 20px; top: 291px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; border-top-color: white; border-right-color: white; border-bottom-color: white; border-left-color: white; border-image: initial; "></div>
</div>
</div>
</div>

These ui-draggable divs will only react to a mouseover when I place my mouse pointer directly on the 1px border. This only happens in IE.

Upvotes: 1

Views: 941

Answers (1)

illusorydeveloper
illusorydeveloper

Reputation: 49

The problem was solved by adding a 1x1 transparent 100% width x 100% height png onto the divs. Apparently IE does not recognize the divs as hover-able elements if there is not some content inside of the div.

Upvotes: 3

Related Questions