A few weeks ago I posted a closable plug-in for jQuery and I’ve been using it in a number of places for list based close operations. It works well in most but I ran into an apparently known problem with Internet Explorer (pre IE8 Standards Mode). The closable plug-in works by injecting either an image or a styled div tag into the specified element and absolutely positioning it – typically in the upper right corner. The relevant code does something like this:

var el = $(this);
var pos = el.css("position");
if (!pos || pos == "static")
    el.css("position", "relative");
var h = opt.handle ? $(opt.handle).css({ position: "relative" }) : el;

var div = opt.imageUrl ? $("<img />").attr("src", opt.imageUrl).css("cursor", "pointer") : $("<div></div>");
div.addClass(opt.cssClass)

This works great with all browsers and in most situations even with old versions of IE. But  there’s a problem with pre IE 8 Standard Mode rendering of position: relative elements. Once position: relative is applied apparently these elements lose their ability to be contained in the parent container. As soon as elements become relative they spill out of the bottom the container regardless of the overflow or overflow-y settings.

You can see this first hand here with Internet Explorer in compatibility mode:

http://www.west-wind.com/WestwindWebToolkit/samples/Ajax/AmazonBooks/BooksAdmin.aspx

(it might be fixed by the time you look so here’s a screen shot)

as you can see the content is simply spilling beyond the containing list. Basically there is an outer div (divBookListWrapper) that has a fixed height:600px and overflow-y: scroll set so the list should scroll whenever the content doesn’t fit. Inside of this element there are then a number of .bookitem <div> tags which render the detail content. The closeable plug-in then adds the position:relative as part of its processing.

This renders correctly in every browser but IE regardless of whether the .closable plug-in has been applied or not. In IE this also renders correctly if position: relative is not applied. Add position relative as part of the .closable plug-in (or just in markup) and the mess above occurs.

I’ve been mucking with this for a while, but I don’t see a workaround for this. The link mentioned at the top of this post mentions that quirks mode in IE is the only way around this. Oh joy. This is fixed in IE 8 Standards mode, but that’s of little solace given that IE 8 is still lightly used and that compatibility mode can easily be accessed. Also – annoyingly – the IE Tab and other IE plug-ins all use pre IE 8 rendering so the problem also shows up in IETab mode in FireFox.

In this case the solution is easy enough: Don’t use the plug-in and manually connect the delete button using a <div style=”float: right”> but this is not nearly as clean as the .cloasable plug-in which can be applied unobtrusively. Here’s the original template that top aligns the remove buttons:

<script type="text/html" id="item_template">  
<div id="divBookItem" class="bookitem">
    <div style="float: right;" id="divBookOptions">
        <img src="../../css/images/remove.gif" onclick="removeBook(this,event )" class="hoverbutton" />        
        <br />
        <small><#= SortOrder #></small>
    </div>
    <img src="<#= AmazonSmallImage #>" id="imgAmazon"/>
    <b><a href="<#= AmazonUrl #>" target="_blank" ><#= Title#></a></b>
    <br/>
    <small><#= Author #></small>
    <br/>
    <# if (Highlight) { #>
        <small><i>Highlighted</i></small>
    <# } #>   
</div>    
</script> 

If anybody happens to know of a work around that can keep the position:relative in place I’d love to hear it.

Things like this make me yearn for desktop development again. Nah, just kidding, but still I wonder when we can realistically start ignoring old versions of IE. What can we do to accelerate getting old versions of IE out of the Web? Purposely break sites with stuff like the above oughta be a good start – now if we could only get some of the big sites to do that so the turnover is quicker :-}.