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;
}

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...

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 :(

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

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

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

<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

commented: yeap, that was also the reason. however, when i was adding that "&nbsp;" 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

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.

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.

commented: 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 +0

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!!

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.