Why isn't my image clickable in IE?

Question

Walahh 0 Newbie Poster

14 Years Ago

Hello!
Hoping someone here can help me with this problem. So the page I am working on has an image containing Facebook, Twitter and Youtube tabs.
tabs1

All these tabs are clickable in every other browsers (Chrome/Safari/Firefox/Opera) except in Internet Explorer (7/8). I am not sure what I am doing wrong here, can anyone PLEASE help me?

HTML:

<div id="head">
    .
    .
    .
    <div id="icons">
        <ul class="nav1">
            <li></li>
            <li><a id="facebook" rel="_blank" href="https://www.facebook.com"></a></li>
            <li><a id="twitter" rel="_blank" href="https://twitter.com"></a></li>
            <li><a id="youtube" rel="_blank" href="https://www.youtube.com"></a></li>
        </ul>
    </div>
    .
    .
    .
</div>

CSS:

#icons {
    position:absolute;
    top:44px;
    right:200px;
    z-index:9;
    float:left;
    width:105px;
    height:30px;
    background:url(/images/sprite_header_icons.png) no-repeat -6px 0;
}
#icons ul.nav1 li {
    display: inline;
    padding-left: 1px;
}
#icons ul.nav1 li a {
    display: inline;
    width: 34px;
    height: 31px;
}
ul.nav1 li a:hover {

}
#icons ul.nav1 li a#facebook {
    padding-left: 20px;
    padding-right: 13px;
    padding-bottom: 28px;
}
#icons ul.nav1 li a#twitter {
    padding-left: 20px;
    padding-right: 13px;
    padding-bottom: 28px;
}
#icons ul.nav1 li a#youtube {
    padding-left: 20px;
    padding-right: 13px;
    padding-bottom: 28px;
}

graphics:image html-css web-browser

Edited 14 Years Ago by Walahh

5 Contributors
9 Replies
321 Views
2 Days Discussion Span
Latest Post 14 Years Ago Latest Post by Walahh

Dani AI

Generated 9 Months Ago

Short answer: the sprite links weren’t getting a real hit area in IE. The clickable anchors were effectively inline/empty, so IE7/8 didn’t honor the expected box for the background-sprite. As discovered, changing the anchors so they form a real box (rather than relying on an inline, contentless element) made the icons clickable in IE.

Why this happens: older versions of IE treat inline elements differently — width/height behavior and hit-testing can be unreliable unless the element has layout. Giving the anchor a real box (make it a block-level element or use display:inline-block) or otherwise triggering hasLayout (for legacy IE, e.g. zoom:1) ensures the browser creates a clickable area for the sprite. Also keep an eye on document mode/doctype: IE running in quirks or compatibility mode often shows the older behaviors.

Notes tied to the thread: was right to flag malformed markup — nested anchors or missing quotes can break rendering in IE even when other browsers “forgive” the mistake. ’s   trick works because adding content forces a visible box, but it’s a workaround rather than a robust fix. ’s final approach (attach the sprite to the anchor and make the anchor form the box) is the correct pattern for image-replacement links.

Quick troubleshooting checklist:

Validate markup and fix malformed hrefs.
Use a standards doctype like <!DOCTYPE html> and check IE’s document mode (F12).
Temporarily give the anchors a visible background/border to confirm the hit area.
Make anchors block-level or inline-block; for old IE add zoom:1 if needed.
Ensure no overlapping element with a higher z-index covers the links.
These steps will reproduce and reliably fix the sprite-click problem across browsers.

All 9 Replies

JorgeM 958 Problem Solver

14 Years Ago

What I have seen as the most common issue with "non" clickable links is that the anchor element is malformed. Check your href attribute. Make sure that you surround the value with quotes. The example above is missing a quote around the youtube link.

Different browsers will behave differently with regard to syntax errors, open tags, etc...

JorgeM 958 Problem Solver

14 Years Ago

Do you have the site up so that we can test? or provide the full source code to validate?

almostbob 866 Retired: passive income ROCKS

14 Years Ago

<li><a id="facebook" rel="_blank" href="https://www.facebook.com">&nbsp;</a></li>

ie is quirky it was a big nothing, should now be a big space character & should be clickable

Edited 14 Years Ago by almostbob

Walahh commented: yeap, that was also the reason. however, when i was adding that " " it was messing with the icon's height (plz see the link i posted at the bottom) but thank you so much for your time :) +0

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

yeap, that was also the reason. however, when i was adding that " " it was messing with the icon's height (plz see the link i posted at the bottom) but thank you so much for your time :)

Walahh 0 Newbie Poster · Answer 1 · 2012-07-27T19:02:02+00:00

Thanks for your repply! i have added the missing quote here...my original code had few more sensetive information in the links, so when i was removing the rest of the info, i accidentaly removed that last quote here.
However, my original code has all the quotes and still not working :(

Walahh 0 Newbie Poster · Answer 2 · 2012-07-27T21:09:28+00:00

i have the site up, but i can't post the like here, sorry!
but thank you so much for your time!!

JorgeM 958 Problem Solver Team Colleague Featured Poster · Answer 3 · 2012-07-27T22:32:58+00:00

JorgeM 958 Problem Solver

14 Years Ago

Ok, sorry I couldn't have helped you further.

littlemisschic 0 Newbie Poster · Answer 4 · 2012-07-28T01:29:26+00:00

why don't you post the link on a fileshare website so we can have a look and access the situation. It will definatley make it easier to help you resolve the problems with your image link.

Mike+9 0 Light Poster · Answer 5 · 2012-07-28T15:17:07+00:00

The problem might be IE and not your website. If it works like it should in firefox, chrome, opera, safari and just doesn't work on IE then this is your problem. IE is known for causing problems or not reading websites like it should. I'm amazed people actually still use it.

which helps solve the problem, in what particular fashion?? people, 76% of people, still use it because it is preinstalled, unfortunately you have to plan on

Walahh 0 Newbie Poster · Answer 6 · 2012-07-30T16:20:32+00:00

Solved :)

it was very simple....all i had to do is change the line#16 (display: inline) to display:block (http://stackoverflow.com/questions/11693842/why-isnt-my-image-clickable-in-ie)

so, the HTML part remains the same, the modified CSS is now:

#icons {
    position:absolute;
    top:44px;
    right:200px;
    z-index:9;
    float:left;
    height:35px;
}
#icons ul.nav1 li {
    display: inline;
    padding-left: 1px;
}
#icons ul.nav1 li a {
    float:left;
    display: block;
    width: 37px;
    height: 46px;
    margin-right:3px;
}
ul.nav1 li a:hover {

}
#icons ul.nav1 li a#facebook {
    background:url(/images/sprite_header_icons.png) no-repeat -6px 0;
}
#icons ul.nav1 li a#twitter {  
    background:url(/images/sprite_header_icons.png) no-repeat -40px 0;
}
#icons ul.nav1 li a#youtube {
    background:url(/images/sprite_header_icons.png) no-repeat -74px 0;
}

hope this helps someone. and thank you everyone for taking the time to read my post and replying!!

Why isn't my image clickable in IE?

Dani AI

Recommended Answers Collapse Answers

All 9 Replies

Recommended Answers