resize div according to content size after $.ajax in IE7
===

I have a pop up that loads form a page when mousing over a link

first, it loads a loading image

after that, it loads a page using $.ajax Jquery method

in IE 8 and 9 the div content of the popup are fit exactly to the content of the page being loaded by $.ajax

but in IE7 the div of the popup is way bigger than the content of the page

below is the java script for tooltip (in our case the  contentType attribute is set to page):

  

    (function ($) {
        // Implementation
        $.fn.tooltip = function (options) {
    
            var settings = $.extend({
                content: '',
                contentType: 'html', //html,text,page
                destroy: false
            }, options || {});
    
    
            var hideDelay = 10;
            var currentID;
            var hideTimer = null;
            var forAttr = this.attr('for') === undefined ? $(this).attr('id') : this.attr('for');
            
    
    
            if ((settings.destroy == true) && ($('div.PopupContainer[for=' + forAttr + ']').length > 0)) {
                $('div.PopupContainer[for=' + forAttr + ']').remove();
                return;
            }
    
            var container = $('<div class="PopupContainer" style="text-align:center" for=' + forAttr + '>'
                              + '<table border="0" cellspacing="0" cellpadding="0"  align="center" class="Popup" for=' + forAttr + '>'
                              + '<tr>'
                              + '   <td class="corner topLeft"></td>'
                              + '   <td class="top"></td>'
                              + '   <td class="corner topRight"></td>'
                              + '</tr>'
                              + '<tr>'
                              + '   <td class="left">&nbsp;</td>'
                              + '   <td><div class="PopupContent" for=' + forAttr + '></div></td>'
                              + '   <td class="right">&nbsp;</td>'
                              + '</tr>'
                              + '<tr>'
                              + '   <td class="corner bottomLeft">&nbsp;</td>'
                              + '   <td class="bottom">&nbsp;</td>'
                              + '   <td class="corner bottomRight"></td>'
                              + '</tr>'
                              + '</table>'
                              + '</div>');
    
            $('body').append(container);
    
            $(this).bind('mouseover', function () {
                if (hideTimer)
                    clearTimeout(hideTimer);
    
                var pos = $(this).offset();
                var width = $(this).width();
    
                var pageUrl = settings.content;
                var elementHeight = $(this).height()
                var containerTop = (pos.top + elementHeight) + 'px';
                var containerLeft;
    
                $('.PopupContent[for = ' + forAttr + ']').html('&nbsp;');
    
                $('.PopupContent[for = ' + forAttr + ']').css('width', '190px');
                $('.PopupContent[for = ' + forAttr + ']').css('text-align', 'center');
    
                switch (settings.contentType) {
                    case 'page':
    
    
                        $('.PopupContent[for = ' + forAttr + ']').css('text-align', 'center');
                        $('.PopupContent[for = ' + forAttr + ']').css('padding', '0px');
                        if (!$('.PopupContent[for = ' + forAttr + ']').hasClass("LoadingImage"))
                            $('.PopupContent[for = ' + forAttr + ']').addClass("LoadingImage");
    
                        if (pos.left + width < Math.round($(document).width() * 0.55)) {
    
                            container.css
                            ({
                                left: (Math.round(pos.left)) + 'px',
                                top: containerTop
                            });
    
                        }
    
                        else {
                            container.css
                            ({
                                left: (pos.left + width - container.width()) + 'px',
                                top: containerTop
                            });
                        }
    
                        container.show();
    
                        var containerCoordinates = container.position().left + container.width();
    
    
    
                        hideTimer = setTimeout(function () {
                            $.ajax({
                                type: "POST",
                                url: pageUrl,
                                contentType: "text/html",
                                error: function (XMLHttpRequest, textStatus, errorThrown) {
                                    alert(textStatus);
                                    if ($('.PopupContent[for = ' + forAttr + ']').hasClass("LoadingImage"))
                                        $('.PopupContent[for = ' + forAttr + ']').removeClass("LoadingImage");
                                },
                                success: function (result) {
                                    if ($('.PopupContent[for = ' + forAttr + ']').hasClass("LoadingImage"))
                                        $('.PopupContent[for = ' + forAttr + ']').removeClass("LoadingImage");
                                    $('.PopupContent[for = ' + forAttr + ']').html(result);
                                    $('.PopupContent[for = ' + forAttr + ']').css('width', 'auto');
                                    $('.PopupContent[for = ' + forAttr + ']').css('display', 'block');
                                    $('.PopupContent[for = ' + forAttr + ']').css('padding', '20px');
                                    $('.PopupContent[for = ' + forAttr + ']').css('text-align', 'left');
                                    if (pos.left + width < Math.round($(document).width() * 0.55))
                                        containerLeft = (pos.left + Math.round(width / 2)) + 'px';
                                    else
                                        containerLeft = (Math.round(containerCoordinates - container.width()) - Math.round(width/2)) + 'px';
                                    $('table[for = ' + forAttr + ']').width($('.PopupContent[for = ' + forAttr + ']').width + 50);
    
                                    container.css
                                ({
                                    left: containerLeft,
                                    top: containerTop,
                                    width: ($('.PopupContent[for = ' + forAttr + ']').width + 50) + 'px'
                                });
                                }
                            });
                        }, 1000);
    
    
                        break;
    
                    case 'html':
                        $('.PopupContent[for = ' + forAttr + ']').html(settings.content);
                        container.css({
                            left: (pos.left + width) + 'px',
                            top: pos.top - 5 + 'px'
                        });
                        container.css('display', 'block');
                        break;
    
                    default:
                        $('.PopupContent[for = ' + forAttr + ']').text(settings.content);
                        //12 pixel is for the image paddingfor errors
                        container.css({
                            left: (pos.left + width + 12) + 'px',
                            top: pos.top - 5 + 'px'
                        });
                        container.css('display', 'block');
                }
    
    
    
    
    
            });
    
            $(this).bind('mouseout', function () {
                if (hideTimer)
                    clearTimeout(hideTimer);
                hideTimer = setTimeout(function () {
                    container.css('display', 'none');
                }, 1);
            });
    
            // Allow mouse over of details without hiding details
            $('div.PopupContainer[for=' + forAttr + ']').mouseover(function () {
                if (hideTimer)
                    clearTimeout(hideTimer);
                
                    
                    if (settings.contentType == 'page' && $('.PopupContent[for = ' + forAttr + ']').hasClass("LoadingImage")) {
                    hideTimer = setTimeout(function () {
                        $('.PopupContent[for = ' + forAttr + ']').removeClass("LoadingImage");
                        container.css('display', 'none');
                    }, hideDelay);
                }
            });
    
            // Hide after mouseout
            $('div.PopupContainer[for=' + forAttr + ']').mouseout(function () {
                if (hideTimer)
                    clearTimeout(hideTimer);
                hideTimer = setTimeout(function () {
                    container.css('display', 'none');
                }, hideDelay);
            });
        }
    })(jQuery);

