For the past couple of months I’ve been working on creating a new website that uses WordPress as a CMS for the organization Girls Get Connected (That’s the old site, because the new one isn’t quite done yet). The project has been a great one to work on because I’ve gotten to do everything including the design of the site and development of the WordPress back-end and templates.

Early on in the project, after the design mockup had been approved, I knew there were going to be some difficulties implementing it. One of the things that I knew would be a problem was the fact that I had designed a rather prominent section on the home page of the site which called for an article to be split into multiple columns. This being a content managed site, I also knew it wasn’t really going to be an option to ask the end users to break up their articles into two even sections so that it would make nice and pretty columns. Also, CSS3 really wasn’t an option, since this site would have to work on all current browsers. Something else would have to be done.

The solution I ended up using was a very elegant JavaScript program written by Randy Simons. The script is called Multi-Column Text and is pretty easy to implement. It automatically splits the text into multiple columns (you chose how many), and includes support for liquid layouts. This means that the content and columns aren’t static; they will automatically adjust as the page is resized. Check out the demonstration page to see what I mean. This script is also works on enough old browsers to actually be usable.

What impressed me most about the script was that it requires very little extra markup. Assuming all of your markup is in some sort of standards compliant state, all that is required is one (or possibly two) extra div tags. Say you wanted to make the following code segment use the multicolumn script:

<h2>Maecenas</h2>
<p>Pellentesque mi. In lacinia iaculis ante.</p>
<h1>Ut dapibus</h1>
<p><em>Nunc non dui.</em> Maecenas quis lacus sed dui commodo elementum.</p>
<p><strong>Pellentesque rhoncus sollicitudin libero. Phasellus nunc risus, tincidunt vel, bibendum eu, molestie ac, tortor. Etiam in felis.</strong></p>
<p><strong><em>Pellentesque id erat. Mauris condimentum pharetra nibh. Fusce sollicitudin auctor tortor. Aliquam placerat,</em></strong></p>

All that needs to be added are two div tags to wrap the content. The first div must also include an id or class name for the JavaScript to hook to. You can use whatever class or id name you want when you implement it. I chose to use id=multicolumn. The finished markup would look like this:

<div class="multicolumn">
  <div>
    <h2>Maecenas</h2>
    <p>Pellentesque mi. In lacinia iaculis ante.</p>
    <h1>Ut dapibus</h1>
    <p><em>Nunc non dui.</em> Maecenas quis lacus sed dui commodo elementum.</p>
    <p><strong>Pellentesque rhoncus sollicitudin libero. Phasellus nunc risus, tincidunt vel, bibendum eu, molestie ac, tortor. Etiam in felis.</strong></p>
    <p><strong><em>Pellentesque id erat. Mauris condimentum pharetra nibh. Fusce sollicitudin auctor tortor. Aliquam placerat,</em></strong></p>
  </div>
</div>

I like the way that looks: clean and simple. You can even use this in in a WordPress template with PHP tags included and everything still works. This is what is actually coded into one of my WordPress template files:

<div class="multicolumn">
  <div>
    <?php ggc_the_long_excerpt(); ?>
    <p class="readmore"><a href="<?php the_permalink() ?>" rel="bookmark" title="Continue Reading <?php the_title_attribute(); ?>">Read More &raquo;</a></p>
  </div>
</div>

My favorite part is what happens when Javascript is not available. In my case, the page still works fine and no content is lost. Sure, there are some rather long line lengths, but everything still works.

Today I found myself writing a little bit of JavaScript to isolate an element on a page. The element in question looked something like this:

<div class="mulitcolumn">
    <p>Some text...</p>
    <p>Some more text</p>
<div>

I wanted to get the div element by searching for the class name multicolulmn. Without thinking, I began writing the code to grab the div using the getElementByClassName function. Then I remembered that getElementByClassName isn’t actually a built-in function. Oh well, Google to the rescue.

I was able to quickly find Robert Nyman’s elegant getElementsByClassName function in The Ultimate GetElementsByClassName.

Using this function, you can get elements like so (examples pulled from Nyman’s site):

// To get all a elements in the document with a “info-links” class.
getElementsByClassName(document, "a", "info-links");

// To get all div elements within the element named “container”, with a “col” and a “left” class.
getElementsByClassName(document.getElementById("container"), "div", ["col", "left"]);

I love it when I don’t have to write my own JavaScript.

The other day I ran in to a bug in IE 6 that I had never encountered before. I had a left-floated content box with a margin of 105px on the left. Everything worked fine in the good browsers as usual, but when I checked IE 6, I noticed that the margin was off. No real surprise there. Upon further inspection, I noticed that the margin was more than just off, it was exactly double the actual margin.

After doing some research, I discovered that the bug has been well documented as the “Doubled Float-Margin Bug.” Position Is Everything has a good explanation:

This bug only occurs when the float margin goes in the same direction as the float and is trapped directly between the float and the inside edge of the container box. Any following floats with a similar margin won’t show the doubled margin. Only the first float in any given float row will suffer from the bug. Also, the doubled margin displays symmetry, working the same way to the right as it does to the left.

As it turns out, I didn’t even need to use their recommended fix for the bug. I was able to ax it by just adjusting which elements had the float and margins.

Position Is Everything also contains an entire section IE only bugs. I know this is going to be an invaluable reference for me when I’m trying to track down odd behavior that I’m sure is a bug and need an easy fix.

Apple has just released the 10.4.11 update for Mac OS X Tiger, which has two interesting tidbits. First of all, it lists “Improves compatibility when using OpenType fonts in QuarkExpress.” I would be really interested in knowing more about exactly what has changed here. Unfortunately, given how tight-lipped Apple usually is about these types of things, I doubt I’ll find out.

The second item pertains to Safari 3. Starting with this update, Safari 3 will be the default browser. Now, this is really great, but it introduces some problems with my workflow. If I install this update, how am I going to be able to continue to test my designs in Safari 2.x?

As it turns out, Michel Fortin has gone through the trouble of creating standalone versions of every Safari installment. So go ahead, jump on that update from Apple, then grab a standalone copy of Safari 2.

I stumbled across the Blog Spoon Graphics website the other day and was very impressed by the design.

I particularly like their notebook-style links. The subscribe link is a good example of this (although I can’t actually click on it):

Their site footer also demonstrates a nice use of the “crusty notebook page” style:

It’s a very nice looking site all around.