开发者

Title disappears from div when gradient applied

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;
    botto开发者_如何学JAVAm: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?


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


I think there may be two issues here:

  1. You may need to set -ms-filter for IE8. See http://msdn.microsoft.com/en-us/library/ms530752(v=vs.85).aspx

  2. Even though you set the height and width inline, IE may still have issues with haslayout. Fix that by adding zoom:1; to your .myclass

EDIT

As per comment

Using -ms-filter instead of filter causes the gradient not to render, but the title works.

Try using quotes, as per MS docs

When you use -ms-filter, enclose the progid in single quotes (') or double quotes ("). Use commas (,) to separate multiple values, as shown in the Examples section.

So pick one set of quotes for enclosing the progid and another for those inside the progid. See if that works


Just a "wild" guess here as I haven't used this method before but try removing the quotes around the 1 for GradientType

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