Question

Div with heading and text inside. When the div is hovered the background changes and a ‘toast’ rises from the bottom of the div. Entire div is clickable based on the heading link and done in css.

The problem : in all versions of IE the link is only clickable when the cursor is NOT over text within the div (same problem in the fiddle example). It works correctly in FF, Opera, and Safari.

JSFiddle – the example

<div class="one-third">
    <div class="inside">
        <h3><a href="/#">Testing</a></h3>
        <p>This some text inside the testing blox blah blah blah blah blah.</p>
        <p>and some more and some more.and some more and some morep>and some more and some moreand some more and some moreand some more and some moreand some more and some moreand some more and some moreand some more and some more.</p>
        <span class="toast">View more stuff</span>
    </div>
</div>

css:

.one-third{
    border:1px solid #d8d8d8;
    margin:35px 9px 0;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    border-radius: 6px;
    background:#ffffff;
    text-align:center;
    position:relative;
    overflow:hidden;
    cursor: pointer;
    padding:25px 0 0 0;
}

.one-third:hover{ 
    background: #eeeeee;
}

.inside{
    height:185px;
}

.inside h3 a, .inside h3 a:hover{ /*entire div is link*/
    font-size: 20px;
    color:#30629a;
    text-decoration:none;
    position:absolute; 
    width:100%;
    height:100%;
    top:13px;
    left: 0;
    z-index: 1;
}

.inside p{
    padding:15px 15px 0 15px;
}


.toast{
    background: rgb(71, 71, 71); /* Fall-back for browsers that don't support rgba */
    background: rgba(0, 0, 0, .7);
    display: block;
    position: absolute;
    left: 0;
    width: 100%;
    bottom: -30px;
    line-height:30px;
    color: #fff;
    text-shadow:0 1px 1px #111111;
    font-size:14px;
    text-align: center;
    transition: all 0.1s linear 0s; /*no moz, webkit, or o because radius is needed and won't scroll right*/    
    -moz-border-radius: 0 0 6px 6px;
    -webkit-border-radius: 0 0 6px 6px;
    border-radius: 0 0 6px 6px;
}

.one-third:hover .toast {
    bottom: 0;
}

Answer 1

Another solution is to add

background:url("datdata:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7");

to .inside h3 a, .inside h3 a:hover. It’s a base64 transparent gif that solves the problem for IE.

GIf found here: http://css-tricks.com/snippets/html/base64-encode-of-1x1px-transparent-gif/