Mozilla Europe gestartet

Mozilla hat seit heute eine europäische Dependance. Eine sehr schöne, tabellenfreie Website in XHTML 1.0 Strict. (Viel schöner noch als die offizielle Mozilla-Website, finde ich.) Das XHTML validiert sogar, dass Stylesheet dagegen nicht (wegen so Zeugs wie “-moz-border-radius: 3px;”).

(via heise)

IE Bug

Ich möchte auf diesem Weg Gerhard Schöning von der CSS-Mailing-List danken! Ich war verzweifelt, er hat mich erleuchtet, ich gebe seine Antwort hier gleich 1:1 wieder:

Hallo Joachim,

Am Samstag, 17. Januar 2004 um 18:50 vernahmen wir von dir:

Im ie bekomm ich unter dem link rechts (rechter container) nach unten noch eine zeile dazu.

Ich tippe mal auf den bekannten Bug, dass der IE häufig (keineswegs immer, das ist ja das Vertrackte) den im Code vorhandenen Linebreak mit dazunimmt, wenn die LI-Elemente jeweils in einer eigenen Zeile im Quelltext stehen.

Die mögliche Korrektur sähe dann so aus:

Statt

<ul>
    <li>punkt</li>
    <li><a href="#">punkt</a></li>
</ul>

notierst du also

<ul><li>punkt</li><li><a href="#">punkt</a></li></ul>

Das sollte helfen - falls es daran liegt.

Min-Height auch für den IE

Na, es geht doch! Bisher habe ich - vermutlich aufgrund schlampiger Recherchen - immer gedacht, man brächte den IE/Win nicht dazu, einem Container eine minimale Höhe (oder auch Breite, wie auch immer) zuzuweisen, sodass sich der Container jedoch bei größerem Inhalt mitvergrößert (bei den anderen Browsern).

Jetzt hab ich aus aktuellem Anlass mal das Internet durchwühlt und bin bei CSS-Diskuss fündig geworden:

#container {
   height: 300px; /* das hier für den ie */
   background-color: red;
}
/* folgende anweisung wird nicht vom ie interpretiert */
#container[id] {
    height:auto;
    min-height:300px;
}

Ein Beispiel könnt ihr hier sehen.

Unter Anwendung des Attribut-Selektors, welchen der IE nicht kennt, weist man im Nachhinein den anderen Browsern die ebenfalls korrekte CSS-Definition zu! Somit wird die Definition der Höhe für alle Browser außer dem IE (alle = jene, die den Attribut-Selektor interpretieren können) auf “auto” zurückgesetzt, danach wird eine Mindesthöhe zugewiesen!

Das ganze ist nicht einmal ein richtiger Hack, sondern vielmehr das Ausnützen der Schwächen des IE!

Ok, sollte der Einwand kommen, man könne auch den Child-Selector verwenden, dann sage ich: Stimmt :)

Diese Lösung sähe dann wie folgt aus:

#container { /* für alle */
height: 300px;
}
html>body #container { /* be nice to opera (&gekko) */
height: auto;
min-height: 300px;
}

IE6 und “Peek-a-boo”

Vor einigen Tagen hab ich schon mal über ein ominöses Phänomen des IE6 berichtet, welcher definitiv vorhandene Container nicht richtig bzw. bei Reload nicht mehr richtig darzustellen vermag.

Soeben hab ich eine Beschreibung des Bugs gefunden, der auch “Peek-a-boo”-Bug (sinngemäß “Versteckspiel”, “Versteckter Fehler”) genannt wird. Der IE6 hat, wie auch der Workaround von Olaf und mir zeigt, Probleme bei der Darstellung eines standardmäßig als “static” definierten Containers, welcher durch eine Hintergrundfarbe überlagert wird.

‘position’

Wert static | relative | absolute | fixed | inherit

Ausgangswert: Static

Angewendet auf: Alle Elemente, aber nicht auf erzeugten Inhalt

Vererbt: Nein

Prozentwerte: N/A

Medium:

Visual

(Quelle: CSS2-Spezifikation)

Erst wenn man diesem ein “position:relative” zuweist, verhält sich der IE6 “normal”.

Eine unschöne Spezialität des Internet Explorers ist es, dass er im Zusammenhang mit Floats gelegentlich Teile einer Webseite unterschlägt und einfach nicht anzeigt. Erst beim Scrollen oder Überfahren eines Links ist der Inhalt plötzlich da: der sogenannte Peek-A-Boo Bug […]

(Quelle: Stichpunkt CSS)

Mögliche Workarounds hiefür sind:

  • Keep the clearing div from touching the float, or avoid using a background on div#floatholder. Not exactly ideal, I know.

  • Give div#floatholder an explicit ‘width’ or ‘height’. Also quite restrictive.

  • Give both div#floatholder and div#float ‘position: relative’. Be sure to fully test this method.

(Quelle: Position is everything)

Entwicklung mit Firebird

Langsam etabliert sich in der CSS-Entwickler-Szene die (richtige) Auffassung, dass man in erster Linie Mozilla Firebird als Entwicklungsbrowser verwendet. Firebird ist für mich der Browser (in der Version 0.61), der CSS am fehlerfreisten interpretiert und rendert - ich mach es schon seit einigen Wochen so, dass ich am Firebird entwickle und dann nur noch extra für den IE anpasse.

Der Vorteil davon liegt auf der Hand: Die gesamte moderne Mozilla-Familie hält sich im Großen und Ganzen an den Code, der IE weicht natürlich - ist ja nicht anders zu erwarten - davon in einigen Punkten ab!

Ergo: Develope in Firebird ;)

Hier noch ein paar Links zu Bloggern, die das ähnlich sehen:

jotbe mezzoblue Jim Mangan

XML-Feed


Login