0

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

Edited by Walahh

Attachments tabs.jpg 14.13 KB
5
Contributors
9
Replies
11
Views
5 Years
Discussion Span
Last Post by Walahh
0

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

0

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

0

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

0

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

1
<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 by almostbob

Votes + Comments
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

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.

0

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.

Votes + Comments
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!!

Edited by Walahh

This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.