Home > Messages from the Ether > Why do the facts hate IE? part 2

Why do the facts hate IE? part 2

I finally sat down after work Friday to fix the IE problem. The right column boxes (currently etc.) were resizing irregularly and left justified instead of right. It might have been caused by a template change I made when I added the Comic Page of the Week, it might have been by a CSS change when I applied styles to all of the images, or it might have been just some crap IE problem that surfaced to waste my time. It could have been a lot of things and could have taken up my night (of which I value).

However, in less than 30 minutes I had it fixed and republished (what's the emoticon for patting yourself on the back?) and am here to impart wisdom. And, of course, to write this down so that I might retain some of the wisdom.

Web Technologies

Blog development uses several of the technologies that are available for Web development in general. Although bloggers may seem like layout monkeys, behind the scenes there are a few interesting transformations occurring.

Web content can exist as basic HTML. This is simply text with "hidden" commands to change fonts, font styles, indentation, and to provide links to other pages. Beyond basic HTML, Web content can use any range of formatting styles. These styles define the appearance of specific labeled blocks: all paragraphs can be made a certain font, all titles can have a blue background, or all lists can have a thick red border. The style definitions can exist within each block (creating unnecessary duplication), or together in one location on the page (binding them to that specific page), or within a separate file (allowing the entire Web site to access the same styles). The separate file is the CSS stylesheet. Blogs, along with a good portion of the commercial Web, use HTML plus CSS for their content and formatting respectively.

So, with this we've separated content and formatting in a fairly regular manner and with two distinct languages, but because content will change fairly often on blogs, we also need a technology that allows our blogs to act as a mail merge. The blog entries are treated as the addresses to be inserted and everything else is the form letter, or template. Several technologies exist that can perform this replacement. With JSPs (JavaServer Pages) [Wikipedia] and ASPs (Active Server Pages) [Wikipedia], the server dynamically builds each page as it is requested (although usually with caching). JSPs use Java for logical scripting on the page, ASPs usually use VBScript, and both require special plug-ins on the server to do the script processing. My blog software, MovableType, uses the Perl (Practical Extraction and Report Language) [Wikipedia] script language and processes the templates before publishing them to the Web site. Because of this, the Web site containing the blog does not need any additional modules for processing the Perl.

For MovableType, content is stored in a database (I use the free, open source MySQL DBMS), content is merged into HTML using Perl, and the resulting HTML is formatted using CSS.

Debugging the Ether

So, where's the problem?

I first ran the site through the XHTML and CSS validators. Some unencoded ampersands snuck into my entries, but those are harmless and easily replaced. The site is now valid and still failing in IE.

Next, I tested the styles used to create the left and right columns. I created a dummy page with a single left block and a single right block. They displayed correctly.

Then, I double-checked the hierarchy of DIVs and their styles in the main template. The template is a few hundred lines, un-compiled, of HTML formatting sections that contain other formatting sections. The "C" in CSS stands for "cascading," so I thought that I might have accidentally buried the right column DIV inside the center column and cascaded incompatible styles. Everything looked OK: the content (center column), left, and right DIVs were siblings and separate.

Most of the content in the right column is generated from blog entries. The column displayed correctly at one point, but it would be too tedious to change the entries, rebuild the site, and check the results. Over and over. Instead, I copied the page and started deleting sections, paring down to find the single line that was making a chump of me. I deleted the left and the center columns, along with the title and menu and such. With those changes, the right column was still screwed. I deleted everything except a single right block: the Comic Page of the Week. Still screwed. I then deleted the content of that block.

Aha.

Added back the text.

Aha-ha.

Added back the image.

Ouch.

Selectors in CSS are patterns that you can use to restrict a style to only specific parts of your document. The simplest styles are attached to single HTML elements (e.g. <P> or <BODY>), but many other selector formats exist to allow you to restrict the style to only very specific sections (e.g. paragraphs that have a specific attribute and are children of the BODY element). When I set up the IMG styles, I used selectors to make the image styles distinct. Selectors that (obviously) IE doesn't support.

The lesson here is--as I said before: test every change. If I had tested IE when I made the change, that single change, I would have known immediately where to look. Lesson learned. Maybe.