hermiene.net

Magnus Haugsand has written a great article on the topic of centering things with CSS in Norwegian. Expect more to come.

Seen on IRC:

jazz4u

sorry if I'm not as good as the rest in here, but I'm willing to learn.

jazz4u

less sarcasm and more helping please.

I wish more people had the same mind set; there would be a lot less sarcasm and a ton more help then.

Fixed the stupid gap that IE inserts between my navigation bar list items. It has something to do with IE flipping out when you use display: block; on anchors inside list items. In short, it's remedied by setting the list item's display value to inline. I'll research this some more, perhaps even make an extensive test suite. Thanks very much to John Serris for cluing me in.

I don't usually like Flash movies, unless there's an exceptionally good one. And every once in a while, they pop up. Here are some that I like:

• Head drumming
• Squigo
• The Xiao Xiao series
• Madness Combat

I was very inspired by Eric Meyer's Pure CSS Popups and decided I'd try to improve on his technique, resulting in popup01 and popup02 on the CSS Alacrity page. His example lets the link and the link description run into each other, making it hard to see what the link is and what the link description is on UAs without CSS support. My immediate reaction was to use definition lists with the links in <dt>s and the link descriptions in <dd>s, like this:

<dl>
  <dt><a href="#">Home</a></dt>
  <dd>This will take you to the heart of my den.</dd>

[...]

  <dt><a href="#">Jason</a></dt>
  <dd>Jason's little corner. He has some interesting stuff going.</dd>
</dl>

But this soon presented problems of its own. I thought I could use the adjacent selector to select the <dd>s when the <dt>s are hovered (I really wanted to avoid this since IE doesn't understand :hover for anything else than <a>):

dt:hover + dd {
  [...]
}

For some reason or another, this does not work in Opera or Mozilla. Doing it the other way around (dt + dd:hover) works, but of course serves no purpose for what I want to do. So I looked for other alternatives. The first one, popup01, is almost identical to Meyer's example. The only difference is that all the links are in separate list items, and the link descriptions are separated by a hyphen, making it easier to see where they begin. Still, everything has to be within a link, with the descriptions in pointless <span> tags. I can do better.

The second one, popup02, is visually identical to the first one but structurally different; the descriptions are now in the title attribute of the links and extracted using CSS generated content, then positioned appropriately. This means that UAs not capable of handling generated content will still get the description, assuming they have a way to retrieve the title. Most do, in the form of hovering the mouse over the element.

Of course, both are displayed correctly and exactly the same in Opera, like they should. I mean, of course! Opera is king. Mozilla has an interesting, but wrong, rendering of popup02; it doesn't recognize that the generated content is being taken out of the document flow and thus displays it inside the list item.

This CSS business is fun.

Here's a thought. What if one could select character entities in CSS? If you wanted your right-pointing arrows to be a little bigger, you could do this:

→ {
  font-size: 120%;
}

Or if you wanted a "tooltip" to appear over your weird Norwegian characters (æ, ø, å) to indicate pronounciation, you could do this (provided you've marked them up as character entities and not typed them directly as you can do if you use the iso-8859-1 character set):

å:hover:after {
  background: #ccc;
  border: 1px solid #000;
  content: "This character is pronounced like the 'a' in the word 'all'."
  position: absolute;
  top: 10px;
  left: 10px;
}

Or if you plain simply just want to indicate where all your character entities are, you could make them all red by doing something like this:

&*; {
  color: #f00;
}

This is cool. You can validate the current page in Opera by pressing ctrl + alt + v.

Ok, my redesign is more or less complete. The navigation bar is no longer a <table>, but instead an unordered list. It's now at the bottom of the source code but is brought to the top in visual media with CSS, and hidden in the print medium. Since the navigation bar is now structurally at the bottom, people using alternative or assistive UAs (such as screen readers or text-only browsers) will be presented with the main content first, and a generic link at the top of each page which enables them to quickly jump to the navigation (this is hidden in visual media, of course). All this makes for great accessibility.

Now, the navbar doesn't look all that good in Internet Explorer. It seems that setting display: block; on <a>s inside <li>s makes the <li>s really space out. I've been trying to find a workaround, to no avail. I could do display: inline; on them, but that would break the border across lines, which only makes it look worse in both IE and other browsers.

The Files page is gone. Maybe I'll put it back up when I have some real content to put there.

Like it? Hate it? Let me know at havard.skjaeveland@gmail.com.

Always and inevitably everyone underestimates the number of stupid individuals in circulation.