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

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 as shown in the image below




 after that, it loads a page using $.ajax Jquery method as shown below:



in IE 8 and 9 the div content of the popup are fit exactly to the content inside of it as shown above

but in IE7 the div of the popup is way bigger than the content as shown below:



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

  1. (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:

  1. .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:
  1. <%@ 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:

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

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


Thanks in advance.