RadTooltipManager in QuirksMode

[Pat]

I'm currently working with the RadTooltipManager to be able to click on a thumbnail and display a larger portion of the image positioned at the center of the browser window.  It is currently working in every browser except in "QuirksMode" in InternetExplorer.  When using QuirksMode, the image is placed at the verybottom of the screen. Any idea why this issue is happening or any advice on how to resolve it?  See attached images for clarification and understanding, below are snippets of my code.

<telerik:RadToolTipManager ID="RadToolTipManager1" runat="server" Width="400" Height="400" Enabled="true" Modal="true" OnAjaxUpdate="RadToolTipManager1_AjaxUpdate" ShowEvent="OnClick" HideEvent="ManualClose"   RelativeTo="BrowserWindow" Position="Center" ></telerik:RadToolTipManager>

protected void PictureGrid_DataBound(object sender, RadListViewItemEventArgs e)
{
       if (e.Item is RadListViewDataItem)
       {
           int position = ((RadListViewDataItem)e.Item).DataItemIndex;
           ((RadTextBox)e.Item.FindControl("ThumbnailCaptionTextbox")).Text = FindCurrentEntry().Attachments.ElementAt(position).Caption;
           Image image = (Image)e.Item.FindControl("ThumbnailImage");
           image.ImageUrl = "../ImageViewer.ashx?fileId=" + PictureGridData.ElementAt(position).Key + "&sizeType=thumbnail";
           RadToolTipManager1.TargetControls.Add(image.ClientID, true);
      }
}
protected void RadToolTipManager1_AjaxUpdate(object sender, ToolTipUpdateEventArgs e)
{
      Image image = new Image();

      bool found = false;
      for (int i = 0; ((i < PictureGrid.Items.Count) && (!found)); i++)
      {
           for (int j = 0; ((j < PictureGrid.Items[i].Controls.Count) && (!found)); j++)
           {
                if (e.TargetControlID == PictureGrid.Items[i].Controls[j].ClientID)
                {
                     image.ImageUrl = "../ImageViewer.ashx?fileId=" + PictureGridData.ElementAt(i).Key + "&sizeType=larger";
                     found = true;
                }
           }
      }
     e.UpdatePanel.ContentTemplateContainer.Controls.Add(image);
}

[Marin Bratanov]

Hello Pat,

Since you want the tooltip centered in the browser it has its CSS position property set to fixed in order to stay relative to the browser. The QuirksMode of IE resembles IE5 and IE6 which do not support this property and thus the tooltip is not positioned as you might expect.

What I can say is that entering quirksmode would generally not happen, especially if your page correctly has the XHTML 1.0 Transitional doctyle and is valid HTML, so this issue will not manifest itself. Additionally you can fore IE into its newest mode by using a meta tag as explained here by Microsoft (the IEMode=Edge option):

<meta http-equiv="X-UA-Compatible" content="IE=Edge" >

All that being said there is a way to make it work in quirks mode by forcing the position to absolute by using a CSS hack only IE6 will read (note the underscore in the beginning of the property):

div.RadToolTip
{
    _position: absolute !important;
}

Best wishes,
Marin
the Telerik team

[Pat]

That worked perfectly,

Thanks for the help Marin.

-  Pat