List bullets invisible in IE8 until mouse hover

[dstj]

Hi,

Here's the problematic situation. I've got a very simple UL list in a RadToolTip. In IE8, the list bullets do not appear until I move my cursor over the tooltip. No CSS is applied to the tooltip or list.

Attached are two images: initial rendering (before the mouse hovers the tooltip) and after.

In classic MS way, the problem is only with IE8. Firefox, Safari and Chrome appear to behave correctly.

   <asp:Button ID="btnTooltip" runat="server" Text="ToolTip" />
   <telerik:RadToolTip ID="RadToolTip1" runat="server" TargetControlID="btnTooltip">
      <ul>
         <li>item 1</li>
         <li>item 2</li>
         <li>item 3</li>
      </ul>
   </telerik:RadToolTip>

Can you please provide a fix or workaround?

Thanks,

dstj.
using version 2009.3.1103.35

[Martin]

Hi dstj,

Unfortunately, this is a bug with IE8, and although I have tried several approaches that usually fix this kind of layout problems (yes, I think that it is somehow related to the infamous hasLayout property of MSIE, although it has been fixed in version 8, or at least they say it is fixed) - display: inline, zoom: 1, etc I did not have any luck.

What I can suggest:

Use non-repeatable background images with left padding for bullets (you will need to set list-style: none to the UL and LIs if you use this approach) - this will work in all browsers flawlessly. Do not use list-style-background: url(), because it will fail in IE again.

... or:

Use the X-UA meta tag to trigger the IE7 rendering engine on users with IE8 - not a quite good approach at all, but useful sometimes.

I am really sorry I am not to help, but as I said - the issue is related to the browser rather than with RadToolTip or the way it works.

Greetings,

Martin Ivanov
the Telerik team

 

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Gaston]

I had a similar problem when i set the list-style-position: inside  to the <LI>. I moved them outside and worked. Not sure it will work but you could try that.