html - Cross-Browser Solution: Have links clickable when under image -



html - Cross-Browser Solution: Have links clickable when under image -

i have header in html page contains curve.

my problem: curve image & sits @ highest z-index. meant cutting off text below has highest z-index. result, none of links below image(curve) can clicked because image sits on top of them.

heres simple jsfiddle: http://jsfiddle.net/he7d5/2/

how can links below image clickable?

the easiest way know create image have css: pointer-events: none; but doesn't work in ie & looking cross-browser friendly solution.

<div id="headercontainer" style="position: relative; width: 100%; text-align: center; background-color: yellow;"> <div id="header" style="width: 1100px; height: 400px; padding-left: 30px; padding-right: 30px;"> <ul id="navbar" style="background-color: red; width: 800px; height: 40px; float: left;"></ul> <a id="logo" href="www.google.com" style="background-color: red; width: 190px; height: 40px; float: right; margin-top: 15px;">cant clicked</a> <br/> <div id="cutofftext"> <p style="padding: 0; margin: 0; font-size: 200px;">abcdefg</p> </div> </div> <div id="curveoverlay" style="z-index: 1; position: absolute; left: 0; top: 0; background-image: url('http://i44.tinypic.com/rs8y7m.png'); background-position: center bottom; background-repeat: no-repeat; width: 1100; height: 400px;"> </div> </div>

ps: if theres no way create links clickable when under image, can suggest html layout can utilize still accomplish have navbar links clickable?

simply set : can't. not without lot of effort. accomplish effect, you'd need image imagemap , create sure it's pixel-perfect stuff it's obscuring.

to honest, looks pretty bad idea, may have legitimate reason this

edit : looks duplicate of this

html css cross-browser

Comments

Popular posts from this blog

How do I check if an insert was successful with MySQLdb in Python? -

delphi - blogger via idHTTP : error 400 bad request -

postgresql - ERROR: operator is not unique: unknown + unknown -