Image borders

The following are my experiments with image borders, they aren’t exclusively FaitH related, but who else would use image borders? :)

Goto /examples/faith/

..

Extra HTML, link

The second attempt, using additional <elements> to markup the page. Works in all browsers that understand basic CSS.

Javascript, link

So I didnt want the bandwidth wasted for each box.. so I made it add the additional boxes with javascript once the page has loaded. Degrades well, and works on most browsers.

This was written while I was working on ../rework/, so excuse the overly verbose example.

Pure CSS, link

The two examples above were really bothering me - neither were really semantic, or bandwidth light. So this is the new version, one tag to wrap all elements for each "box" (Come on, who wants a border per paragraph?). Doesnt work in IE.

Combination of Pure CSS, Extra HTML + JS, link

So on 12/03/2006, I had an idea, and this was it. No more will all the browsers in my example require js just to add image borders, they can all do it via CSS anyhow. IE gets a conditional comment to load some js!