tooltip css/html

I’m trying to create the affect of a tool tip with a triangle pointer on top of an unordered list. To create the triangle, I thought I would just create a square div, rotate it 45 degrees, and give it the same background color as the unordered list.

As you can probably guess, this works great in everything except in IE. The problem I’m having is that it seems that the overflow is hidden on the ul, so when I position the pointer div half outside of the ul to create the triangle effect, the top half of the div is hidden.

I have tried to change overflows and z-indexes to get this to work, but no luck. I’m thinking it has to do with the gradient filter applied to the ul, maybe that applies an overflow rule? I know I can probably just move the pointer div o开发者_如何学Goutside of the list, but this will be display on hover of another element, and I’d rather just display the ul on hover, instead of the ul and the div.

Does anybody know how I can fix this?

Chrome screen shot

IE screen shot

NOTE: I added borders to the rotated div to make it easier to tell what I'm talking about.

HTML

<ul>
    <li><div id="pointer"></div><a href="#">List Item 1</a></li>
    <li><a href="#">List Item 2</a></li>
    <li><a href="#">List Item 3</a></li>
    <li><a href="#">List Item 4</a></li>
    <li><a href="#">List Item 5</a></li>
    <li><a href="#">List Item 6</a></li>
    <li><a href="#">List Item 7</a></li>
    <li><a href="#">List Item 8</a></li>
    <li><a href="#">List Item 9</a></li>
    <li><a href="#">List Item 10</a></li>
    <li><a href="#">List Item 11</a></li>
    <li><a href="#">List Item 12</a></li>
    <li><a href="#">List Item 13</a></li>
    <li><a href="#">List Item 14</a></li>
    <li><a href="#">List Item 15</a></li>
    <li><a href="#">List Item 16</a></li>
    <li><a href="#">List Item 17</a></li>
    <li><a href="#">List Item 18</a></li>
    <li><a href="#">List Item 19</a></li>
    <li><a href="#">List Item 21</a></li>
    <li><a href="#">List Item 22</a></li>
    <li><a href="#">List Item 23</a></li>
</ul>

CSS

ul {
    position:absolute;
    top:41px;
    left:175px;
    width:540px;
    height:361px;
    padding:0;
    z-index:15;
    margin-bottom:20px;
    border:1px solid #DEDCD9;
    border-right:none;
    background-color: #F5EFE3;
    -moz-border-radius: 0 0 0 12px;
    -webkit-border-radius: 0 0 0 12px;
    border-radius: 0 0 0 12px;
    background-image: -moz-linear-gradient(top, #F5EFE3, #FFF); /* FF3.6 */
    background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #F5EFE3),color-stop(1, #FFF)); /* Saf4+, Chrome */
    background-image: -webkit-linear-gradient(#69F5EFE3A89D, #FFF); /* Chrome 10+, Saf6 */
    background-image: linear-gradient(top, #F5EFE3, #FFF);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#F5EFE3', EndColorStr='#FFFFFF'); /* IE6–IE9 */
}

ul li {
    display:inline;
    line-height:32px;
    width:269px;
    border-right:1px solid #DEDCD9;
    border-bottom:1px solid #DEDCD9;
    float:left;
    margin:0;
    padding:0;
    overflow:visible;
}

ul li a {
    display:block;
    text-transform:none;
    padding-left:20px;
    color:#407d85;
}

#pointer {
    position:absolute;
    height: 15px;
    width: 15px;
    left:10px;
    top:-8px;
    border:1px solid black;
    /*border:0;*/
    background-color:#F5EFE3;
    -webkit-transform:rotate(45deg);
    -moz-transform:rotate(45deg);
    transform:rotate(45deg);
    filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476); /* IE6,IE7 */
    -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476)"; /* IE8 */
}

.lte8 #pointer {
    top:-12px;
}

---

That's a lot of brain damage. Personally, I'd go with a solution that's already been through all this runaround. Try QTip

Save your ninja programming skills for challenges that haven't been conquered yet!

---

I don't think there is a clean solution.

Choose between these workarounds:

• Remove the filter rule.
  • Forget about the gradient in IE; or
  • Make an image to replace it.
• Wrap the ul inside a div, and move some of the styles that were on the ul to the div.
  • Instead, give the ul the gradient background.
  • Live Demo of this technique.