structure independent adjustments

3.5.1 Structure- and Layout-Independent Bugfixes

All structure- and layout-independent bugfixes for IE's CSS bugs are collected in the file iehacks.css in the yaml/core/ folder.

Important: the stylesheet iehacks.css from the yaml/core/ folder is one of the core components of the YAML framework. It contains all the structure- and layout-independent bugfixes for IE (versions 5.x/Win - 7.0/Win). These corrections are essential for the strength and error-free presentation of YAML-based layouts in Internet Explorer. This stylesheet is required in every YAML-based layout and should remain unchanged!

Fundamental CSS Adjustments

YAML recommends forcing modern browsers (IE8, Firefox, Safari, ect.) to always display vertical scrollbars via CSS3 property overflow-y (see Section 3.6). In older Internet-Explorer versions, this workaround are not required, as the scrollbars are always displayed.

/**
 * (en) No need to force scrollbars in older IE's ...
 * (de) Scrollbar-Fix wird in alten IE's nicht benötigt ...
 *
 * @workaround
 * @affected   IE6, IE7
 * @css-for    IE6, IE7
 * @valid      no
 */

body { o\verflow:visible; }

The next declaration is important for Internet Explorer 7, which has problems when zooming in on YAML-based layouts.

body { position:relative; }
* html body { position:static; }
#main{ position:relative; }

The relative positioning of the body solves nearly all IE 7's zoom problems. The container #main also gets this property. This avoids wrong positioning of columns after resizing the browser window while using IE-Expressions.

Adjusting Clearing Methods for IE

The CSS adjustments for the clearfix clearing are based on work done by Roger Johansson and are already compatible with IE 7.

/* Clearfix Adjustments / Anpassungen für Clearfix-Methode */
.clearfix { display: inline-block; }
.clearfix { display: block; }
* html .clearfix { height: 1%; }

/* Overflow Adjustments / Anpassungen für Overflow-Methode */
.floatbox { width:100%; }

The second part deals with the CSS class .floatbox, in which the overflow method is integrated into YAML. All IE versions are given the property hasLayout with the width, causing them to react properly to this clearing method. For the older versions (5.x and 6.0)  this is essential, for IE7 it's a saveguarding for printout, where overflow:hidden can't be used, due to another IE-bug.

Increasing the Reliability of the Layout

Numerous IE CSS bugs can be resolved by activating the proprietary property hasLayout. For some of the predefined containers in the source code structure, this bugfix can be used without there being a real need for it - purely as a precautionary measure.

body { height:1%; }

/* IE6 & IE7 */
.page_margins, .page, #header, #nav, #main, #footer { zoom:1; }

/* IE 5.x & IE6 | IE6 only */
* html .page_margins, * html .page { height:1%; hei\ght:auto; } 

/* IE 5.x & IE6 | IE6 only */
* html #header, * html #nav,
* html #main, * html #footer { width:100%; wid\th:auto; }

The two containers which contain the layout (.page_margins and .page) are given hasLayout via the property zoom:1 (IE6 & 7) or height: 1% (IE 5.x). The property width was intentionally left out here: as the file iehacks.css is the last to be imported into the browser, the designer's intentions could be unintentionally overwritten.

In the inner containers, the use of height is problematic, in case containers with fixed heights should be intended. To retain flexibility, the proprietary property zoom s used for IE 6. The use of zoom:1 has no disturbing side effects. For IE 5.x, the box model bug is exploited, allowing the unproblematic use of width: 100%. IE 5.0 does not recognize the property zoom, thus requiring this additional declaration.

Important: The rules for the former's ID #page_margins and #page still included for backward compatibility, but they are no longer recommended. Use the corresponding CSS classes in new projects.

Avoiding an Incomplete Display of Column Content

* html #col1, 
* html #col2, 
* html #col3 { position:relative; }

A further workaround helps to avoid display problems in older versions of IE. IE 5.x and IE 6.0 sometimes display content only partially or not at all. The relative positioning of the column containers solves this problem.

After these general preventative measures, the following details the handling of the most important known CSS bugs and their treatment.

Escaping Floats Bug

The Escaping Floats Bug causes Internet Explorer to position floats incorrectly within a DIV container. Two problems appear. First, the size of the surrounding DIV container is incorrectly calculated, and second, the floats float out of the right-hand side of the container.

Both problems can be solved with the activation of hasLayout - in our example, with height:1%. This bugfix has already been integrated within the basic layout in the section "Increasing the Stability of the Layout": further measures are not required.

Guillotine Bug

The IE/Win Guillotine Bug is triggered by many actions, in particular hover effects on hyperlinks. This is absolutely the best-known IE bug -- and unfortunately, the most reliable way to avoid it is by: avoiding hover effects.

/* Guillotine Bug when changing link background color */

* html body a,
* html body a:hover { background-color: transparent; }

Double Float-Margin Bug

Internet Explorer doubles the values of the side margins when positioning floated containers: the ("Doubled Float-Margin Bug") creates layout problems for the variable order of content columns.

Bugfix: Happily, the bug is easy to fix. Both float columns #col1 and #col2 are given the property display:inline: ignored by all modern browsers, this guarantees that Internet Explorer 5.x and 6.0 display the margins correctly.

...
* html #col1, * html #col2 { display: inline; }
...

Expanding Boxes in Internet Explorer

Internet Explorer has great difficulty dealing with oversized content within fixed-width boxes. See Internet Explorer and the Expanding Box Problem.

Bugfix: force a special line break-mode to guarantee a clean display in IE:

...
* html #col1_content,
* html #col2_content,
* html #col3_content { word-wrap: break-word }
...

The property word-wrap: break-word is proprietary to Internet Explorer and incomprehensible to other browsers. It allows the browser to break text not only between words, but after every letter. This does reduce readability somewhat when used in a very narrow column, but does provide a consistent layout. The older 5.x versions of IE unfortunately do not react to this hack.

Oversized content elements can only be dealt with on the layout level: suggestions below.

Internet Explorer and the Italics Problem

The IE Italics-Bug is one of the most difficult to recognize and probably one of the least known CSS bugs. IE expands the width of a container as soon as content in italics (marked with <i> or <em>) touch the right edge of the line. The CSS property font-style: italics can also trigger the bug.

The resulting greater width of the parent container creates problems in float-based layouts, as the container no longer fits in the layout. The problem mostly affects the static column #col3. Combined with the lack of hasLayout, static containers can even be completely hidden.

Bugfix: the fix for this problem is quite simple: the CSS property overflow:visible; is merely assigned to all elements of the web page. This property's position in base.css, the first stylesheet loaded, allows it to be overwritten by the later stylesheets should a layout require it.

* html body * { overflow:visible; }
* html iframe, * html frame { overflow:auto; }
* html frameset { overflow:hidden; }

Although the value visible is the standard for the overflow property, and its explicit statement superfluous, it nevertheless solves the Italics Problem for IE 5.5+. There is no solution for IE 5.01 -- luckily, this browser is increasingly rare.

In addition there are some further corrections needed in IE 5.x and IE6, so that textarea and input elements will be displayed correctly. This is done within iehacks.css:

* html textarea { overflow:scroll; overflow-x: hidden; }
* html input { overflow: hidden; }

Disappearing List Background Bug

The IE Disappearing List-Background Bug is triggered when lists are placed within floating DIV containers. In YAML, this happens primarily within the float columns #col1 and #col2 as well as in every list within floating content elements. The bug causes background colors or graphics to partially or completely disappear.

Bugfix: lists are assigned the property position:relative. This generally has no effect on the layout - except that it reliably eliminates the bug.

...
* html ul,
* html ol,
* html dl { position: relative; }
...  

List Numbering Bug

The  IE List Numbering Bug is the last in this list of structure- and layout-independent CSS bugs. It is triggered when hasLayout is activeted for list items of ordered lists. In this case, all available IE versions fail to correctly assign numbers  to the items of the list.

Bugfix: list items are assigned the property display:list-item. This generally has no effect on the layout - except that it reliably eliminates the bug.

body ol li { display:list-item; }

In addition body in the selector raises specifity of the bugfix in the CSS cascade.

Section 3.5.2: Structure- and Layout-Dependent Adjustments