/** * "Yet Another Multicolumn Layout" - (X)HTML/CSS Framework * * (en) YAML core stylesheet - structure-independent bugfixes of IE/Win CSS-bugs * (de) YAML Basis-Stylesheet - Strukturunabhängige Bugfixes von CSS-Bugs des IE/Win * * Don't make any changes in this file! * Your changes should be added to a separate patch-file. * * @copyright Copyright 2005-2011, Dirk Jesse * @license CC-A 2.0 (http://creativecommons.org/licenses/by/2.0/), * YAML-C (http://www.yaml.de/en/license/license-conditions.html) * @link http://www.yaml.de * @package yaml * @version 3.3.1 * @revision $Revision: 501 $ * @lastmodified $Date: 2011-06-18 17:27:44 +0200 (Sa, 18 Jun 2011) $ * @appdef yaml */ @media all { /** * (en) Debugging:When you see a green background, IE is getting this stylesheet * (de) Fehlersuche:Hintergrund leuchtet grün, wenn das Stylesheet korrekt geladen wurde * * @debug * @app-yaml-default disabled */ /* body { background:#0f0; background-image:none; } */ /*------------------------------------------------------------------------------------------------------*/ /** * (en) No need to force scrollbars in older IE's - it even makes problems in IE6 when set * (de) Scrollbar-Fix wird in alten IE's nicht benötigt, zudem verursacht der Fix Probleme im IE6 * * @workaround * @affected IE6, IE7 * @css-for IE6, IE7 * @valid no */ body { o\verflow: visible; } /*------------------------------------------------------------------------------------------------------*/ /** * (en) Fixes IE5.x and IE6 overflow behavior of textarea and input elements elements * (de) Korrigiert das fehlerhafte overflow-Verhalten von textarea und input-Elementen * * @workaround * @affected IE 5.x/Win, IE6 * @css-for IE 5.x/Win, IE6 * @valid no */ * html { iframe, frame { overflow: auto; } input, frameset { overflow: hidden; } textarea { overflow: scroll; overflow-x: hidden; } } /*------------------------------------------------------------------------------------------------------*/ /** * (en) Stability fixes with 'position:relative' * (de) Stabilitätsverbesserungen durch 'position:relative' * * Essential for correct scaling in IE7 (body). IE5 must get static positioned body instead. * Helpful to fix several possible problems in older IE versions (#main). * * @bugfix * @affected IE 5.x/Win, IE6, IE7 * @css-for IE 5.x/Win, IE6, IE7 * @valid yes */ body, #main { position: relative; } * html body { position: static; } /*------------------------------------------------------------------------------------------------------*/ /** * (en) Clearfix adjustents for containing floats in IE * (de) Clearfix-Anpassung für diverse IE-Versionen * * @workaround * @see http://perishablepress.com/press/2009/12/06/new-clearfix-hack/ * @affected IE 5.x/Win, IE6, IE7 * @css-for IE 5.x/Win, IE6, IE7 * @valid yes */ .clearfix { height: 1%; } /* hasLayout aktivieren */ /*------------------------------------------------------------------------------------------------------*/ /** * (en) Special class for oversized content element * (de) Spezielle Klasse für übergroße Inhaltselemente * * @workaround * @affected IE 5.x/Win, IE6 * @css-for IE 5.x/Win, IE6 * @valid yes */ .slidebox { position: relative; margin-right: -1000px; height: 1%; } /*------------------------------------------------------------------------------------------------------*/ /** * (en):Bugfix for partially displayed column separators * (de):Bugfix für unvollständige Darstellung der Spalteninhalte / Spaltentrenner * * @bugfix * @affected IE 5.x/Win, IE6 * @css-for IE 5.x/Win, IE6 * @valid yes */ * html { #col1, #col2, #col3 { position: relative; } } /*------------------------------------------------------------------------------------------------------*/ /** * (en) Preventing several css bugs by forcing "hasLayout" * (de) Vermeidung verschiedenster Bugs durch Erzwingen von "hasLayout" * * @workaround * @affected IE 5.x/Win, IE6, IE7 * @css-for IE 5.x/Win, IE6, IE7 * @valid no */ body { height: 1%; } .page_margins, .page, #header, #nav, #main, #footer { zoom: 1; } /* IE6 & IE7 */ * html { .page_margins, .page { height: 1%; hei\ght: auto; } #header, #nav, #main, #footer { width: 100%; wid\th: auto; } } /* IE 5.x & IE6 | IE6 only */ /* IE 5.x & IE6 | IE6 only */ /* trigger hasLayout to force containing content */ .subc, .subcl, .subcr { height: 1%; } /*------------------------------------------------------------------------------------------------------*/ /** * Disappearing List-Background Bug * @see http://www.positioniseverything.net/explorer/ie-listbug.html * * @bugfix * @affected IE 5.x/Win, IE6 * @css-for IE 5.x/Win, IE6 * @valid yes */ * html { ul, ol, dl { position: relative; } } /*------------------------------------------------------------------------------------------------------*/ /** * List-Numbering Bug * * @bugfix * @affected IE 5.x/Win, IE6, IE7 * @css-for IE 5.x/Win, IE6, IE7 * @valid yes */ body ol li { display: list-item; } /** * Form related bugfixes * * @bugfix * @affected IE 5.x/Win, IE6, IE7 * @css-for IE 5.x/Win, IE6, IE7 * @valid no */ fieldset, legend { position: relative; } /*------------------------------------------------------------------------------------------------------*/ /** * (en) Workaround for 'collapsing margin at #col3' when using CSS-property clear * Left margin of #col3 collapses when using clear:both in 1-3-2 (or 2-3-1) layout and right column is the * longest and left column is the shortest one. For IE6 and IE7 a special workaround was developed * in YAML. * * (de) Workaround für 'kollabierenden Margin an #col3' bei Verwendung der CSS-Eigenschaft clear * Der linke Margin von #col3 kollabiert bei der Verwendung von clear:both im 1-3-2 (oder 2-3-1) Layout * wenn gleichzeitig die linke Spalte die kürzeste und die rechte die längste ist. Im IE6 und IE7 lässt * sich der Bug durch eine speziell für YAML entwickelten Workaround umgehen. * * @workaround * @affected IE 5.x/Win, IE6, IE7 * @css-for IE 5.x/Win, IE6, IE7 * @valid no */ html #ie_clearing { /* (en) Only a small help for debugging */ /* (de) Nur eine kleine Hilfe zur Fehlersuche */ position: static; /* (en) Make container visible in IE */ /* (de) Container sichtbar machen im IE */ display: block; /* (en) No fix possible in IE5.x, normal clearing used instead */ /* (de) Kein Fix im IE5.x möglich, daher normales Clearing */ \clear: both; /* (en) forcing clearing-like behavior with a simple oversized container in IE6 & IE7*/ /* (de) IE-Clearing mit 100%-DIV für IE6 bzw. übergroßem Container im IE7 */ width: 100%; font-size: 0px; margin: -2px 0 -1em 1px; } * html #ie_clearing { margin: -2px 0 -1em 0; } #col3_content { margin-bottom: -2px; } /* (en) avoid horizontal scrollbars in IE7 in borderless layouts because of negative margins */ /* (de) Vermeidung horizontaler Scrollbalken bei randabfallenden Layouts im IE7 */ html { margin-right: 1px; } * html { margin-right: 0; } /* (en) Bugfix:Essential for IE7 */ /* (de) Bugfix:Notwendig im IE7 */ #col3 { position: relative; } /*------------------------------------------------------------------------------------------------------*/ /** * IE/Win Guillotine Bug * @see http://www.positioniseverything.net/explorer/guillotine.html * * @workaround * @affected IE 5.x/Win, IE6 * @css-for IE 5.x/Win, IE6 * @valid yes */ * html body a { background-color: transparent; &:hover { background-color: transparent; } } } @media screen, projection { /** * (en) IE-Adjustments for content columns and subtemplates * (de) IE-Anpassung für Spaltencontainer und Subtemplates * * Doubled Float-Margin Bug * @see http://positioniseverything.net/explorer/doubled-margin.html * * @bugfix * @affected IE 5.x/Win, IE6 * @css-for IE 5.x/Win, IE6, IE7 * @valid yes */ #col1, #col2, .c20l, .c25l, .c33l, .c38l, .c40l, .c50l, .c60l, .c62l, .c66l, .c75l, .c80l, .c20r, .c25r, .c33r, .c38r, .c40r, .c50r, .c60r, .c66r, .c62r, .c75r, .c80r { display: inline; } /* Fix for:"Linking to anchors in elements within the containing block" Problem in IE5.x & IE 6.0 */ * html .equalize { overflow: visible; display: block; .subcolumns { overflow: visible; display: block; } } .equalize { overflow: hidden; display: block; .subcolumns { overflow: hidden; display: block; } .c20l, .c40l, .c60l, .c80l, .c25l, .c33l, .c38l, .c50l, .c62l, .c66l, .c75l { float: left; display: inline; padding-bottom: 32767px; margin-bottom: -32767px; } .c20r, .c40r, .c60r, .c80r, .c25r, .c33r, .c38r, .c50r, .c62r, .c66r, .c75r { float: right; margin-left: -5px; display: inline; padding-bottom: 32767px; margin-bottom: -32767px; } } /* transform CSS tables back into floats */ .no-ie-padding { .c20l, .c40l, .c60l, .c80l, .c20r, .c40r, .c60r, .c80r, .c25l, .c33l, .c38l, .c50l, .c62l, .c66l, .c75l, .c25r, .c33r, .c38r, .c50r, .c62r, .c66r, .c75r { padding-bottom: 0; margin-bottom: 0; } } /*------------------------------------------------------------------------------------------------------*/ /** * Internet Explorer and the Expanding Box Problem * @see http://www.positioniseverything.net/explorer/expandingboxbug.html * * @workaround * @affected IE 5.x/Win, IE6 * @css-for IE 5.x/Win, IE6 * @valid yes */ * html { #col1_content, #col2_content, #col3_content { word-wrap: break-word; } .subc, .subcl, .subcr { word-wrap: break-word; o\verflow: hidden; } } /* avoid growing widths */ } @media print { /** * (en) Avoid unneeded page breaks of #col3 content in print layout. * (de) Vermeiden von unnötigen Seitenumbrüchen beim Ausdruck der Spalte #col3. * * @bugfix * @affected IE7 * @css-for IE 5.x/Win, IE6, IE7 * @valid yes */ .subc, .subcl, .subcr, .col3 { height: 1%; } }