Member Avatar for Walahh

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;
}
tabs.jpg 14.13 KB
Edited by Walahh
  • 5 Contributors
  • 9 Replies
  • 297 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by Walahh
Member Avatar for JorgeM

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

Member Avatar for Walahh

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

Member Avatar for JorgeM

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

Member Avatar for Walahh

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

Member Avatar for JorgeM

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

Member Avatar for almostbob 
<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
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
Member Avatar for littlemisschic

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.

Member Avatar for Mike+9

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
Member Avatar for Walahh

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