Leider komme ich ja nie auf so was und irgendwie bekomme ich es auch immer erst dann mit, wenn es in den “Boulevard-Portalen” der IT-Branche steht. Das muss ich irgendwie ändern. Nun zur Sache: Golem berichtet heute über das s.g. “History Sniffing“. Ein Verfahren mit dem Websites den Browserverlauf des Users zu einem gewissen Grad ausspionieren können, um so z.B. gezielter Werbung zu schalten. Technisch ist es eigentlich total einfach! Ich hab gleich mal losgelegt und mit jQuery ein wenig rumprobiert. Vielleicht kann es ja jemand als Inspiration gebrauchen. Es ist nicht superschön, aber es tut was es soll. ;)
Continue reading “History Sniffing – Was es nicht alles gibt”
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…
Continue reading “Collapsing Margins – Wenn Abstände ineinander gehen…”
Wer mal eben eine Lightbox für die schickere Präsentation seiner Bilder haben möchte, dem kann geholfen werden.
Continue reading “JavaScript Lightbox auf die Schnelle”
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! :-(
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
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 …
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.
