I discovered recently that Firefox 2 can’t handle negative CSS z-index values.  Apparently it throws any element with a negative z-index applied to it beneath the body.  I discovered this after I had already positioned elements on a page and found some improperly indexed elements on testing IE.  So instead of reworking all my existing z-index values, I just gave the offending element a negative value.  This worked in Firefox 3, IE7, Safari, and even IE6.  I thought all was golden until a co-worker’s brother called and said “Do you know your site doesn’t work in Firefox 2?”.

Frankly, it never even occurred to me to check different versions of Firefox.  I know this seems obvious, but Firefox had always been so consistent for me, I hadn’t thought about checking multiple versions.  So I loaded up FF2 on my Windows VM (I normally run a Mac with windows installed in a Virtual Machine to do cross-browser testing and other windows-specific things), and sure enough, we have a whole lot of nastiness. Dang. So now I rework all my z-index values like I should have in the first place, and all is good again.

This has been a public service announcement. Carry on.

As you may or may not be aware, XHTML 1.0 Strict does not include the old “target” attribute of a link.  In other words, you can no longer code thusly in order to tell the client browser that you’d like the clicked link to open in a new window:

<a href="http://some.domain"
           target="_blank">Clicky!</a>

So what does one do if you still want to open a link in a new window while still maintaining the integrity of your XHTML document? There have been many proposed solutions to this, but they basically devolve to two basic theories: 1) Use javascript to make it work; and 2) Extend the DTD to reinclude the old target attribute.  I tend to agree more with using javascript to make it work.  Please don’t misunderstand.  In an ideal world, extending the DTD would be awesome.  Afterall, extensibility is part and partial to the whole XHTML idea.  But in practice, I fear this would introduce too many interoperability issues between browsers.

So in order to open links in new windows you mark the tag as an “external” link using the rel tag, like this:

<a href="some.domain" rel="external">Clicky!</a>

Most articles I’ve read have been similar to the SitePoint article I linked to earlier, in that they use javascript like this to make any link tag with a rel attribute of “external” open in a new window:

<script type="text/javascript">
  function externalLinks() {
    if (!document.getElementsByTagName) return;
    var anchors = document.getElementsByTagName("a");
    for (var i=0; i<anchors.length; i++) {
      var anchor = anchors[i];
      if (anchor.getAttribute("href") &&
        anchor.getAttribute("rel") == "external")
          anchor.target = "_blank";
    }
}
window.onload = externalLinks;
</script>

Enter jQuery. I’ve recently grown quite fond of this javascript framework.  It’s elegant and powerful.  While the above code is simple and straightforward,  I’m already using jQuery, so why not just let it do the heavy lifting?  We code it this way:

<script type="text/javascript">
  $(function(){
    $("a[rel='external']").attr("target", "_blank");
    //update! '@' attribute syntax was deprecated
    //in jquery 1.2.  now just need the attribute
    //by itself.
  });
</script>

And in this manner, bliss is attained :-)  Enjoy!