-------------------------------------------

below is the CSS for the popup:

   

     PopupContainer
    {
        position:absolute;
        left:0;
        top:0;
        display:none;
        z-index: 20000;
    }
    
    .Popup
    {
    }
    
    .PopupContent
    {
        background-color: #FFF;
        min-width: 200px;
        min-height: 50px;
        width: 200px;
    }
    
    .Popup .corner 
    {
        width: 19px;
        height: 15px;
    }
        
    .Popup .topLeft 
    {
        background: url(../images/ToolTip/balloon_topLeft.png) no-repeat;
    }
        
    .Popup .bottomLeft 
    {
        background: url(../images/ToolTip/balloon_bottomLeft.png) no-repeat;
    }
        
    .Popup .left 
    {
        background: url(../images/ToolTip/balloon_left.png) repeat-y;
    }
        
    .Popup .right 
    {
        background: url(../images/ToolTip/balloon_right.png) repeat-y;
    }
        
    .Popup .topRight 
    {
        background: url(../images/ToolTip/balloon_topRight.png) no-repeat;
    }
        
    .Popup .bottomRight 
    {
        background: url(../images/ToolTip/balloon_bottomRight.png) no-repeat;
    }
        
    .Popup .top 
    {
        background: url(../images/ToolTip/balloon_top.png) repeat-x;
    }
        
    .Popup .bottom 
    {
        background: url(../images/ToolTip/balloon_bottom.png) repeat-x;
        text-align: center;
    }
    
    img.errorElement
    {
        src:url(../images/Validation/error.png);
        background: white url(../images/Validation/error.png) no-repeat;
        width:0px; height:0px; padding:8px; margin-left:3px;margin-top:2px; 
         
    }
    
    div.LoadingImage
    {
        background-position: 50% 50%;
        background-image:url(../images/ToolTip/ajax-loader.gif);
        background-repeat:no-repeat;
        height:80px;
    }

