Post | mennovanslooten.nl/blog

It's here! I've upgraded my website to a new version (1.5.1) of Code Igniter with a couple of tweaks and fixes to this site's HTML and CSS. In addition, I've finally created atom feeds for comments and links. I'd like to take this opportunity to highlight some features I rather like.

One-line tables

On the homepage and in the archive and search sections you can see this in action. Here's another example, resize your browser to see the effect:

Hopefully you've noticed that the text in the table cells never breaks and goes to the next line. In stead, it truncates whatever doesn't fit in the cell. Obviously this effect is not desirable in all cases but it gives me more control over the eventual size and layout of these tables. This effect is realized purely with CSS and HTML:

<table>
  <thead>
    <tr>
      <th>Lorem</th>
      <th>Ipsum</th>
      <th>Dolor</th>
      <th>Sit</th>
    </tr>
  </thead>

  <tbody>

    <tr>
      <td>
        <span>Lorem ipsum dolor sit amet</span>
      </td>
      <td>
        <span>consectetur adipisicing</span>
      </td>
      <td>
        <span>elit, sed do eiusmod</span>
      </td>
      <td>
        <span>tempor incididunt ut labore</span>
      </td>
    </tr>

	<!-- etc. -->
	

The trick is obviously in the extra <span> elements added to each cell. The CSS looks like this:

td a, th a, td span, th span {
  display:block;
  width:100%;
  line-height:1.5em;
  height:1.5em;
  overflow:hidden;
}
	

Explanation: all <span> and <a> elements in table cells are:

• made display:block, so they can be sized (which normal spans and a's can't),
• given the maximum width,
• given a height equal to its line-height and
• given an overflow:hidden, so all content falling outside of its specified width and height is invisible.

The sum is that all words that don't completely fit into the cell are removed from view. Like I said, definitely not applicable in all cases but certainly useful.

First paragraph highlighting

This effect can be seen in post pages like this one: the first paragraph of the content is highlighted in a different font size and color. In all browsers but IE this is trivial to achieve:

#Post .Post-Body p:first-child {
  color:#FFF;
  font-size:120%;
  line-height:150%;
  margin:0 0 2em 0;
}

Meaning of course that all <p> elements that are the first child of the Post-Body get special treatment using the pseudo-class :first-child. However, in IE this is not so simple since it doesn't recognize any pseudo-class but :hover, :link, :visited and :active, and then only on links.

To reproduce this effect in IE I used a Microsoft technology called behaviors:

div.Post-Body {
  behavior: url(../css/p.htc);
}
	

This CSS code attaches a behavior (contained in the file p.htc) to the div with class Post-Body. The behavior code in p.htc looks like this:

<PUBLIC:COMPONENT>
  <PUBLIC:ATTACH EVENT="oncontentready" ONEVENT="checkFirst()" />
  <SCRIPT LANGUAGE="JScript">
  function checkFirst()
  {
    var oFirstP = element.getElementsByTagName('p')[0];
    if(oFirstP) oFirstP.className += ' firstChild';
  }
  </SCRIPT>
</PUBLIC:COMPONENT>

The Post-Body div gets an event handler for the event oncontentready. When this event is fired it runs the function checkFirst() and adds a string to the className of the first <p> it finds. The CSS then only has to be extended to act on this className:

#Post .Post-Body p:first-child,
#Post .Post-Body p.firstChild {
  color:#FFF;
  font-size:120%;
  line-height:150%;
  margin:0 0 2em 0;
}

Input highlighting

The paragraph highlighting story is almost repeated literally here. For every browser but IE, the pseudo-class :focus is available with which we can (among other things) hightlight the input field that currently has focus. The effect can be seen in the search field in the top right or the comment fields below this article. In this case we add a behavior to <input> and <textarea>s:

input, textarea {
  behavior: url(../css/input.htc);
}

Where the behavior looks like this:

<PUBLIC:COMPONENT>
  <PUBLIC:ATTACH EVENT="onfocus" ONEVENT="inputFocus()" />
  <PUBLIC:ATTACH EVENT="onblur" ONEVENT="inputBlur()" />
  <SCRIPT LANGUAGE="JScript">
  function inputFocus()
  {
    if(!element.type || element.type != 'radio' || element.type != 'checkbox') {
      element.className += ' focus';
    }
  }
  function inputBlur()
  {
    if(!element.type || element.type != 'radio' || element.type != 'checkbox') {
      element.className = element.className.replace(' focus','');
    }
  }
  </SCRIPT>
</PUBLIC:COMPONENT>

After which we can use the .focus class in our CSS files to do our highlighting.

All in all I'm quite pleased with the result. I'll probably keep on tweaking the CSS and HTML for quite a while. By the way, I recently stumbled upon bartelme and noticed some superficial similarities, like the liquid grid layout and the blueish color schemes. Luckily, his site looks a lot better, so I trust you believe me if I say any similarities are purely coincidental. :)