Christoph Schüßler » Internet Explorer

Don’t use IE7 compatibility mode when testing JavaScript

Christoph Schüßler — Tue, 27 Apr 2010 17:17:41 +0000

I just learned the hard way that IE8 in IE7 compatibility mode is not the same as Internet Explorer 7. Apparently IE7 compatibility mode uses the IE8 JavaScript engine and you won’t be able to detect IE7-only JavaScript bugs when testing and developing in compatibility mode.

I recommend using IETester, it will throw all the errors you ever wanted (NOT!) at you. Combine it with Firebug Lite and sleep a little better.

Overlapping select field bug in IE6 – solved jQuery-style

Christoph Schüßler — Thu, 03 Sep 2009 08:43:25 +0000

When using drop-down navigation like Son of Suckerfish, which entails placing absolute positioned layers above the content layer, Internet Explorer 6 displays once again really stupid behavior when it comes to HTML forms with the SELECT element. When the drop-down layer hovers above a form, the SELECT still shines through, it stays above it and cannot be convinced by z-index or any other CSS trick to go where it belongs.

Some solutions have been proposed, among them:

hiding the select element on hover
replacing it with an input element on hover
or stop caring about IE6 altogether

These solutions all include drawbacks in usability or undesired UI changes, which can be confusing for the user. Another work-around, which is quite unnoticeable in the front-end is to place an invisible, empty IFRAME in the layer that will be positioned above the SELECT element.

Here’s how to do this jQuery-style:

The jQuery-Plugin:

jQuery.fn.activeXOverlap = function() { 

    $(this).each(function(i){
        var h   = $(this).outerHeight();
        var w   = $(this).outerWidth();
        var iframe  = ''
        $(this).prepend(iframe);
    });
}

The Plugin setup:

$(function() {
    $('.myHoverClass').activeXOverlap();
});

where .myHoverClass references all elements that should hover above the select.

The required CSS:

What this does is placing an Iframe behind every selected element, scaling it to the correct dimensions and hiding it from all browsers but IE6.

HTML-Code in verschiedenen Browsern testen

Christoph Schüßler — Thu, 08 Feb 2007 10:33:04 +0000

Einige Tools für alle, die keinen Fuhrpark von Macs, Windows- und Linux-PCs ihr eigen nennen und trotzdem ihr Design schnell für Internet Explorer 5, 6, 7, Firefox, Safari, Konqueror und Opera testen möchten:

Browsershots.org
Erstellt mehr oder weniger schnell (zwischen 10 Min. und 4 Stunden) Screenshots auf einer Vielzahl von Plattform-Browser-Kombi.
http://browsershots.org

Multiple IE
Tredosoft.com stellt diesen netten Installer zur Verfügung, mit dem sich nach einem Update auf IE7 alte IEs als Standalone-Versionen einrichten lassen.
http://tredosoft.com/Multiple_IE

IE Tester
Ein Webbrowser, der verschiedene Rendering-Engines emuliert. Kann inzwischen neben IE6 und IE7 auch IE8 Beta sowie weitere der üblichen Verdächtigen.
http://www.my-debugbar.com/wiki/IETester/HomePage