------------------------------

below is the HTML for the page to display in the popup:

    <%@ Control Language="C#" AutoEventWireup="true" CodeBehind="SecurityViewUser.ascx.cs" Inherits="RoyaltyRewardsWebApp.controls.security.SecurityViewUser" %>
    <style type="text/css">
    .mainDiv
    {   
        border: 0px;
        padding:5px;
    }
    .oneDiv
    {
        
        float:left; /* add this */
        border: 0px;
        text-align:left;
        padding-right:30px;
        width:100px;
        text-align:left;
        display:inline;
        
    }
    .TwoDiv
    {   
        border: 0px;
        text-align:left;
        overflow:visible;
        text-align:left;
        display:inline;
    }
    </style>
    
    <div id="container" style="width:auto">
        <div class="mainDiv">
            <div class="oneDiv"><asp:Label runat="server" ID="LabelRole" 
                    meta:resourcekey="LabelRoleResource1"></asp:Label></div>
            <div class="TwoDiv">
                <asp:Label runat="server" ID="LabelRoleForView" 
                    meta:resourcekey="LabelRoleForViewResource1"></asp:Label>
            </div>
        </div>
        <div class="mainDiv">
        <div class="oneDiv">
            <asp:Label runat="server" ID="LabelStatus" meta:resourcekey="LabelStatusResource1"></asp:Label></div>
            <div class="TwoDiv">
                <asp:Label runat="server" ID="LabelStatusForView" 
                    meta:resourcekey="LabelStatusForViewResource1"></asp:Label>
            </div>
        </div>
        <div class="mainDiv">
        <div class="oneDiv">
            <asp:Label runat="server" ID="LabelLogin" meta:resourcekey="LabelLoginResource1" ></asp:Label></div>
            <div class="TwoDiv">
                <asp:Label runat="server" ID="LabelLoginForView" 
                    meta:resourcekey="LabelLoginForViewResource1"></asp:Label>
            </div>
            
        </div>
        <div class="mainDiv">
           <div class="oneDiv"><asp:Label runat="server" ID="LabelPassword" meta:resourcekey="LabelPasswordResource1" ></asp:Label></div>
            <div class="TwoDiv">
                <asp:Label runat="server" ID="LabelPasswordForView" 
                    meta:resourcekey="LabelPasswordForViewResource1"></asp:Label>
            </div>
        </div>
        <div class="mainDiv">
            <div class="oneDiv"><asp:Label runat="server" ID="LabelName" meta:resourcekey="LabelNameResource1" ></asp:Label></div>
            <div class="TwoDiv">
                <asp:Label runat="server" ID="LabelNameForView" 
                    meta:resourcekey="LabelNameForViewResource1"></asp:Label>
            </div>
        </div>
        <div class="mainDiv">
            <div class="oneDiv"><asp:Label runat="server" ID="LabelEmail" meta:resourcekey="LabelEmailResource1" ></asp:Label></div>
            <div class="TwoDiv">
                <asp:Label runat="server" ID="LabelEmailForView" 
                    meta:resourcekey="LabelEmailForViewResource1"></asp:Label>
            </div>
        </div>
        </div>

------------------------------

below is how we call the tooltip:

    $(this).tooltip({ content: $(this).attr('href'), contentType: 'page' });

where $(this) is a `<a>` tag.


Thanks in advance.
