Tooltip in IE position problems

Question

Hey Everyone,

Here is some code I use for a tooltip that hovers above its element so it doesnt popup below and force the user to scroll to see it. It works fine in all browsers except IE. In IE it positions way below the element instead of above it.

How can I fix the positioning error with IE? Im stumped.

<style type="text/css"> 
.ToolTip 
{
    border: 2px solid black;
    background:#fff;
    display:none;
    padding:10px;
    width: 325px;

    z-index:1000;
    -moz-border-radius:4px;
}
</style> 

    <script language="javascript" type="text/javascript">
        $(document).ready(function () {


    $(".tip_holder").hover(
                function () {
                    var $containerWidth = $(this).width();
                    var $offset = $(this).offset();

                    $('#ToolTipPopUp')
                        .prepend('<div id="tooltip" class="ToolTip">' + $("#ToolTipHolder").text() + '</div>');

                    var $tipWidth = $('#tooltip').width();
                    var $tipHeight = $('#tooltip').height();

                    $('#tooltip').css({
                        'top': $offset.top - ($tipHeight + 15),
                        'left': $offset.left - ($tipWidth - $containerWidth) / 2,
                        'position': 'absolute',
                        'display': 'block'
                    });

                },
                function () {
                    $('#tooltip').remove();
                }
            );

        });

    </script>


<img src="/Content/Images/WhatsThis.png" class="tip_holder" />
                    <div>
                        <div id="ToolTipPopUp"></div>     
                        <span id="ToolTipHolder" style="display:none;">For Visa, MasterCard
                            and Discover, the card verification number is a 3-digit security code that is printed
                            on the back of your card.
                            <br />
                            <br />
                            For American Express, the card verification number is 4-digits and appears on the
                            front of the card. The number appears on the signature strip after the last four
                            digits of your account number. 
                        </span>
                    </div>

Answer 1

IE will drive you insane. If you don't mind using javascript to solve the issue you can use http://rafael.adm.br/css_browser_selector/ or you can use conditional statements to use a different stylesheet for IE like this: <!--[if IE 8]> link your stylesheet here <![endif]--> You can use just several different versions of if IE statements, just google "IE if statements".