source: t29-www/shared/css/fresh-iefixing.css @ 480

Last change on this file since 480 was 172, checked in by sven, 14 years ago

Im Zuge der jQuery-Tools:

  • Hostinfo-System (/hostinfo.shtm wird per Ajax in Seitenleisten eingebunden und gibt somit Infos ueber den Host, wo der technikum29-checkout gerade laeuft)
  • /*/inc/head.inc.shtm: Sprache als Klasse hinzugefuegt
  • shared/css/*.css: Kleinigkeiten fuer #sidebar-hostinfo
  • jquery.cookie.js etwa fuer die incubator-hostinfos.
  • Property svn:keywords set to Id
File size: 10.5 KB
Line 
1/*
2 * technikum29 fresh design (seit v5.7)
3 * Spezialcss fuer IE6, ueber Conditional Comments eingebunden
4 * IE5 wird per Conditional Comment automatisch auf das alte Design umgestellt
5 *
6**   Für das größte Stückchen Softwarescheiße, welches die Welt
7**   je erlebt hat, dieses exklusive CSS mit Microsoft-proprietärem
8**   Schrott.
9**         -- Sven, 13.07.2007, 00:45, nach stundenlangem Rumgefrickel
10**            bezueglich Lösungen für transparente PNGs und die Navigation
11 *
12 * Man beachte den Verlauf der Statistiken:
13 *
14 *                             April/Mai/Juni 07   02.08   05.08  08.08  07.09  01.10
15 * Firefox (Gecko)          |            40.60%   |  38% |   39% |  47% |  42% |  48% | 45%
16 * Internet Explorer 5      |             1.01%   | 0.3% |    0% |   0% |   0% |   0% |  0%
17 * Internet Explorer 6      |            31.90%   |  26% |   26% |  22% |  17% |   9% |  5%
18 * Internet Explorer 7 & 8  |            16.50%   |  23% |   23% |  22% |  29% |  27% | 20%
19 * Opera, Safari, KHTML     |             3.90%   |   9% |    7% |   9% |  11% |  16% | 20%
20 * Bots (Suchmaschinen)     |             1.85%   |      |       |      |      |      |
21 *
22 * Die Tendenz geht bei IE-Benutzern eindeutig Richtung IE8, (wenn auch,
23 * widererwarten langsam), insgesamt aber noch mehr richtung Alternativbrowser.
24 * So wurde vorletztes Jahr in diesem CSS an dieser Stelle gesagt:
25 *
26 ** Für gerade mal 30% der Homepagepagebesucher wurden die folgenden Zeilen
27 ** ganz exklusiv geschrieben und unglaubliche Verrenkungen im HTML-Sourcecode
28 ** vorgenommen. Für 30% der Homeepagebesucher, eine Gruppe, die sich dadurch
29 ** auszeichnet, dass sie von unheimlicher Dummheit und Ignoranz gezeichnet ist.
30 ** Natürlich wissen diese DAUs nicht, was sie da machen. Denn wie man sieht,
31 ** schadet ihr Verhalten nicht nur ihnen, sondern auch vielen anderen.
32 *
33 * (2008) Heute lässt sich resümieren: Jetzt sind es nur noch 20%. ;-)
34 *
35 * (2009) Mittlerweile gibt es den Internet Explorer 8 (ich hab ihn selbst noch
36 *   nie getestet), der zur Zeit etwa 8% der Besucher ausmacht. Die IE6-Benutzer
37 *   sind aber doch zaeh und wechseln nur sehr, sehr langsam (etwa 1% pro Monat).
38 *
39 * (2010) IE8 stagniert bei 20%, IE7 mit 10% fast schon wie IE6 unter ferner Liefen.
40 *   Selbst Safari ist mit 12% deutlich besser dabei. IE6 ist tot und wird bei
41 *   diesjaehrigen Designentscheidungen nicht mehr beachtet. CSS3-Features werden
42 *   auf der Homepage schon in zunehmendem Masse genutzt.
43 *
44 * $Id: fresh-iefixing.css 172 2010-08-08 19:42:25Z heribert $
45 *
46 */
47
48/* #wrapper: min-width im IE simulieren */
49html{behavior:expression(function(element){
50    /* scripting hack, funktioniert "leider" erst im ie5.5. Und zerstört
51       nebenbei mein Syntaxhighlighting */
52    runtimeStyle.behavior = "none"; /* trash this expression */
53    var minWidth = 1000; /* Siehe fresh.css, gegen Zeile 136 (Selektor #wrapper) */
54
55    function fixwidth() {
56        /* Mindestbreite bei kleinen Monitoren sichern */
57        if(document.body.offsetWidth < minWidth) { // entspricht quasi window.innerWidth
58            document.all.wrapper.style.width = minWidth+"px";
59            //document.all.wrapper.style.overflow = "visible"; // bringt eigentlich nichts
60        } /*else... - da stuerzt er immer ab */
61    } // damit mein syntaxhighlighting glücklich ist : (nichts)
62
63    if (document.readyState == "complete") fixwidth();
64    else window.attachEvent("onload", fixwidth);
65    window.attachEvent("onresize", fixwidth);
66}(this))}
67
68/* Sprachlinks */
69#lang strong {
70    background-image: none;
71    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/shared/img/fresh.design/langbg-on.menu.png', enabled='true', sizingMethod='crop');
72}
73
74#lang a {
75    background-image: none;
76    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/shared/img/fresh.design/langbg.menu.png', enabled='true', sizingMethod='crop');
77    cursor: pointer;
78}
79
80#lang a:hover {
81    background-image: none;
82    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/shared/img/fresh.design/langbg-hot.menu.png', enabled='true', sizingMethod='crop');
83}
84
85#menu a {
86    /* border: 2px solid red !important;*/
87}
88
89#menu ul.l2 a:link span, #menu ul.l2 a:visited span, #menu li.l3 em span {
90    /* Listenpunkte, mal schaun ob der IE das auf die Reihe kriegt */
91    top: 7px; left: -14px; /* IEs top:0 geht relativ zum padding-left... */
92    background-image: none;
93    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/shared/img/fresh.design/arrowbg.menu.png', enabled='true', sizingMethod='crop');
94    /*border: 1px solid red;*/
95}
96
97/* Hauptueberschriften */
98#menu em.l1, #menu li.l1 a:link, #menu li.l1 a:visited, #menu li.l1 a.on {
99    background-image: none;
100    height: 10px; overflow: visible; /* Kleiner Hack, weil der Filter eine Groessenangabe braucht */
101    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/shared/img/fresh.design/headl1-bg.menu.png', enabled='true', sizingMethod='scale');
102}
103
104/* (Hauptüberschriften) gehovert, um Bg zurückzukriegen */
105#menu li.l1 a:hover {
106    background-image: url(../img/fresh.design/orangebg.menu.png);
107    filter: none;
108}
109
110/* Gehoverte/aktive Kategorie */
111#menu li.l2 div.on ul.l2 {
112    background-image: none;
113    height: 10px; overflow: visible; /* Kleiner Hack, weil der Filter eine Groessenangabe braucht */
114    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/shared/img/fresh.design/catl1-bg.menu.png', enabled='true', sizingMethod='scale');
115    /* Das :hover klappt nicht mal ansatzweise. Aufgegeben. */
116}
117
118/* Unterkategorieüberschriften */
119#menu li.l3 div.on em {
120    /* Überschrift eines aktiven Untermenüs, wo man ist. Volle Formatierung. */
121    background-image: none !important;
122    height: 10px; overflow: visible; /* Kleiner Hack, weil der Filter eine Groessenangabe braucht */
123    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/shared/img/fresh.design/headl2-bg.menu.png', enabled='true', sizingMethod='scale') !important;
124}
125
126#menu li.l3 em span {
127    /* Immer einen ausgeklappten Pfeil zeigen, weil das Submenü eh immer angezeigt wird. */
128    background-image: none;
129    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/shared/img/fresh.design/subarrow.menu.png', enabled='true', sizingMethod='crop');
130    left: -16px; top: 10px;
131}
132
133/* Hier das, was bei dem Versuch übrig blieb, wenigstens für die Sublisten ein
134   :hover-Effekt nachbauen (letztendlich mit onclick, wie man sieht). Doch das
135   fuehrte dazu, dass man die Links in den Boxen nicht mehr anklicken kann.
136   Der gleiche Grund, weswegen es kein Hintergrundbild mehr gibt.
137   Auch das kriegt der Krüppel nicht hin.
138*/
139/*#menu li.l3 em {
140    cursor: pointer;
141    m: expression(this.onclick = new Function("this.parentElement.className='on';"));
142}
143#menu div.on em {
144   cursor: pointer;
145   *m: expression(this.onclick = new Function("this.parentElement.className='';"));*
146}*/
147
148#menu li.l3 div {
149    /* Seit v5.7.1 ständiges Vorhandensein der Boxen, im IE ohne Hover-Effekt */
150    /*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. */
151    background-color: #E0E6EE;
152    position: relative;
153}
154
155#menu li.l3 em {
156    /* Weil das Hover nicht geht, das ganze wenigstens etwas kenntlich machen */
157    /* Bzw. seit v5.7.1 ständiges Anzeigen der Boxen */
158    color: #000;
159    border-bottom: 1px solid #ccc;
160    background: none;
161}
162
163#menu li.l3 ul {
164    /* Menü immer anzeigen -- HOVER geht einfach nicht. */
165    /* Und wird seit v5.7.1 auch nur noch beschränkt gewünscht. Toll, was,
166       so viel Aufwand, um es 20 Tage später wieder rückgängig zu machen, hm?
167    */
168    display: block;
169    margin-top: -2px;
170    padding: 5px 0 5px 10px;
171    background: none;
172}
173
174/* Hintergrund der Unter(unter)kategorien */
175#menu li.l3 div.on ul {
176    /* Hintergrund dritte Navigation */
177    background-image: none !important;
178    /* Filter führt dazu, dass man andere Links der Box nicht anklicken kann... */
179    /*height: 10px; overflow: visible; * Kleiner Hack, weil der Filter eine Groessenangabe braucht */
180    /*filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/shared/img/fresh.design/catl2-bg.menu.png', enabled='true', sizingMethod='scale') !important;*/
181    background-color: #D2DDEE;
182}
183
184#menu li.l3 div.on ul {
185    /* IE-Bug: Hintergrund "wackelt" -- Jeenas Empfehlung :-) */
186    position: relative;
187}
188
189
190/* Schwarzer Pfeil eine Zeile */
191#menu a.on, #menu a.on:hover, #menu li.l1 a.on, #menu li.l1 a.on:hover { 
192    background-image: none;
193    background-color: transparent !important; /* Hintergrundfarbenbug bei li.l1 */
194    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/shared/img/fresh.design/blackarrow.menu.png', enabled='true', sizingMethod='crop');
195    height: 19px; /* direkt von fresh.css nur um den height: 10px-wert oben zu überschreiben */
196}
197
198/** Schwarzer Pfeil zwei Zeilen. */
199#menu li.long a.on, #menu li.long a.on:hover {
200    background-image: none;
201    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/shared/img/fresh.design/blackarrow-long.menu.png', enabled='true', sizingMethod='crop');
202    height: 32px;
203}
204
205/* Schwarzer Pfeil drei Zeilen */
206#menu li.long3 a.on, #menu li.long3 a.on:hover {
207    background-image: none;
208    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/shared/img/fresh.design/blackarrow-long3.menu.png', enabled='true', sizingMethod='crop');
209    height: 48px;
210    /*border: 2px solid green !important;*/
211}
212
213/* Schrecklicher IE-Bug: Einfach ueberall Boxen ziehen. Sieht ganz
214   fantastisch aus, wo man viel sowas verwendet: <div class="box center bordered">
215   Also müssen .bordered-Elemente mit diesem ekelhaften Hack formatiert werden.
216   Einfach schrecklich.
217   Hinzugefuegt am 03.02.2008 fuer v5.7.17, .bordered zur Zeit nur genutzt auf
218   Lehrerinfoseite.
219*/
220
221.bordered {
222        position: relative;
223}
224
225
226/* FOOTER */
227#footer li a span {
228    overflow: hidden;
229    position: absolute;
230    display: block !important;
231    height: 29px;
232    width: 12px;
233    top: 05px;
234}
235
236#footer li a {
237    background-image: none !important;
238}
239
240#footer li.prev a span {
241    left: 0;
242    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/shared/img/fresh.design/white-left.footer.png', enabled='true', sizingMethod='crop');
243}
244
245#footer li.next a span {
246    right: 0;
247    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/shared/img/fresh.design/white-right.footer.png', enabled='true', sizingMethod='crop');
248}
249
250#footer li.up a span {
251    right: 0;
252    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/shared/img/fresh.design/white-up.footer.png', enabled='true', sizingMethod='crop');
253}
Note: See TracBrowser for help on using the repository browser.
© 2008 - 2013 technikum29 • Sven Köppel • Some rights reserved
Powered by Trac
Expect where otherwise noted, content on this site is licensed under a Creative Commons 3.0 License