CODEWITHSUNDEEP
htmlcssdominternet-explorer-7
shannon
shannon

Reputation: 8784

IE7 element can't be clicked

I've narrowed a defect down to this sample, where the numeral "1" is unclickable in IE7 (only):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
    <title>Click 1</title>
    <style type="text/css">     
        div   { position: absolute; overflow: auto; }
        table { position: relative; }
        span  { position: fixed; top: 100px; }
    </style>
</head><body>
    <div>
        <table>
            <tr>
                <span onclick='alert(1)'>1</span>2
            </tr>
        </table>
    </div>
</body></html>

Can anyone identify the root cause, so I understand my options for workarounds?

I'm using all the CSS represented here to build a sortable fixed head scrolling table. In the original code, the span actually lives in a TH, fixing the headings above the scrolling table via negative margin, while allowing the table renderer to account for the header text in column width, without table duplication or 'onResize'-simulating timers.

Upvotes: 2

Views: 812

Answers (2)

thirtydot
thirtydot

Reputation: 228302

Removing position: relative from div fixes it.

If that's not an option, I also found adding *display: inline to div fixes it.

The asterisk before display is a CSS hack to apply the rule to only IE7 and below. It's not an awesome one to use because it is not valid CSS, but it works and causes no problems.

If neither of these ideas works for you, it would be helpful to see a more complete test case to understand why.

Your original code, but with <span onclick='alert(1)'> so the JavaScript works:
http://jsbin.com/aretu5 (can't click it in IE7)

Same, with position: relative removed:
http://jsbin.com/aretu5/2 (works in IE7)

Same, with position: relative still there and *display: inline added:
http://jsbin.com/aretu5/3 (works in IE7)

Upvotes: 2

koalabruder
koalabruder

Reputation: 2904

try to use brackets

<span onclick='sortTable()'>1</span>

Upvotes: 1

Related Questions