Bearbeiten von „CSS - Hacks“

== Hacks ==

=== !important Hack===
Unter Umständen kann auch die important- Klausel
weiterhelfen, die der IE nicht kennt, wohl aber FF/
Opera/ Konqueror; zudem macht man sich dabei
keines neuen Bugs zu Hilfe.

Wichtig: Immer erst die important- Klausel!

Die Klausel bewirkt bei entsprechend kompatiblen
Browsern, dass diese Eigenschaft nachfolgend nicht
mehr überschrieben werden kann.

Beispiel:

#box {
min-height: 300px;
height: auto !important;
height: 300px;
...
}

=== Sternchen Hack ===
'''Anwendung:''' Anweisungen nur für IE 5 und 6 z.B.
 
 * html {...} /*das sehen nur IEs*/

Zukunftssicher: ?

=== Box Model Hack / Tantek Hack ===
'''IE 5 und IE 5.5'''

'''Anwendung:''' Box Model Fehler von IE 5/5.5 korrigieren

'''Beispiel:'''
 #kasten{width: 360px;}
 * html #kasten{       /*Das beachten nur IEs*/
   width: 400px;       /* der 'Falsche' Wert für alte IEs */
   w\idth: 360px;      /* das sieht nur der IE 6 */
}

Zukunftssicher: ja

=== Kind Selektor Hack ===
IE versteht den KindSelektor nicht. Z.B. 
 body > p 

'''Anwendung:''' Höhe nur für IE setzen (IE braucht Höhenangaben z.B. wg. Inline Padding Bug.)

'''Beispiel:'''
 #inhalt {height: 100px;}  /*für IE*/
 html>body #inhalt {       /*für andere Browser zurücksetzen*/
    height: auto
 }

==Browser Bugs==


===IE:mac CSS overflow-Bug===
Der Internet Explorer für Mac stürzt ab, wenn man overflow: auto auf ein Input-Element des Typs Submit anwendet und auf die Schaltfläche klickt.

Lösung/Fix:
Statt overflow: auto muss overflow: visible zugewiesen werden.

Weitere Info: http://www.bernd-lutz.de/css_overflow-bug_ie_mac-51.php

===Box Model Bug===
IE 5 / 5.5

Standard: Elementbreite = width + paddings + margins + borders
IE: Elementbreite = width + margin

Wenn also eine width und borders bzw. paddings angegeben sind werden die Boxen im IE 5 und 5.5 zu klein weil die paddings und borders nicht dazu gezählt werden. 
'''Lösung:'''

# Wenn width angegeben kein padding oder border verwenden. Stattdessen Ränder auf die Kindelemente anwenden.
# Box Model Hack / Kind Hack

===Kommentar Hack===
'''Anwendung:''' vor IE/Mac verstecken z.B. bei 3px Bug der nur in Win Versionen auftaucht.

'''Beispiel (in Kombination mit * Hack)'''
 /* Hide from IE5-mac. Only IE-win sees this. \*/
 * html #floatbox {
 margin-right: 10px;
 }
 * html p {
 height: 1%;
 margin-left: 0;
 }
 /* End hide from IE5/mac */

===Inline Padding Bug===
Horizontales Padding und Margin funktioniert bei Inline-Elementen im IE nur wenn eine Höhe angegeben ist. Dann kann es allerdings zu anderen Seiteneffekten kommen.

'''Lösung''' Höhe mit Kind Selektor Hack setzen.

=== 3px Bug bei Bildern===
Oft taucht beim IE im Zusammenhang mit floatenden Elementen eine Lücke unterhalb oder links rechts eines Bildes auf. Selbst eine Höhe für das Div hilft nichts.

Lösungsansätze:
negatives padding für (Win IEs)
overflow: hidden;

== Links ==
http://css.nu/pointers/bugs-ie.html 2006-06-29

http://websemantics.co.uk/tutorials/useful_css_snippets/

== Useful Snippets ==
aus http://websemantics.co.uk/tutorials/useful_css_snippets/

=== Leveller ===
Versuche alle Browser auf möglichts gleiche Werte 'vorzukonfigurieren'


 * {margin:0; padding:0}
Removes margin and padding from every element.

 html {height:100%}
Sets the window height.

 min-height:101%;
Sets the minimum page height to greater than the window height to force Netscape & Firefox to display vertical scrollbars, thereby preventing content jumping on fixed width pages.
IE doesn't understand min-height and totally ignores this setting.

 font:100.01%/130% Verdana, Helvetica, sans-serif;
Set font-size to a percentage preventing a Windows IE "extreme font re-sizing" bug.
Set font-size slightly larger than 100% to repair Opera rounding errors.
Set less than 101% to prevent Safari errors.
The line-height setting gives nice, clear and easy-read spacing.
Verdana is the most readable, and readily available screen font in Windows.
Helvetica most readable, and readily available screen font on Macintosh computers.
Sans-serif is the most readable to the widest audience for body text.

 color:#000; background:#fff;
Set general colour & background.

 width:760px;
Fixed width set for 800 pixel wide browser displays.

 margin:0 auto
Margins are set for centring the content. This works for IE6, Firefox, Opera, Safari and Netscape but IE5 and IE5.5 require further treatment. 

 text-align:center
Added to the body element to force IE to centre all content

 body * {text-align:left}
Resets all text aligns to the left

 #wrapper {width:760px}
States the wrapper width. All centred content goes inside a div with an id="wrapper. 

<pre>
 * {margin:0; padding:0} html {height:100%; font-size:100.01%} body { text-align:center;  min-height:101%; font:100.01%/130% Verdana, Helvetica, sans-serif; color:#000; background:#fff; width:760px; margin:0 auto } body * {text-align:left} #wrapper {width:760px}
</pre>