Herzlich Willkommen

Hier finden Sie kurze Texte und Notizen über CSS, CSS-Layouts, Links zum Thema und Hilfen zu in einem gewissen Browser auftretende Fehler. Ich werde die Einträge sporadisch ergänzen.

Freitag, 10. April 2009

CSS-Menüs

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

Samstag, 29. März 2008

Disappearing-List-Bug

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

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

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 */