3.5 CSS Adjustments for Internet Explorer
Internet Explorer since Version 5 has integrated broad support for CSS 1 and good support for CSS 2. Unfortunately the CSS 2 support in particular is riddled with mistakes, which ignored quickly lead to display errors in CSS layouts.
The source code structure of the YAML basic layout is set up to allow many variations via CSS without changing the HTML code. To ensure this flexibility, we must iron out the numerous IE CSS bugs.
The CSS bugs in IE occur in connection with specific source code constructs relating to combinations of floating, positioned, and static elements. As the YAML framework's code is fixed and its variations are known, most of the bugs are predictable and thus manageable.
The bugs are categorized according to their manifestation, and are dealt with separately:
- structure- and layout-independent bugfixes
Most of the CSS bugs are easily managed from within the XHTML source code. When such bugfixes are compatible with all possible modifications and column orders, it qualifies as structure- or layout-independent.
All these are managed in one stylesheet, iehacks.css in the folder yaml/core/, which should not be modified.
- structure- and layout-dependent bugfixes
Some CSS bugs are only triggered by particular layouts. These problems cannot be dealt with by the standard structure, but must be handled individually by the site's designer and are categorized as structure- or layout-dependent - especially as they are often triggered by the display of particular content elements.
Every YAML-based layout should include a hack file patch_[layout].css for Internet Explorer, replacing the placeholder [layout] in the filename to match the relevant central stylesheet. A template for such a hack stylesheet (patch_layout_draft.css) is in the yaml/patches/ folder.
Structure of the CSS Patch File for Internet Explorer
As described above, every YAML-based layout (or every central stylesheet, see Section 3.3) requires an IE patch file patch_[layout].css. The structure of such stylesheets is described below, using the example of the template file patch_layout_draft.css from the yaml/patches/ folder.
/* Layout independent adjustments | Layout-unabhängige Anpassungen -------- */
@import url(/yaml/core/iehacks.css);
/* Layout dependent adjustments | Layout-abhängige Anpassungen ------------- */
@media screen, projection
{
/* add your adjustments here | Fügen Sie Ihre Anpassungen hier ein */
...
}
As you can see, this file includes both layout-dependent and -independent adjustments. You need then only integrate one additional CSS file into your layout.
The first section imports the file iehacks.css from the core/ folder of the YAML framework. As previously mentioned, this file contains all the structure- and layout-independent bugfixes and can thus be integrated unchanged into every YAML-based layout.
The second part contains an empty @media rule. After this you can integrate further IE stylesheets (the navigation component nav_vlist, for example). Furthermore, this is the place to add the structure- or layout-dependent bugfixes or bugfixes for the correct display of layout elements.
This IE adjustment stylesheet then takes care of similar issues as the central stylesheet: all CSS hacks are collected and presented to Internet Explorer.
Integration of the CSS Adjustments in YAML's Layout
Many bugfixes exploit IE's numerous parser bugs - particularly those in older IE versions. The resulting CSS code is therefore not always valid and should thus only be made accessible to IE. This is possible with the use of conditional comments within the HTML head <head>..</head>. This was already mentioned at the end of Section 3.3: The Central Stylesheet.
...
<!--[if lte IE 7]>
<link href="css/patches/patch_col3_standard.css" rel="stylesheet" type="text/css" />
<![endif]-->
</head>
The condition lte IE 7 means "lower than or equal to Internet Explorer Version 7.0". This special comment is only recognized and interpreted by IE - for all other browsers, it is a normal comment, and they ignore its contents.
In the following, all layout-relevant IE CSS bugs will be explained and their YAML framework fixes / workarounds described. .
