<base> tag causes .append() to fail in IE

[paresh]

Hi,

In asp.net i want the image to resize to the browser window size for which iam using the following code which works fine in mozilla but in IE it does'nt append the resize image:

<asp:Content ContentPlaceHolderID="head" runat="server">
      <script type="text/javascript" src="<%=Url.Content("~/Scripts/jquery-1.3.2.js")%>"></script>
    <script type="text/javascript" src="<%=Url.Content("~/Scripts/jquery.cookie.js")%>"></script>
    <script type="text/javascript" src="<%=Url.Content("~/Scripts/jquery.timers.js")%>"></script>    
    <script type="text/javascript">               
        function loadImage()  
        {
            var image = new Image();
            
            //Code added to find height and width of the client window for different browser 
            var myWidth = 0, myHeight = 0;
            if (typeof (window.innerWidth) == 'number') {
                //Non-IE
                myWidth  = window.innerWidth;
                myHeight = window.innerHeight;
            } else if (document.documentElement && (document.documentElement.clientWidth || document.documentElement.clientHeight)) {
                //IE 6+ in 'standards compliant mode'
                myWidth  = document.documentElement.clientWidth;
                myHeight = document.documentElement.clientHeight;
            } else if (document.body && (document.body.clientWidth || document.body.clientHeight)) {
                //IE 4 compatible
                myWidth  = document.body.clientWidth;
                myHeight = document.body.clientHeight;
            }
           
           image.width  = myWidth  - 10;
           image.height = myHeight - 20;  
                     

            var url = '<%=Url.Action("DisplayMap")%>?t=' + new Date().getTime();

            $(image).load(function()
            {
                $('#map').empty().append(image);
                triggerRefresh();
            }).attr('src', url);
        }

        function triggerRefresh()
        {
            var connectionTypeValue = $.cookie('WebUI.ConnectionValue');
            
            // Default value
            if (connectionTypeValue == null)
            {
                connectionTypeValue = 1;
            }
            
            $('#map').oneTime(parseInt(connectionTypeValue), function()
            {
                loadImage();
            });
        }

        $(document).ready(function() {
            loadImage();           
        });

    </script>
        
</asp:Content>
<asp:Content ContentPlaceHolderID="body" runat="server">
    <div id="map">
    </div>
</asp:Content>

[dmethvin]

Can you attach a simple test case that is just plain HTML and Javascript that doesn't require ASP.NET to test?

[maxb]

I have the same problem (not only $.append but also appendChild).

In my test the problem is caused by tag <base />

​http://maxb.net/scripts/base/bug-on.html

​http://maxb.net/scripts/base/bug-off.html

​http://maxb.net/scripts/base/base.html

[dmethvin]

The test case shows this is a bug below jQuery in IE, but there may be a way to work around it.

[snover]

Thanks for the report, but this is not a jQuery bug. IE treats the <base> tag like a tag that requires a closing tag, and if you don’t do so, bad things happen. Replacing the base tag with <base href="foo"><!--[if LT IE 8]></base><![endif]--> fixes the problem.