CSS - Links, Hacks und Tools

Wegwerf Email-adresse

2009-05-24T11:20:00.005+02:00

spamgourmet bietet einen guten Service: Nach der Anmeldung kann man Email-Adressen nach dem Muster "irgendwas.x.benutzername@spamgourmet.com" generieren, wobei x die Anzahl Mail ist, welche spamgourmet über diese Adresse an die Originaladresse weiterleitet. So bleibt die eigentliche Adresse versteckt. Einem Kunden kann man danach die Originaladresse mitteilen.
meinwebworker.de hat ein PHP-Script, welches immer eine neue Adresse generiert.

CSS Tabellen Layout

2009-05-18T21:03:00.005+02:00

Ein heisses Buch über das künftige Arbeiten mit CSS-Layouts: "Everything you Know about CSS is wrong". Mit Hilfe der CSS-Eigenschaft "display" und den ensprechenden Werten

table, table-row, table-cell, table-row-group, table-eader-group, table-footer-group, table-caption, table-column und table-column-group

werden komplexe Layouts definiert. Ein grosser Vorteil dieser Technik ist der Rasteraufbau, der ermöglicht wird.
Ein Buch, welches sich die Anschaffung wert ist: Everything You Know about CSS is wrong!.

CSS-Menüs

2009-04-10T12:45:00.004+02:00

Der Puls jeder Seite ist die Navigation. Hier hat sich die ungeordnete Liste durchgesetzt, welche mittels CSS gestylt und formatiert wird.
Im Folgenden einige Links auf sehenswerte Seiten, welche sich mit CSS und Menüs befassen:
www.cssmenus.co.uk
Listamatic

Disappearing-List-Bug

2008-03-29T15:58:00.003+01:00

Eine Liste, dessen li-Tags eine Hintergrundfarbe enthalten (üblich für Navigationslisten) in einem Float, der gleichzeitig die position: relative zugeweisen wurde: Der erste Listenientrag zeigt im IE die Hintergrundfarbe nicht oder nur teilweise.

Bug Fix

Die Lösung: Der Liste eine realtive Positionierung zuweisen. Die Liste ist im normalen Fluss und deshalb hat die Positionierung relative keine anderen Auswirkungen.
ul, ol, dl {position: relative;}

http://www.positioniseverything.net/explorer/ie-listbug.html

3-Pixel-Jog-Bug

2008-03-29T15:46:00.003+01:00

Durch diesen Fehler werden Inhalte von nebeneinander floatenden Boxen um 3 Pixel versetzt dargestellt. Dieser Versetz verschwindet unterhalb der Unterkante der auslösenden Float-Box.

Bug-Fix

Hier am Beispiel eines p-Tags:

/* Start hide from IE-Mac \*/
* html p {
height: 1%;
margin-left: 0;
}
/* End hide from IE-Mac */

Durch die Aktvierung von hasLayout = true wird der Versatz nicht behoben, sondern auch auf die restlichen Absätze angewandt und somit nicht mehr als Versatz sichtbar gemacht.

Escaping-Floats-Bug

2008-03-29T15:45:00.001+01:00

Innnerhalb einer statischen Box ohne spezielle Breitenangabe werden mehrere Fliessobjekte eingefügt. Die Box enthält zudem einen rechtes margin. Im Anschluss serden die Floats durch ein leeres Div innerhalb der statischen Box wieder aufgehoben. Im IE brechen die floatenden Boxen aus.

Bug Fix

Alle Optionen, die das Merkmal hasLayout=true setzen. Siehe dazu hasLayout.
Ein spezieller Kommentar sorgt dafür, dass der Hack dem IE/Mac vorenthalten wird:

/* Start hide from IE-Mac \*/
* html #container { height: 1%; }
/* End hide from IE-Mac */

Position is everything

Double-Float-Margin

2008-03-29T15:40:00.005+01:00

Wenn ein floatendes Objekt ein margin in der Floatrichtung aufweist (Beispiel: margin-left bei float: left), wird dieser Abstand im IE verdoppelt.

Bug Fix

div#float {
float: left;
width: 200px;
display: inline;
margin-left: 100px;
....
}

