Oktober 29th, 2009 08:38 Uhr von 
Ronald
Ich habe neuelich “entdeckt”, dass zwei aufeinander folgende <p>-HTML-Elemente, die einen jeweils einen margin-top und margin-bottom haben, näher aneinanderstehen, als ich es eigentlich erwarte. Normalerweise würde ich erwarten, dass ein Element mit margin-bottom von 15px und einem folgenden Element mit margin-top von 15px insgesamt 30px auseinander liegen müssen. Falsch gedacht…
Den Rest des Eintrags lesen »
Geschrieben in (X)HTML, CSS | 
Keine Kommentare »
November 28th, 2007 10:18 Uhr von Ronald
Wer mal eben eine Lightbox für die schickere Präsentation seiner Bilder haben möchte, dem kann geholfen werden.
Den Rest des Eintrags lesen »
Geschrieben in (X)HTML, CSS, JavaScript | Keine Kommentare »
Juli 18th, 2007 23:20 Uhr von Ronald
list-style-type und list-style-image – Das sind zwei CSS-Eigenschaften die man kennen sollte, wenn man mit unsortierten Listen (<ul>) arbeiten will.
list-style-type: Legt den “Bullet” fest, der vor einem Aufzählungs-Element erscheinen soll. Standardmäßig ist das eine dicker schwarzer Punkt/Kreis. Alternativ zum Punkt (Wert: bullet) kann man z.B. auch “Square” oder “Disc” festlegen.
list-style-image: Hier kann eine URL auf eine Bilddatei angegeben werden, die anstatt des Bullets angezeigt wird.
Nun könnte man folgendes meinen: Wenn man list-style-type auf NONE setzt, dann sollte der Browser ein entsprechendes gesetztes list-style-image einfach ignorieren. Der Internet Explorer macht das auch – der Firefox nicht!! Einer von beiden macht es also verkehrt und von der Logik her müsste das eigentlich der Firefox sein.
Jedenfalls habe ich ewig lange gebraucht um das rauszufinden! 
Geschrieben in CSS | Keine Kommentare »
Juni 13th, 2007 10:04 Uhr von Ronald
Ab Version 2.1 der Cascading Style Sheets (Link) ist es möglich, dem url()-Wert nicht nur den Pfad/URI einer Grafikdatei zu übergeben, es können auch base64-kodierte Strings angegeben werden. Das hat den Vorteil, dass man die Datei nicht physisch auf dem Server liegen haben muss. Inwiefern man das richtig toll sinnvoll einsetzen kann, müsste man noch mal nachforschen. Jedenfalls habe ich mich gefreut, dass es geht bzw. gehen wird. Eine gelungene Überleitung: Der Firefox kann’s, der Internet Explorer (mal wieder) nicht. :-S
Ein Beispiel*:
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQ
d1PeAAAADElEQVR42mP4%2F58BAAT%2FAf9jgNErAAAAAElFTkSuQmCC);
*Beispiel entnommen aus dem Acid2-Kompatibilitätstest
Geschrieben in CSS | Keine Kommentare »
Juni 1st, 2007 13:16 Uhr von Ronald
1:0 für Microsoft!
Wer vermutet und gehofft hat, man könne mit “border: 0px;” einen randlosen IFRAME erzeugen, der hat wieder mal die Rechnung ohne den Internet Explorer gemacht. Der findet Ränder nämlich trotzdem toll. Abhilfe schafft nur das HTML-Attribut frameborder mit dem Wert 0.
Sieht dann so aus:
Muss ja auch nicht immer einfach sein …
Geschrieben in CSS | 2 Kommentare »
Mai 16th, 2007 06:33 Uhr von Ronald
In JavaScript gibt es ja einige wunderbare Funktionen bzw. Funktionalitäten. Besonders verpönt ist es ja das “.innerHTML” um Inhalte einzufügen. Es ist schnell aber irgendwie unsauber. Von daher macht man das über das “Einhängen” von richtigen (X)HTML-Nodes.
Beispiel:
var div = document.getElementById(“mein_div_wo_ich_was_reinhaengen_will”);
var table = document.createElement(“table”);
table.setAttribute(“class”, “meine_bunte_css_klasse”);
div.appendChild(table);
Nachvollziehbar? Gut! Funktioniert aber nicht im Internet Explorer! Warum? Die Antwort mein Freund, weiß ganz allein der Wind.
Machen muss man es wie gefolgt:
[…]
table.setAttribute(“className”, “meine_bunte_css_klasse”);
[…]
oder
[…]
table.className = “meine_bunte_css_klasse”;
[…]
Mehr oder weniger elegant ist auch folgende Möglichkeit
[…]
table.setAttribute((document.all ? “className” : “class”, “meine_bunte_css_klasse”));
[…]
Da “document.all” nur unter dem IE verfügbar ist, wird hier “spontan entschieden” welches Attribut gesetzt wird.
Update:
Wie man in den Kommentaren lesen kann, ist document.all NICHT nur im Internet Explorer verfügbar. Dort steht ebenfalls ein “besserer” Lösungsansatz. Vielen Dank noch mal für den Hinweis.
Geschrieben in CSS, JavaScript | 2 Kommentare »
