Debugging for Internet Explorer (IE)
We code first for browsers that support Standards, and then we write extra rules for Internet Explorer. These rules are conditionals. The condition is "if Internet Explorer, do this instead".
We use few rules that do not work in Internet Explorer. Our Coding Standards restrict us to CSS2.1 for critical content. This is because we want our archive to be as accessible as possible to everyone who wants to use it, including people using old machines or browsers that don't work very well.
There are lots of resources online documenting the ways that Internet Explorer interprets CSS. Some useful ones are:
The most common problems fall into these categories:
I Can hasLayout
Sometimes in IE7 and below, you can see elements but you can't click them, or they are all messed up and overlapping each other, or they jump around the page when you scroll or click, or they appear and disappear and you don't know why. It's some freaky shit.
This is because of a special IE property called hasLayout. Read more about hasLayout.
hasLayout bugs that crop up on our archive divide roughly into two areas: calculations and stacking.
Calculations
Sometimes stuff jumps around when you interact with a page. This is because IE expands all elements to contain their content, so it has to guess at the size and placement of elements before they're completely loaded. For positioned or sized elements (which all has Layout), it doesn't always guess very well. The content loads and it doesn't fit right on the page, but once you hover or click or scroll, or do anything to make IE redraw that element, it slots into place, now that IE knows how big it really is.
You can stop IE making this calculations error by triggering hasLayout on the parent element. Give the broken element's parent the rule zoom:1;
Stacking
When you can see a link but not click it, it's probably lying underneath a transparent element.
Sometimes, especially in IE6 and below, an element will just look blank, like a big grey (or black or red or white) box. This is normally a stacking error combined with a background colour.
HTML tags are like tupperware boxes with no lids. A box nested inside another box sits both inside and on top of the box that contains it. Another name for this is layer stack. A useful term for the container/content nesting relationship is parent/child.
<div><p>text</p></div>
The layer P sits both inside and on top of the layer div. By default, all our tupperware is transparent,but we can make them opaque by giving them background:
<p style="background:grey;">text</p>
</div>When you take an element out of the document flow, sometimes you need to put it back on top of all the other boxes, so you can see it and interact with it. We do this with z-index:
#header h1 {z-index: 50;}
You might also declare a new stacking context by giving the element Layout. How to make this decision is beyond the scope of this document, which is intended to be a quick reference.
Margins and Padding
We use a reset to zero out all the margins and padding on all the elements in our layout. Sometimes IE doubles up margins, however, or sizes distances in a way that is different to all the other browsers. If it's bugging someone, you can override these differences in the conditionals. It is important to practice pragmatism and discernment when adding overrides. It is not necessary or desirable for the Archive to look identical in every browser; "pixel precison" is not a reasonable or desirable goal because our layout is designed to be flexible and adaptable, so it will work in contexts not yet conceived. When adding styles, you must consider that keeping the code simple and easy to maintain is a priority.
In IE 5.5 and below, a different box model is used to render elements. You can read about the box model, but it is not normally a problem for us, because we use a liquid layout.
Inherited Width
Sometimes IE interprets the declaration width:inherit unexpectedly. You might get a strangely wide submit button, or something breaking out of its container widthwise.
In the conditionals, redeclare the width on the affected element.
Height
Internet Explorer expands every box to contain its content. So height actually means min-height. Min-height is not explicitly supported in IE.
This causes virtually no problems, because we use a liquid layout, but it's useful to know. If you declare a min-height, you might need to add a height rule to IE.