Mit display: inline wird der Blockcharakter eines Elementes aufgehoben, hat hier aber keine Bedeutung, ausser dass der Bug behoben wird!

Unscrollabel-Content

2008-03-29T15:01:00.000+01:00

Innerhalb einer relativ positionierten Box ohne feste Dimensionen wird eine weitere Box absolut positioniert. Beim Verkleinern des Fensters im IE wird diese 2. Box ignoriert. Es erscheinen keine Rollbalken.

Bug Fix

Alle Optionen, die das Merkmal hasLayout=true setzen. Siehe dazu hasLayout.
Ein spezieller Kommentar sorgt dafür, dass der Hack dem IE/Mac vorenthalten wird:

/* Start hide from IE-Mac \*/
 * html #divname { height: 1%; }
/* End hide from IE-Mac */

Peekaboo-Bug

2008-03-29T14:45:00.000+01:00

Ausgangslage für diesen Bug liefern ein Div mit fliessender Breite (width: auto) und ein darin eingebettetes gefloatetes Element. Unter diesen Umständen bildet der IE Inhalte neben dem Float nicht oder unvollständig ab, bis die Fenstergrösse verändert wird oder ein Link geklickt wird.

Bug Fix

Zwei Möglichkeiten, situationsbedingt die bessere wählen:

Durch die Vorgabe einer Höhe wird hasLayout = true gesetzt (Holly Hack): div#static {height: 1%;}
Durch Angabe einer Zeilenhöhe: div#static {line-height: 1 em;}

http://www.positioniseverything.net/explorer/peekaboo.html

Gullotine-Bug

2008-03-29T13:46:00.001+01:00

Führt zu Beschneiden des unteren Bereiches eines floatenden Elementes, wenn User mit Mauszeiger Hover-Effekt bestimmter Links auslöst:

Häufigster Bug, da er durch zahlreiche Mechanismen ausgelöst wird:

statischer DIV-Container
beliebiges floatendes Element, welches nicht gecleared wird
Links innerhalb statischen Container, die im Quelltext nach dem floatenden Element kommen
eine a:hover Regel

Innerhalb der a:hover-Regel führt jede Änderung der folgenden Eigenschaften den Bug aus:
background, padding, text-style, border

Workaround

Sicherste Methode ist Clearen der Fliessumgebung durch nachfolgendes leeres DIV auserhalb der statischen Box.
<div style="clear:both"> </div>
Oder: In IE auf Hover-Effekte verzichten.

HasLayout

2008-03-29T13:15:00.000+01:00

Der Internet Explorer verfügt intern über ein eigenes Layoutkonzept mit dem Qualitätsmerkmal hasLayout.
Detaillierte Anweisungen im Artikel on having layout.
Vor allem das «Fehlen von Layout» ist für viele ungewöhnliche und nicht abschätzbare Verhalten im IE zuständig:

Auftreten der meisten Float-Bugs
unterschiedliche Interpretation simpler Eigenschaften einer Box
Fehler bei Interpretation von Aussenabständen zwischen Boxen und ihren Elternelementen
Unterschiede bei Positionierung von Hintergrundgrafiken

Grundlagen für die Vergabe von hasLayout

Folgende Elemente werden automatisch mit Qualität hasLayout belegt:

position: absolute
float: left | right
display: inline-block (verfügbar ab IE 5.5)
width: beliebiger Wert ausser auto
height: beliebiger Wert
zoom: beliebiger Wert (proprietär ab IE 5.5)
writing-mode: tb-rl (proprietär)

In IE 7.0 kommen weitere Kombinationen hinzu:

overflow: hidden | scroll | auto
overflow-x | overflow-y: hidden | scroll | auto
position: fixed
min-width: beliebiger Wert
max-width: beliebiger Wert (ausser none)
min-height: beliebiger Wert
min-height: beliebiger Wert (ausser none)

CSS Tools

2008-03-29T11:11:00.004+01:00

Ein nützlicher Link zu Tools, die das Leben mit CSS vereinfachen:
www.smashingmagazine.com

Navigation bei www.smashingmagazine.com

CSS-Layouts bei www.smashingmagazine.com