3.5.2 Structure- and Layout-Dependent Bugfixes

As already mentioned in the introductory Section on IE Adjustments, not all bugfixes can be implemented independent of the structure and layout of any particular YAML-based site. The programmer must apply these bugfixes to suit the particular design.

This collection of bugfixes also contains those that correct the display of certain content elements. As YAML cannot know your content as you do, you must adjust your classes accordingly. All these bugfixes should be assembled in the IE Adjustment Stylesheet patch_[layout].css.

3-Pixel-Jog Bug

Textblock

The problem: as soon as a floating container is placed to the left of the static container #col3, the IE 3-Pixel-Jog Bug appears. If the content of the static column #col3 is longer than that in the float column, that longer content in #col3 moves 3 pixels to the left, as in the screenshot.

Solution: #col3 must be assigned the CSS property height: 1%. This hack again works on the basis of assigning the IE proprietary property hasLayout to the problematic container.

However, this hack does not actually force IE to correct the mysterious jog, but rather moves all elements of container #col3 to the right -- by exactly 3 pixels. This shudder can then be corrected with the help of two negative margins. This correction must be applied differently, depending on the order of the columns in the source code. Here is an example of a solution for the basic layout with the float columns each 200 pixels wide:

/* LAYOUT-DEPENDENT ADJUSTMENTS | LAYOUT-ABHÄNGIGE ANPASSUNGEN -----------------------*/
...
* html #col3 { height: 1%; }
* html #col1 { margin-right: -3px; }
* html #col2 { margin-left: -3px; }
* html #col3 { margin-left: 197px; margin-right: 197px; }
...

Note: the use of this bugfix for all six possible column orders of the basic layout is demonstrated in the examples/03_layouts_3col/ folder.

Important: this bugfix collides slightly with the use of graphic-free column separators: they will not always reach the footer.

In these cases, you must use the "Faux Columns" technique to design column backgrounds with background images.

Handling Oversized Elements

The Internet Explorer 5.x and 6.0 expanding box problem has already been discussed and its solution for a more flexible text line break integrated in the file iehacks.css. But we still need tools to deal with oversized block elements (forms, tables, images, etc.).

Within flexible layouts, such elements can cause great problems inside columns with flexible widths, as IE forcibly widens the corresponding parent container, instead of letting the element itself flow out into the neighboring columns like all other browsers do.

YAML offers two different methods for solving this problem. Such elements can be put into a DIV container with the class .floatbox. If the content item is too wide for the parent container, the overhanging edges are cut off and layout problems avoided.

As an alternative, YAML offers the CSS class .slidebox. It can be assigned directly to the oversized element, which will then overlap neighboring areas of the layout without extending its parent container and destroying the layout.

.slidebox {
   margin-right: -1000px;
   position:relative;
   height: 1%
}

Note: this class should only be applied to static elements: when used on floating elements, the negative margin creates an undesirable jog.

Disappearing Block Background Bug

The "Disappearing List Background Bug" is not the only bug that leads to incorrect display of background colors and images. IE 5.x and IE 6.0 have general problems displaying background images for elements with display:block -- as long as hasLayout is not activated.

The site creator must adjust these content elements specifically. Suitable CSS properties include width, height, or zoom used with concrete values other than auto.

Section 3.6: Layout Adjustments with basemod.css