Experienced Difficulties

Language selector for babelfish on MoFF1.0

Note Nov 6, 2005: below problem has been diagnosed and solved. Text to be adapted.

The code for access to the "babelfish" translation service (in the top-right corner of the "welcome" page) has been copied from "some" site (I don't remember which one).

It works okay, including the language selector, on MSIE6.0 (Microsoft Internet Explorer 6.0) and on MoFF1.0 (Mozilla Firefox 1.0), in my old table-based layout (401-tb). In the tableless layouts however (both 401-lo and 401-st), the selector continues to work okay on MSIE6.0, but it does not work at all on MoFF1.0.

The reason for this flaw is not understood. The babelfish submit button and the language selector are contained in an (I think) validly styled "float:right;" division. Note that it does work on MoFF1.0 too if the containing div is simply unfloated, but that is not a solution since it prevents me from positioning the header divisions where I like.

MSIE "3px float" problem

Note Nov 6, 2005: where suitable, I avoid the problem in 401-hy with table constructs.

Description: MSIE has a problem with text positioned alongside (or wrapping around) a div styled "float:left;". For background: see
   www.digital-web.com/articles/toward_a_more_standards_compliant_ie/

Possible solutions/workarounds:

• Either, style a margin-left and a width (both) for the right div;
• Or, size the left-floated div in height, e.g. by styling height or by adding a suitable number of dummy <br/>;
• Or, avoid the problem and use a table construct (this is the solution that I adopt for my table-of-contents).

MSIE "italic bug"

Note Nov 6, 2005: this is the most annoying bug of all, that forces me to use the hybrid 401-hy template for production. Note Mar 7, 2006: the hybrid template has now been used intensively, and always behaves flawlessly with predictable results.

This nasty bug tends to breakdown the layout:

• only with MSIE,
• only in tableless (CSS-style) layout,
• only when italics are used,
• in random and bizarre ways, and more often as more italics are used.

See  www.positioniseverything.net/explorer/italicbug-ie.html

For this website, I have used the suggested "overflow" workaround for the MainText division, with suitable tuning of widths, margins and paddings. This solves the problem as long as the navigation bar is wide enough to contain the navigation buttons in-line. The design (including the navigation menu) still tends to break down when the browser window is resized to even smaller widths.

Work-around for lack of target attribute in 4.01-strict

Note Nov 6, 2005: this work-around is okay and is used on all converted pages.

Templates 401tb, 401lo and derived pages fail 4.01-strict because I heavily use the "target" attribute (default <base target="_blank"> in head, along with target="_self" attributes in local links). For opening external links in a new window, here is a 4.01-strict work-around (which is still far from ideal since my default logic is inverted).

<a href="http://www.google.com/"
   onclick="window.open(this.href); return false">
   Google should open in a new window
   </a>

Google should open in a new window

CSS Survival Guide for MSIE

This section is intended for material supporting CSS design that works in MSIE.

Draft guidelines...

• Learn to Float With Caution
• Use the Lifelines
• Crawl, Crawl, Crawl
• Swimming Suits Galore