Disabled Border and IE7

[marclemagne]

Hi,

Using the following, I am having a problem with IE7. Two, actually.

JS Code

$('.show-tooltip').each(function() {
   $(this).qtip({
      content: {
         url: 'tooltip.html',
         data: { id: $(this).attr('id') },
         method: 'post'
      },
      position: {
         corner: {
            target: 'rightBottom',
            tooltip: 'bottomLeft'
         }
      },
      style: {
         background: 'transparent',
         color: '#ffffff',
         width: 296,
         height: 191,
         border: { width: 0, radius: 0 }
      },
      hide: {
         fixed: true
      }
   });
});

tooltip.html is a file with a div containing a transparent PNG background bubble and some CSS formatting.

Problem 1: When the tip first appears, there's a thick black border around the PNG in the shape of the PNG. It disappears a second later. Kind of funny looking, but not desired. Did I disable borders correctly?

Problem 2: The text inside of the div loses its anti-aliasing for a moment but corrects itself quickly. This is not a major problem for me, but I'm curious why it's happening and if there's a quick solution. Perhaps this is because contents of the file is being pulled using AJAX and the browser did not yet get a chance to apply anti-aliasing?

I appreciate your help, thoughts, ideas...

Very nice extension. I'm happy to be using it. Appears to work fine in the other browsers I tested this in, including IE6.

Thanks,
Marc

Update: Sorry, both issues exist in IE8, as well.

[Craig]

marclemagne, you can disable the border property simply by excluding it from the code itself, or setting it to false.

Regarding both of these issues, it's actually a combination of problems with IE's filters. Antialiased text is only supported on elements without filters applied (including opacity), so the problem you're seeing is unavoidable unfortunately. The PNG issue is also likely caused by this.

You can get around this by simply using a different effect other than 'fade', such as 'slide' or 'grow'.

[marclemagne]

Craig,

Thank you for your help. I will see if this helps.

Thanks,
Marc