Menu
In example bellow when you hover on icons cursor should be changed to different. It works except of IE 8. On IE 8 these icons turned to be unclikable, i.e. not only cursor are not changed, but also Jquery click event does not fire. Consider how the following html code works at FF, IE7 and eventually at IE8:
<!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>CSS IE 8 cursor test</title>
<style type="text/css" media="screen">
.icon-button {
float: left;
cursor: pointer;
}
.ui-icon { width: 15px; height: 10px; background-image: url(http://sstatic.net/so/img/replies-off.png); }
</style>
</head>
<body>
<div class="icon-button ui-icon"></div>
<div>Sample Text</div>
</body>
</html>
What migth be the root of problem? What could be possible workarrounds?
Thanks in advance.
P.S. Changing DOCTYPE is not really possible.
Also if I remove float: left on this example it seems like "fixed", but when I remove it on a website, besides broken design, it does not help also.
814
IE8 doesn't like empty divs. Putting a blank <img/> with a transparent pixel inside the div seems to fix it.
Demo: http://jsbin.com/asiju (Editable via http://jsbin.com/asiju/edit)
HTML source:
<!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>CSS IE 8 cursor test</title>
<style type="text/css" media="screen">
.icon-button { float: left; cursor: pointer; }
.ui-icon { width: 15px; height: 10px; background-image: url(http://sstatic.net/so/img/replies-off.png); }
.dummy-image { width: 15px; height: 10px; vertical-align: top; border: none; }
</style>
</head>
<body>
<div class="icon-button ui-icon"><img class="dummy-image" src="data:image/gif;base64,R0lGODlhAQABAJH/AP///wAAAMDAwAAAACH5BAEAAAIALAAAAAABAAEAQAICVAEAOw=="/></div>
<div>Sample Text</div>
</body>
</html>
I don't know any hack to beat it. But, if smth could be clicked it should be in a tag, so insert a and maybe display:block. href could be =#. That solution seems to be semantic and good for me :)
39
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
