Never run a touchy system

There’s a couple of things you have to bear in mind before adventuring on the new markup boat. HTML5 is not for everyone. Therefore, you must be wise and select how and where to use it. Think of all the markup flavours you’ve got available as tools: use the right one for the right job. Therefore, if your website is coded in standards compliant XHTML strict there’s no real need to change to HTML5.

Coding A HTML 5 Layout From Scratch – Smashing Magazine.

Ich dachte mir sowas…

Trotzdem.

Also hab ich mir mal einen Bastelkasten heruntergeladen. Mit einem blöden Gefühl. Weil ich immer denke, ich muss das Rad selbst neu erfinden. Aber hier gibts zuviele Räder.

html + css3 – But where to start?

Bei jedem neuen Versuch eines Layouts ist die erste Frage: Was will ich?

Beim letzten Mal habe ich versucht eine stufenlos skalierbare Website hinzukriegen, damit die Seite nicht beim Vergrößern der Texte zerbröselt. Außerdem sollte sie in allen Browsern gleich aussehen und funktionieren. Das Problem waren die Bilder, auf die ich nicht verzichten wollte. Und ein nettes (wenn auch unnützes) Gimmick ganz ohne Scripts jeglicher Art.

Mit Hilfe des Doctypes XHTML 1.0 Strict und CSS level 2.1 hat das auch ganz gut geklappt, wobei die pure-image-rollovers nur funktionieren weil sie im xhtml stehen und nicht, wie es eigentlich sein sollte, im css.
Außerdem skalieren Pixelbilder hässlich, es sei denn, man nimmt Dingbats. Natürlich rendern die modernen Browser inzwischen fast alles gut, aber damals war es halt noch anders.

Die Optik sollte entfernt an die Buchkunst des Jugendstils erinnern, der ich hoffnungslos verfallen bin.

So war das damals.

Und wie ist es jetzt?

Diesmal hat Safari die Nase vorn, was die Unterstützung von css 3 und html (5) angeht. Chrome wohl auch. Firefox liegt auf Platz 3 und der IE hinkt (wie immer) hinterher.

Im Moment kann ich daher nur versuchen mittels Safari und Webkit etwas zu basteln, das einerseits zukunftsfähig und andererseits abwärtskompatibel im Sinne von „nice-degrading“ daherkommt.

Bis ich fertig bin hat sich sowieso wieder alles dreimal geändert.

>;->

Firefox 3

Wow! Antialiasing vom Feinsten. Und das bei jeder Schriftgrösse! Und damit hat sich der ursprüngliche Entwurf meiner Seiten, der ja darauf abzielte das Layout bei jeder Vergrößerung zugänglich, lesbar und optisch ansprechend zu halten, erledigt.

Nun könnte man wieder was ganz Neues, Statisches… Äh nein. Ich mach das hier erstmal fertig. 😉

Horror!

Eine wilde stürmische Nacht. Regen peitscht, Blitze zucken, Wölfe heulen in der Ferne. Mit diabolischem Gelächter platziert Dr. Frankenstein das Hirn in den geöffneten Schädel seines Geschöpfs und streckt die Hand aus, auf dass Igor ihm die Instrumente für die Feinjustierung hineinlege.

Igor keucht verlegen und reicht seinem Herrn eine rostige Säge, sowie Hammer und Meissel. Frankenstein ist fassungslos: ‚Wo ist das Laserskalpell‘? – ‚Ach, Meister, sie wissen doch, das Budget…‘

Just da erstirbt das Gewitter an Lustlosigkeit. Vöglein zwitschern in Erwartung des nicht allzu fernen Morgens. Frankenstein stöhnt auf: ‚Wo sollen wir denn jetzt díe nötige Energie herkriegen?‘- ‚Keine Sorge, Meister!‘, beruhigt ihn Igor. ‚Ich hab da noch zwei Froschschenkel vom Abendessen übrig…‘

Diesen Moment wählt die Fackel an der Wand um ein letztes Mal aufzuflackern und dann mit einem höhnischen Zischen zu verlöschen.

Genauso fühle ich mich. Arbeiten unter leicht erschwerten Umständen. Man codet irgendwas zurecht für den IE6, muss anschließend kilometerweit laufen um sich das Ergebnis anzugucken, stellt fest dass es nicht funktioniert und begibt sich wieder zurück um was anderes zu probieren.

Wenn ich nicht einen guten Menschen mit Mac kennen würde wärs noch schlimmer! 😉 Also: Danke für die mails und die Kommentare. Ich bastel denn mal weiter im Dunkeln mit Hammer, Meissel und sich schmerzhaft dehnendem Geduldsfaden.

Aber wenn mir nicht bald was einfällt, geb ichs auf.

Reicht mir ein Handtuch?

Ich glaube, so blöd war die gestrige Idee doch nicht. Der Content hat jetzt keine eigene Breite mehr und muss sich mit dem zufriedengeben was der sidebar übriglässt.

Das Leben ist halt hart und ungerecht. Dafür kriegt der IE (5 ) seine Breiten jetzt über den MSBMH, der ihm auch einen grösseren Abstand des contents füttert. Was täte ich eigentlich ohne die css-discuss-list? Mich erschiessen, vermutlich. Und das alle 10 Minuten ;-).

Ob das jetzt auch dem IE6 die Flausen austreibt und dem IE5.5 unter ‚kleiner‘ und ’sehr klein‘ weiss ich nicht. Die hab ich nicht hier.

Kommentare über sonstige Browser die Nägel spucken nehme ich jederzeit dankend entgegen.

Tick, Trick und vertrackt

Jetzt mal abgesehen vom IE, Rahmen gehören rechnerisch zwischen den äusseren und den inneren Abstand eines Elements. Will sagen, die Rahmenbreite wird zur Breite der Box hinzugezählt. Der Rahmen ist aussen. Soweit verstanden.
Wenn der Inhalt dieser Box eine float-box (ich liebe denglisch! Ihr auch? ;-)) ist und man ihr sagt, sie möge doch bitte (Höflichkeit schadet nie!) nach rechts fliessen , ansonsten aber in der Mama-box bleiben macht sie das auch.
Wenn nun aber die fliessende Baby-box eine relative Breite hat und man ihr ein Hintergrundbild verpasst, welches teilweise verdeckt wird und diesem Bild einen Startpunkt oben links verordnet – was passiert dann?
Richtig, Bild rutscht über den Rahmen der Mama-box. Nicht AUS der Mama-box, aber über ihren Rahmen. Was irgendwie verwirrend ist …
Andererseits liegt das fliessende Baby halt ÜBER der Mama. Z-index geht nicht, da keine absolute Positionierung. Und es betrifft ja auch nur den Rahmen.

Um Erika Fuchs zu zitieren: Mein Gehirn käst!