5.3 Known Problems
Internet-Explorer 5.x: Collapsing Margin on #col3
| IE 5.x/Win | IE 5.x/Mac | IE 6 | IE 7 |
|---|---|---|---|---|
Bug active | Yes | Unknown | Yes *) | Yes *) |
*) This bug is actually present in these browser versions, but can be countered by the special IE clearing (see Section 2.7: The Clearing of Column #col3).
Description: The column #col3 is defined with width:auto. Internet Explorer duly gives this container the property hasLayout = false.
In the event that in a three-column layout, the left column is the shortest while the right column is the longest, IE collapses the left margin of #col3.
This means that any border on #col3 (graphic-free column separator!) between #col1 and #col3 slips over to the left side of the page. Any background defined for #col3 will be stretched out to the left edge of the page. This widening has no influence on the actual content of the DIV (text, images, etc.), as #col3 is set to be behind the side columns via the z-index. The bug can be observed on the following test page.
Testpage: ie_bug.html (only visible in IE5.x!)
Workaround 1: The visual effects of this bug can be avoided by using an image for the left-side column separator, and defining this as a background image for another container, like #main. Furthermore, #col3 should have no background assigned, neither graphic nor color (see Section 4.8: Draft Layout "3col_advanced"). If required, these can be assigned to #main or .page.
Workaround 2: Alternatively, you can avoid the problem by activating hasLayout = true for #col3 from within the adjustment file for Internet Explorer:
...
#col3 {height: 1%;}
...
This CSS hack is, however, incompatible with the graphic-free column separators. Should you choose this method, you must then use background images (Faux Columns technique) instead.
Note: YAML Version 2.5 eliminated this bug in IE 6 and IE 7. As IE 5.x is no longer very popular, this bug does not often cause problems -- especially as it does not actually hinder access to the web page.
Mozilla & Firefox
Mozilla browsers up to version 1.7.0 (and Firefox up to version 1.0) contained a Float Clearing Bug. This prevented the column separator of #col3 from reaching all the way to the footer if one of the side columns were longer than the center column. This had no effect on graphics that were assigned as background images.
Bugfix: the bug was fixed in the July 2004 with version 1.7.1, and is no longer relevant.
Netscape
Netscape 6 & 7: the browser versions 6.x are based on unfinished beta versions of Mozilla and are extremely faulty. Although version 7 officially uses the rendering engine of Firefox 1.0.1 or 1.0.2, there are great CSS compatibility problems here too -- especially with the versions 7.0 and 7.1.
YAML officially supports Netscape version 8 and up. YAML-based layouts had no display errors in this version.
Netscape 7: Overflow Bug
The markup-free clearing using overflow:hidden causes display errors up to Netscape 7.1 when used on static boxes. This means that the content in subtemplates is hidden. The following workaround counters this bug.
Workaround: in general, it is enough to float the container in question. In this case, you must assure that the container occupies the complete available width to avoid bothersome side effects in your layout.
Should you use subtemplates and require support for these old Gecko engines, you can use the CSS class .subcolumns_oldgecko instead of .subcolumns. This alternative CSS class incorporates the float hack described above.
Note: if, when using .subcolumns_oldgecko, subsequent content is displayed next to the subtemplate rather than after it (so far only seen in tables), assign the property display:inline to those elements.
Opera
Opera 9.01 Bug: Opera's version 9.01 contains a hover bug, which collapses the margins between a clearing element and the next element. The current version, 9.02, has fixed this bug.
Workaround: instead of using margins, you can create whitespace with padding or borders. This avoids the problem entirely.
Opera 6: although Opera 6 in principle should be able to display YAML-based layouts correctly, certain conditions can lead to unpredictable phenomena such as unclickable areas, etc. These browser bugs cannot be countered with reasonable measures. Happily, the browser is no longer widespread enough to require our attention.
