Mittwoch, August 20, 2008
1 Pixel hohe Rahmen mit DIVs realiseren - im Internet Explorer 6
Vor einigen Tagen arbeitete ich an der Umsetzung des Screendesigns für eine neues Web-Projekt. Unter anderem sollte das DIV mit den Inhalten am unteren Rand einen (speziellen) Rahmen erhalten. So speziell, das border-bottom:1px solid #AAAAAA; nicht möglich war. Denn der Rahmen sollte - um einen 3D-Effekt zu ermitteln - mit Versatz beginnen.
"Nichts leichter als das!", dachte ich mir, und machte mich an die Umsetzung. Unterhalb des Content-DIVs wollte ich ein DIV platzieren, das 1px hoch war und mittels margin-left:4px Links um 4px eingerückt war.
Unter Safari und Firefox gab es keine Darstellungsprobleme. Doch als ich mir das Design mit dem MSIE6 anschaute, fiel ich wieder einmal aus allen Wolken: Der graue Balken war nicht etwa ein, sondern etwa 20 Pixel hoch.
Die Lösung? Natürlich wusste Google rat:
If you need to have a div tag smaller than 20px, then you will find it a bit hard to get on IE. Just add “overflow: hidden” to it’s style and you’re good to go.
Quelle: DIV height issue on IE
Wie ich vor kurzem bereits einmal getwittert habe:
Ich hoffe mir nichts sehnlicher, als das Hostel 3 mit Microsoft Internet Explorer-Entwicklern als Backpacker verfilmt wird.
Guet Nacht!
Labels: CSS, Internet, Microsoft, Web, Web-Entwicklung
Dienstag, Februar 19, 2008
Formulare mit CSS (und ohne Zeilenumbrüche) layouten
Wie man Formulare heutzutage layoutet (nämlich mit CSS und nicht etwa Tabellen), verzapfen unzählige Artikel im Netz. Einen sauberen Einstieg bietet beispielsweise Quirksmodes Tableless forms.
Auch hier wird wieder belohnt, wer die HTML-Spezifikationen kennt und spezifische Tags so einsetzt, für was sie eigentlich erdacht wurden. Bestes Beispiel in diesem Zusammenhang: Der <label>-Tag, welcher immer noch nicht allen professionellen Web-Entwicklern bekannt ist.
Eine Sache wird in vielen Artikeln hingegen nicht ausreichend erläutert: Wie kriege ich das Formular-Layout hin, ohne dabei <br>-Tags zu benutzen? (Zeilenumbrüche, für HTML-Unerfahrene - in der Regel <tt clear="all">, um mit dem Floats zurecht zu kommen ...)
Heute nun habe ich mich noch einmal mit der Umbruch-Thematik auseinandergesetzt und kann folgende Lösung präsentieren, die zumindest in Firefox 2.x und Safari 3.x zu funktionieren scheint (ich schliesse mich Conrast.ie an und hasse MSIE6 ab heute öffentlich):
label {
display:block;
float:left;
width:200px;
clear:left;
}
input {
display:block;
float:left;
clear:right;
}
Wichtig sind die clear-Anweisungen, die das Umbrechen der Floats steuern.
Labels: CSS, HTML, Web, Web-Entwicklung
Samstag, September 08, 2007
Tabellenlayout geht in Rente
Da ich die letzten grossen Probleme der Umstellung mittlerweile gelöst habe, kann ich mich nun endlich der technischen Aufarbeitung meiner Arbeit zuwenden.
In den letzten Wochen habe ich die Web-Site der Gemeinde Kiesen einer Frischzellenkur unterzogen. Eine Auffrischung und Anpassung war dringend nötig - die Web-Site hat schon 5 Jahre auf dem Buckel. Ein Alter, das im schnellebigen Web-Bereich eindeutig dem Pensionsalter entspricht.
HTML
Zuerst wurde der HTML-Code des Inhalts tauglich für das Jahr 2007 gemacht. Dabei konnte ich natürlich auf die in den letzten fünf Jahren angesammelte Erfahrung zurückgreifen: Mittlerweile habe ich Tags wie h1-3 und p lieben gelernt. Im 2001 war ich durch eine kurze Anstellung bei nothing etwas verblendet geworden. Anstelle dass ich Überschriften mit dem von W3C vorgesehenen Titel-Tag (h1-6) versah, gab es bei mir so schöne (und sinnlose) Tags wie ...
<span class="contentTextTitleFirstLevel">
PHP
Natürlich habe ich im selben Anlauf auch den PHP-Code angepasst - neben einigen problematischen Unterlassungen (XSS lässt grüssen) habe ich auch hier unnötigen Ballast abgeworfen und den Code lesbarer gemacht.
Layout
Der letzte und grösste Brocken war nun aber die Umwandlung eines tabellenbasierten Layouts (perfektioniert bei nothing - damals wohl noch gerade auf der Höhe der Zeit) in HTML/CSS2. Nach hunderten bis tausenden von Reloads (Apfel-R werden wohl auf meiner Tastatur als erstes kaputt gehen) schaut die Site nun wie gewünscht aus. Unter Safari und Firefox mehr oder weniger perfekt - unter Internet Explorer gibt es noch einige kleine Schnitzer, die ich zu beheben versuchen werde.
In Gedanken bin ich bei euch, lieber Bill Gates und liebe Frickler-Truppe des Internet Explorer-Teams. Dass man in Redmond auch 2007 die Sache mit offenen Standards nicht begriffen hat, zeigt wieder einmal die klassische Abstimmung um "Open"XML. Wer mehr über die Besonderheiten des Internet Explorers lesen will, ist bei IE und CSS eindeutig am richtigen Ort.
Tag und Nacht
Oben rechts habe mit dem faszinierenden Tool Websites as Graphs zwei Analysen des Code-Struktur.
Erste Auffälligkeit: Ich komme mit deutlich weniger HTML-Tags aus (jeder Kreis entspricht einem Tag). Dies hängt ganz klar mit dem Wechsel auf CSS zusammen: Einerseits sind in das Stylesheet die Positionierung ausgelagert, andererseits die Formatierung (Farbe, Schriften, Ränder, etc.).
Zweite Auffälligkeit: Tabellen gehören der Vergangenheit an. Jedenfalls dann, wenn sie zur Erstellung eines Layouts missbraucht werden. Auf der neuen Site werden Tabelle nur noch dazu genutzt, tabellarische Daten aufzubereiten.
- blue: for links (the A tag)
- red: for tables (TABLE, TR and TD tags)
- green: for the DIV tag
- violet: for images (the IMG tag)
- yellow: for forms (FORM, INPUT, TEXTAREA, SELECT and OPTION tags)
- orange: for linebreaks and blockquotes (BR, P, and BLOCKQUOTE tags)
- black: the HTML tag, the root node
- gray: all other tags
W3C ist pingelig und nervt
Als ich die frische Titelseite dem W3C HTML Validator zur Begutachtung vorlegte, kam ich natürlich - wie immer - nicht ohne Fehlermeldungen durch ...
Vorhang auf! Halt ...
Wohl im Laufe der nächsten Woche - sobald alle ausstehenden Tests durchgeführt werden konnten - werde ich die neue Version produktiv schalten.
Samstag, September 08, 2007
doctype strict und die vertical gap
Heute habe ich mir an einem CSS-Layout die Zähne ausgebissen:
Nachdem ich den doctype des HTML-Dokuments von transitional nach strict geschaltet habe, um das nervige Box-Model des Internet Explorers auszutricksen (Tabellen mit width="100%" in einem div sind in Firefox, Safari und Opera so breit wie gewünscht, nur der Internet Explorer zerschiesst das ganze Layout), gab es einen vertikalen Abstand von ca. 4 Pixeln zwischen einzelnen divs wie #header und #content.
Nach stundenlangem Pröbeln und mehreren erfolglosen Google-Suchen zum Thema fand ich endlich den massgeblichen Hinweis:
This time we set the vertical-align property of the object element to bottom. This aligns the bottom of the object with the bottom of the line box, eliminating the small gap we saw earlier.
Quelle: That mysterious gap under images and embedded objects
Ehrenwort? Wirklich? JA! Nachdem ich im Stylesheet
#header img {vertical-align:bottom;}
postuliert hatte, verschwand die nervige Spalte zwischen der Kopfzeile und dem Inhalt der Web-Site. Herueka!
Abonnieren
