Ah, Done at Last

On schedule, the new Department of Chemistry site has gone live. The site is a great improvement graphically over the old site, offering up a modern CSS/XHTML layout that degenerates nicely to a text-only version in older and text-based browsers.

As with every site design, I uncovered new-to-me bizarre behaviors with all versions of Internet Explorer (both Windows and Mac OS versions). They caused me grief and I scorn Microsoft for their lack of updates to this ancient browser that so many still use. I note the problems I encountered here:

• Windows IE, all versions: We noticed some unexpected behavior with some pages after the site went live. Some of the content in #maincol would not show up upon the initial loading of the page, but scrolling down and back up would make it appear. After cursing a few times, I searched Google and found the answer to “the disappearing content” issue. The fix? Add position: relative (which is completely redundant and unnecessary in any other browser) to a few div blocks. I can only imagine the jumble of code that gives rise to this behavior.
• Mac OS IE, v5.23: I was having trouble with the navigation bar, which is composed of a list (for the primary, visible places of interest) and sub-lists that use the CSS drop-down technique to display. (All versions of Internet Explorer on both platforms required a snippet of JavaScript to work properly). When I tested the navigation scheme by itself initially to verify that it would work in most browsers, I had no problems. After taking the site live, however, the roll-overs produced some very bizarre effects. Absolutely nothing changed with respect to the navigation CSS. Still, after removing all other non-navigation CSS, the strange effects disappeared. For the life of me I could not figure out what was happening! How could CSS that has nothing to do with #nav affect that block? Well, after some investigation, the solution was found. I had to add to change div class declarations in the CSS from .blck to div.blck. Again, the code responsible for this behavior must be a mess. Why?
• Windows IE, v5 and v5.5: These do not respect my asymmetric padding (3% on the left, 7% on the right) of #container. No fix found.
• Windows and Mac OS IE, all versions: As mentioned above, the navigation scheme required JavaScript to get drop-down menus working. All other browsers have no problem with :hover on non-link elements.
• Windows IE, all versions: Internet Explorer does not understand child selectors à la #maincol > *. If it could, I could have saved a lot of pain in giving padding to those elements that are direct descendants of #maincol to keep the two columns nicely separated. Pain in the ass.
• Windows IE, all versions: The box model sucks in Internet Explorer, which gives rise to this problem. If content in the main column is shorter than the side column, grey background will show up in the main column below the primary content. Given the site was designed with a fluid (percentage-based) layout. This was avoided by using a CSS hack (one of three in the entire CSS flotilla).

• Mac OS IE, v5.23: This browser has difficulty understanding when to clear floated elements. I curse thee! I still have not solved the footer issue in this browser. Ugh.

  That’s all the rants I have for now. I’m happy with the new site look and structure, and thus far, the response has been enthusiastic.