Title disappears from div when gradient applied

Question

I have several divs on my page. Each of them has the title attribute so the user can mouse over them to get more information. Until today, they were very plain backgrounds (I was working on layout/functionality before I moved onto style), and the title worked as expected. Now I have added a gradient background, and the title no longer appears.

The browser involved is IE8.

HTML:

<div title='' class="mywrapclass"> <!-- no title because an outer wrapper has a title I want to suppress here -->
    <div title="More information..." style="width:40px;height:50px" class="myclass"></div>
</div>

CSS:

.myclass
{
    border: 1px solid white;
    border-bottom:none;
    bottom:0%;
    position:absolute;
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType="1", startColorstr='#87aaff', endColorstr='#000044');
}

.mywrapclass
{
    background-color:White;
    position:absolute;
    left:58%;
    width:32%;
    height:100%;
    overflow: hidden;
}

How can I get the title to work again?

Answer 1

You need to add a background-color to .myclass. The title will now pop up on hover. Live example: http://jsfiddle.net/tw16/TbdAm/

.myclass{     
    background-color: white; /* add this */
    border: 1px solid white;
    border-bottom:none;
    top:0%;
    position:absolute;
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType="1", startColorstr='#87aaff', endColorstr='#000044');
}