Search code examples
cssinternet-explorerhyperlinkimageclickable

Why isn't my image clickable in IE?

Hoping someone can help me with this problem I'm having w/ IE. So the page I am working on has an image containing Facebook, Twitter and Youtube tabs.

enter image description here

All these tabs are clickable in most 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 (edited):

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

CSS (edited):

#icons {
    position:absolute;
    top:44px;
    right:200px;
    z-index:9;
    float:left;
    /*width:105px;*/
    height:35px;
    /*background:url(/images/sprite_header_icons.png) no-repeat -6px 0;*/
}
#icons ul.nav1{
    height: 35px; /*added*/
}
#icons ul.nav1 li {
    display: inline;
    padding-left: 1px;
height: 35px !important; /*added*/ 
}
#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;
    background:url(/images/sprite_header_icons.png) no-repeat -6px 0; /*added*/
    width: 20px; /*added*/
    height: 35px; /*added*/
}
#icons ul.nav1 li a#twitter {
    padding-left: 20px;
    padding-right: 13px;
    padding-bottom: 28px;   
    background:url(/images/sprite_header_icons.png) no-repeat -40px 0; /*added*/
    width: 20px; /*added*/
    height: 35px; /*added*/

}
#icons ul.nav1 li a#youtube {
    padding-left: 20px;
    padding-right: 13px;
    padding-bottom: 28px;
    background:url(/images/sprite_header_icons.png) no-repeat -74px 0; /*added*/
    width: 20px; /*added*/
    height: 35px; /*added*/
}

NOTE:

Okay, so i have made some changes based on what Ryan Beaulieu, Alex Reynolds & OhMrBigshot suggested here. Now, the tabs are clickable in IE (7/8)...however, the tabs are partially (li 38px x 16px) visible like this:

enter image description here

the width is fine, but how can i increase the height to 35px from 16px? Thank you!!

Solution

  • Try adding display:block

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