Wikizone - Benutzerbeiträge [de]

CSS - Hacks

2006-08-09T12:18:48Z

84.161.157.101: /* Leveller */

== 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>

CSS - Hacks

2006-08-09T12:16:49Z

84.161.157.101:

== 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>