Articles Posted During August 2003

google calculator, part 2

What's the answer to life, the universe and everything?

2003-08-14 13:17:04

Well, it looks like the right wing nutjobs & the lilly-livered liberal scumbags have reached a consensus as to the worst figures in American history. Here's where their lists intersect (with total votes in parentheses):

Benedict Arnold (33)
Richard Nixon (33)
Timothy McVeigh (26)
The Rosenbergs (26)
John Wilkes Booth (24)
Lee Harvey Oswald (14)
Aaron Burr (14)
Aldrich Ames (13)

Seeing such a show of unity makes me a little misty-eyed.

2003-08-13 15:57:30

google calculator

12 + 3 - 4 + 5 + 67 + 8 + 9

2003-08-13 13:53:52

inline bullets

Suppose you wanted to create an inline list with nice-looking bullets. Simple enough, no?

Since the list-style-* CSS properties only apply to elements with display:list-item, that's out. You might be able to use float:left, as long as you don't mind all the LIs having the same width, regardless of their content. (Don't forget, elements with float applied are required to have a width explicitly specified.) Or, you could add a bunch of IMGs to the document:


<ul>
  <li><img src="bullet.gif" alt="" />one</li>
  <li><img src="bullet.gif" alt="" />two</li>
  <li><img src="bullet.gif" alt="" />three</li>
  <li><img src="bullet.gif" alt="" />four</li>
  <li><img src="bullet.gif" alt="" />five</li>
</ul>

But, you don't want to add a bunch of crap to the markup, do you? No, the correct way to handle this would be by using generated content. Maybe something like:


li { display: inline; }
li:before { content: url(bullet.gif); }

...which Safari, Mozilla, and Opera render as something like this:

Beautiful! Unless you need to cater to that 97% of the market that still uses Internet Explorer, you're all set.

Still not happy? Want to appease the IE folks, while retaining some of your document's integrity (if not your own)? Here's a slice of Windows-specific JavaScript that inserts an IMG into each of the LIs, giving the same effect:


theLIs = document.getElementById('theList').childNodes;
theBullet = '<img src="bullet.gif" />';
for (var i = 0; i < theLIs.length; i++)
  theLIs[i].insertAdjacentHTML("afterBegin", theBullet);

(Obviously, you'd replace theList with your list's ID, and set the IMG's SRC attribute to the appropriate URL.)

update 2003-08-07 09:50:07

A reader points out that there's no need to resort to JavaScript for this - or even CSS2, for that matter. Simply using a non-repeating background image with padding-left allows us to keep the presentation where it belongs, in the style sheet:


li {
  display: inline;
  padding-left: 12px;
  background: url(bullet.gif) no-repeat;
  }

Simple. Simple is good.

2003-08-06 16:25:33

creatures in his head

Andrew Bell says:

'creatures' is a daily illustration project that i felt the need to undertake for reasons that are now entirely beyond me... i don't go out much any more or see sunlight very often... i'm so very hungry and pale. enjoy.

That's pretty much how I feel about my daily photo.

2003-08-05 13:10:44

better image replacement technique

Stuart Langridge has come up with an improved version of the image replacement technique popularized by Douglas Bowman. His approach uses overflow:hidden instead of adding extra cruft in the markup, and eliminates a problem that caused certain screen-readers to ignore the element altogether. Nice.

2003-08-05 10:12:57

pseudostereograms

Here's an interesting approach to presenting full-color 3D images on the Web using current technology. (Note: page contains artistic nudity.)