/* * technikum29 fresh design (seit v5.7) * Spezialcss fuer IE6, ueber Conditional Comments eingebunden * IE5 wird per Conditional Comment automatisch auf das alte Design umgestellt * ** Für das größte Stückchen Softwarescheiße, welches die Welt ** je erlebt hat, dieses exklusive CSS mit Microsoft-proprietärem ** Schrott. ** -- Sven, 13.07.2007, 00:45, nach stundenlangem Rumgefrickel ** bezueglich Lösungen für transparente PNGs und die Navigation * * Man beachte den Verlauf der Statistiken: * * April/Mai/Juni 07 02.08 05.08 08.08 07.09 01.10 * Firefox (Gecko) | 40.60% | 38% | 39% | 47% | 42% | 48% | 45% * Internet Explorer 5 | 1.01% | 0.3% | 0% | 0% | 0% | 0% | 0% * Internet Explorer 6 | 31.90% | 26% | 26% | 22% | 17% | 9% | 5% * Internet Explorer 7 & 8 | 16.50% | 23% | 23% | 22% | 29% | 27% | 20% * Opera, Safari, KHTML | 3.90% | 9% | 7% | 9% | 11% | 16% | 20% * Bots (Suchmaschinen) | 1.85% | | | | | | * * Die Tendenz geht bei IE-Benutzern eindeutig Richtung IE8, (wenn auch, * widererwarten langsam), insgesamt aber noch mehr richtung Alternativbrowser. * So wurde vorletztes Jahr in diesem CSS an dieser Stelle gesagt: * ** Für gerade mal 30% der Homepagepagebesucher wurden die folgenden Zeilen ** ganz exklusiv geschrieben und unglaubliche Verrenkungen im HTML-Sourcecode ** vorgenommen. Für 30% der Homeepagebesucher, eine Gruppe, die sich dadurch ** auszeichnet, dass sie von unheimlicher Dummheit und Ignoranz gezeichnet ist. ** Natürlich wissen diese DAUs nicht, was sie da machen. Denn wie man sieht, ** schadet ihr Verhalten nicht nur ihnen, sondern auch vielen anderen. * * (2008) Heute lässt sich resümieren: Jetzt sind es nur noch 20%. ;-) * * (2009) Mittlerweile gibt es den Internet Explorer 8 (ich hab ihn selbst noch * nie getestet), der zur Zeit etwa 8% der Besucher ausmacht. Die IE6-Benutzer * sind aber doch zaeh und wechseln nur sehr, sehr langsam (etwa 1% pro Monat). * * (2010) IE8 stagniert bei 20%, IE7 mit 10% fast schon wie IE6 unter ferner Liefen. * Selbst Safari ist mit 12% deutlich besser dabei. IE6 ist tot und wird bei * diesjaehrigen Designentscheidungen nicht mehr beachtet. CSS3-Features werden * auf der Homepage schon in zunehmendem Masse genutzt. * * $Id: fresh-iefixing.css 172 2010-08-08 19:42:25Z heribert $ * */ /* #wrapper: min-width im IE simulieren */ html{behavior:expression(function(element){ /* scripting hack, funktioniert "leider" erst im ie5.5. Und zerstört nebenbei mein Syntaxhighlighting */ runtimeStyle.behavior = "none"; /* trash this expression */ var minWidth = 1000; /* Siehe fresh.css, gegen Zeile 136 (Selektor #wrapper) */ function fixwidth() { /* Mindestbreite bei kleinen Monitoren sichern */ if(document.body.offsetWidth < minWidth) { // entspricht quasi window.innerWidth document.all.wrapper.style.width = minWidth+"px"; //document.all.wrapper.style.overflow = "visible"; // bringt eigentlich nichts } /*else... - da stuerzt er immer ab */ } // damit mein syntaxhighlighting glücklich ist : (nichts) if (document.readyState == "complete") fixwidth(); else window.attachEvent("onload", fixwidth); window.attachEvent("onresize", fixwidth); }(this))} /* Sprachlinks */ #lang strong { background-image: none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/shared/img/fresh.design/langbg-on.menu.png', enabled='true', sizingMethod='crop'); } #lang a { background-image: none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/shared/img/fresh.design/langbg.menu.png', enabled='true', sizingMethod='crop'); cursor: pointer; } #lang a:hover { background-image: none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/shared/img/fresh.design/langbg-hot.menu.png', enabled='true', sizingMethod='crop'); } #menu a { /* border: 2px solid red !important;*/ } #menu ul.l2 a:link span, #menu ul.l2 a:visited span, #menu li.l3 em span { /* Listenpunkte, mal schaun ob der IE das auf die Reihe kriegt */ top: 7px; left: -14px; /* IEs top:0 geht relativ zum padding-left... */ background-image: none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/shared/img/fresh.design/arrowbg.menu.png', enabled='true', sizingMethod='crop'); /*border: 1px solid red;*/ } /* Hauptueberschriften */ #menu em.l1, #menu li.l1 a:link, #menu li.l1 a:visited, #menu li.l1 a.on { background-image: none; height: 10px; overflow: visible; /* Kleiner Hack, weil der Filter eine Groessenangabe braucht */ filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/shared/img/fresh.design/headl1-bg.menu.png', enabled='true', sizingMethod='scale'); } /* (Hauptüberschriften) gehovert, um Bg zurückzukriegen */ #menu li.l1 a:hover { background-image: url(../img/fresh.design/orangebg.menu.png); filter: none; } /* Gehoverte/aktive Kategorie */ #menu li.l2 div.on ul.l2 { background-image: none; height: 10px; overflow: visible; /* Kleiner Hack, weil der Filter eine Groessenangabe braucht */ filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/shared/img/fresh.design/catl1-bg.menu.png', enabled='true', sizingMethod='scale'); /* Das :hover klappt nicht mal ansatzweise. Aufgegeben. */ } /* Unterkategorieüberschriften */ #menu li.l3 div.on em { /* Überschrift eines aktiven Untermenüs, wo man ist. Volle Formatierung. */ background-image: none !important; height: 10px; overflow: visible; /* Kleiner Hack, weil der Filter eine Groessenangabe braucht */ filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/shared/img/fresh.design/headl2-bg.menu.png', enabled='true', sizingMethod='scale') !important; } #menu li.l3 em span { /* Immer einen ausgeklappten Pfeil zeigen, weil das Submenü eh immer angezeigt wird. */ background-image: none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/shared/img/fresh.design/subarrow.menu.png', enabled='true', sizingMethod='crop'); left: -16px; top: 10px; } /* Hier das, was bei dem Versuch übrig blieb, wenigstens für die Sublisten ein :hover-Effekt nachbauen (letztendlich mit onclick, wie man sieht). Doch das fuehrte dazu, dass man die Links in den Boxen nicht mehr anklicken kann. Der gleiche Grund, weswegen es kein Hintergrundbild mehr gibt. Auch das kriegt der Krüppel nicht hin. */ /*#menu li.l3 em { cursor: pointer; m: expression(this.onclick = new Function("this.parentElement.className='on';")); } #menu div.on em { cursor: pointer; *m: expression(this.onclick = new Function("this.parentElement.className='';"));* }*/ #menu li.l3 div { /* Seit v5.7.1 ständiges Vorhandensein der Boxen, im IE ohne Hover-Effekt */ /*filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/shared/img/fresh.design/headl2-bg.menu.png', enabled='true', sizingMethod='scale'); *//* <- IE ist halt einfach zu blöd. */ background-color: #E0E6EE; position: relative; } #menu li.l3 em { /* Weil das Hover nicht geht, das ganze wenigstens etwas kenntlich machen */ /* Bzw. seit v5.7.1 ständiges Anzeigen der Boxen */ color: #000; border-bottom: 1px solid #ccc; background: none; } #menu li.l3 ul { /* Menü immer anzeigen -- HOVER geht einfach nicht. */ /* Und wird seit v5.7.1 auch nur noch beschränkt gewünscht. Toll, was, so viel Aufwand, um es 20 Tage später wieder rückgängig zu machen, hm? */ display: block; margin-top: -2px; padding: 5px 0 5px 10px; background: none; } /* Hintergrund der Unter(unter)kategorien */ #menu li.l3 div.on ul { /* Hintergrund dritte Navigation */ background-image: none !important; /* Filter führt dazu, dass man andere Links der Box nicht anklicken kann... */ /*height: 10px; overflow: visible; * Kleiner Hack, weil der Filter eine Groessenangabe braucht */ /*filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/shared/img/fresh.design/catl2-bg.menu.png', enabled='true', sizingMethod='scale') !important;*/ background-color: #D2DDEE; } #menu li.l3 div.on ul { /* IE-Bug: Hintergrund "wackelt" -- Jeenas Empfehlung :-) */ position: relative; } /* Schwarzer Pfeil eine Zeile */ #menu a.on, #menu a.on:hover, #menu li.l1 a.on, #menu li.l1 a.on:hover { background-image: none; background-color: transparent !important; /* Hintergrundfarbenbug bei li.l1 */ filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/shared/img/fresh.design/blackarrow.menu.png', enabled='true', sizingMethod='crop'); height: 19px; /* direkt von fresh.css nur um den height: 10px-wert oben zu überschreiben */ } /** Schwarzer Pfeil zwei Zeilen. */ #menu li.long a.on, #menu li.long a.on:hover { background-image: none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/shared/img/fresh.design/blackarrow-long.menu.png', enabled='true', sizingMethod='crop'); height: 32px; } /* Schwarzer Pfeil drei Zeilen */ #menu li.long3 a.on, #menu li.long3 a.on:hover { background-image: none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/shared/img/fresh.design/blackarrow-long3.menu.png', enabled='true', sizingMethod='crop'); height: 48px; /*border: 2px solid green !important;*/ } /* Schrecklicher IE-Bug: Einfach ueberall Boxen ziehen. Sieht ganz fantastisch aus, wo man viel sowas verwendet: