SamRayner.com // Full Posts

AltFontPrev

2008-07-20T11:12:00+00:00

Typography on the Web is one of the most constraining features of the medium. Designers who wish to stray away from the safety of Verdana, Georgia, and co. generally have three options:

Image Replacement
Flash Replacement
Taking their chances with CSS

The downsides of image and Flash replacement are well documented. Saving headings or snippets of text as images quickly gets tiresome on sites with a steady stream of new content and, unless used carefully, can cause problems for search engines and screen readers. Replacement techniques such as sIFR solve these problems gracefully but introduce the need for Flash to be installed and JavaScript enabled.

Until @font-face becomes widely accepted by browser developers and the community, declaring anything but web-safe fonts in CSS will remain a risky business. Choosing suitable alternatives for a font that looks great but is unlikely to be installed can be difficult. Style, x-height, character width and weight must all be taken into account to ensure less-fortunate visitors receive as similar an experience as possible. It’s all too easy to focus on the first sans-serif of a font-family, simply chuck in a quick line-up of verdana, arial, sans-serif to follow, and not consider how much wider Verdana is than your preferred font or how much rounder Arial is.

So, time to release something I’ve had in mind for a while…

AltFontPrev is a JavaScript bookmarklet that allows you to preview how any website would look if a particular font was not available. Each font used to style elements on the page is listed under its selector and, when clicked, is moved from being a fall-back to being the primary font.

Try it out for yourself: click the button below to preview this page with alternative fonts.

To ‘install’ the bookmarklet in your browser for use on any site, drag this link into your bookmarks toolbar or menu. When you want to use it on a site, just click the bookmark and the pane should appear.

As well as choosing a font from the existing CSS declarations, you can type a custom font to override everything. Hopefully this will help you choose alternative fonts when perfecting your site’s typography.

You’ll see an indicator when you hover over a font in the list. It will take the form of a capital ‘O’ if the font in question is installed on your system. If AltFontPrev picks up a font from the CSS that is not installed, it will be flagged up. In Safari, that’s literally; a flag symbol will appear in place of the O.

Unfortunately, Firefox and Opera don’t support Wingdings so will offer up a squashed, Impact-styled O instead. It should still be discernible from the standard indicator but, I admit, it’s not ideal. If you’re using Firefox and would prefer missing fonts to be flagged, there is a rather hacky way to add Wingdings support.

AltFontPrev is the first project I’ve taken on in my efforts to teach myself JavaScript. The gurus amongst you might cringe a little at my code so, if you have any advice or requests concerning the features of the script, please leave a comment. I’m eager to hear if I’ve approached anything in a particularly nooby way.

The only thing on the to-do list for the next version is to add shorthand support for Safari. At the moment, WebKit’s handling of style.fontFamily does not include shorthand font declarations. A fix could get very messy though, so we’ll see.

My hope is that AltFontPrev will give web designers the confidence to experiment with less common fonts without worrying about some of their audience getting a Times-riddled raw deal. Even if just 1% of your visitors get to appreciate your use of Archer or Gotham then I’d say it’s worth the effort compensating for it.

Blogging with Coda

2008-05-24T10:52:00+00:00

Soon after the latest version was released, I downloaded the 30 day trial of MarsEdit, the desktop blogging app from Red Sweater. Whilst I didn’t use it enough to warrant buying a copy (I’m quite picky with posting quicklinks and blog entries and have my EE admin panel set up just right) I found the live previews really useful, letting me see what a post would look like in context before publishing. So, when my trial was up, I decided to try and replicate the feature in Coda, my web development app of choice.

Almost two months later, I’ve finally got round to recording a screencast on how I did it.

To really see what’s going on, head over to the Vimeo page and watch it in all its HD glory. If your resolution is big enough you might want to disable scaling. I’m sorry it turned out so long, I didn’t intend to burble on for 13 minutes.

If you want to set up the system for yourself, you can grab include.js here. Credit goes to Boutell.com for the bulk of the script. Of course, the same thing could be probably be accomplished in a much cleaner way using a server-side language but I wanted to avoid setting up localhost etc.

As I say in the screencast, if you have any questions or are having trouble getting things set up, just leave a comment and I’ll help as best I can.

Too Little, Too Soon

2008-04-01T18:06:00+00:00

When I launched this site in January, I promised myself I would never write apologising for a lack of new content, or would at least put off such a post for as long as possible. Of course, just three months down the line, AS Level coursework and exam preparation have crept up on me and I’ve already caved.

Blogging ain’t Easy

I knew that maintaining a steady stream of interesting content would take effort but, perhaps naively, hadn’t counted on it taking up so much time. The nine posts I have made since New Year all took longer than expected, most likely due to me being obsessional and refusing to publish them until I was absolutely happy.

Not only has the frequency of posts suffered because of this tendancy, but I’m afraid the tone of the site has been affected too. The posts so far have been rather more formal than I intended, probably as a result of over-editing and wanting to make a good impression.

I have a to-write list on my desktop that stretches into double figures and I am genuinely enthusiastic about getting stuff on here. So, in an attempt to move things along, I’ve decided to lighten up a bit, hopefully reducing the turnaround time for posts and giving you a better idea of what I’m like.

I’ve made this the first post of the Life category, one of the few categories I always had in mind when designing this blog. I realise many of you won’t be too bothered about what I get up to away from the desk, and the site’s main focus will remain on Web related topics and general geekery, but it will be nice to write about other things from time to time.

I Swore I Wouldn’t Say It...

I’m sorry for the drought. I am working to do something about it. Here’s a muxtape for your listening pleasure as an apology.

This first one is all acoustic. I’ll try to update it with some of my favourite tracks periodically and give you a heads up here when I do. If anything takes your fancy, and if you haven’t already, check out my music recommendations for a collection of my favourite albums.

So, now you know a little about what I’ve been up to and what music I’m loving, and I’ve only reread this ~~four~~ five times. That wasn’t too bad, was it?

Anticipating ExpressionEngine 2.0

2008-03-16T21:33:00+00:00

I love ExpressionEngine. From my experience, it blows every other CMS out of the water in terms of power, flexibility and ease of use. EE lets me create sites that are far beyond my technical ability in terms of complexity and does it with style. As a result, I’m very excited about version 2, recently demoed at South by South West Interactive.

What We Can Expect

The main improvements that the guys at EllisLab have been touting are a back-end based on their CodeIgniter framework and a redesigned control panel.

The new integration with CodeIgniter doesn’t affect me as much as it will some, but I can definitely see the benefits of the move. The CI gurus will hopefully begin to play a more active role in the EE community and cook up some additional functionality for us bloggers, further extending EE‘s capability to scratch our every itch. They’re bound to benefit to, being able to implement features of EE, such as the forum module, in their own CI applications. It looks to be a win-win situation.

With such a major update, it was always likely that the admin area was going to receive a makeover. EllisLab have hired the talented Veerle Pieters to redesign the interface, unfortunately leaving behind the nice current style designed by Jesse Bennett-Chamberlain.

From what I’ve seen of the control panel, I must say I’m not 100%. The new layout is a big departure from the subtlety and relative minimalism of 1.6. It’s bigger, brighter and, perhaps appropriately, more ‘2.0’. However, the rearrangement of features and jQuery integration look like they’ll improve flow considerably and, even if I’m not entirely sold on the gradients and large text, I’m sure I’ll grow to like the new design fairly quickly.

There are other new additions to the admin area that look useful, such as Accessories and Quick Links. Make sure you check out the screencast for a full run down of the new features. Of course, it’s likely to change a bit before release but, by the looks of things, it’ll be a nice improvement to the EE experience.

Some of the smaller changes have caught my eye too, like an improved file upload system. My biggest hopes don’t seem to have made the press release though. Here are some issues I would love to see addressed in the new version.

My Wishlist

Improved Typography Handling

This is definitely my biggest gripe with EE in its current form. I find myself having to code posts by hand, removing all whitespace between elements such as table cells to stop the XHTML formatting from inserting paragraph and break tags all over the place. This makes my posts pretty much unreadable in the publish page, means I’ve got code stored in my database tables and adds a lot of hassle to posting entries. I would disable it completely were it not for the character conversion that is available with that formatting option. I like my quotes curly and my code clean.

Fortunately, Derek Jones has mentioned in the forums that typography will be getting an overhaul in the upcoming release, so fingers crossed.

Removal of Index.php by Default

Removing the index.php from URLs is one of the only hassles when setting up a site with ExpressionEngine. Though the process is well documented, it can be quite tricky for inexperienced users, especially those new to .htaccess.

I’m not sure how feasible it would be for the developers to include this behavior by default. I realise that a lot rides on that index file and there are all sorts of compatibility issues depending on hosts, but if it’s possible to work around it manually, surely it could be included as a setting? I don’t know anyone who would opt to leave it in their URLs given the choice.

Improved Code Insertion

It’s clear that the publish page will be getting some serious tweaking in 2.0. The things that bug me at the moment are pretty minor but get in the way when posting entries.

When inserting links, the title attribute is labelled as optional but, if left blank, defaults to the link text rather than being discarded. This means I have to go back and remove an unwanted title attribute from almost every link I insert.

Image insertion isn’t great either, with img tags being placed at the bottom of a field rather than where the cursor is. As I usually write my posts outside of the publish page and paste the plain text in before adding images, it becomes a real hassle having to scroll up and down.

Ready and Waiting

The news that 2.0 will be available as an upgrade from 1.6.2 came as a bit of a shock to me. Understandably, the guys want to make the transition as easy as possible for users, but I hope they haven’t compromised anything as a result. The new version sounds like such an overhaul I can only really see myself working with a clean installation.

Upgrade or not, I’ll be wanting to get my hands on the new build as soon as possible. I take my hat off to everyone at Ellislab for all their hard work and can’t wait to put version 2 through its paces this summer.

Changing the Boot Camp Drive Icon

2008-03-01T15:48:00+00:00

After partitioning my iMac’s boot volume to accommodate Windows, I wished there was a way to differentiate between the two icons at a glance in Finder and on my desktop.

Unfortunately, changing the icon for an NTFS formatted volume isn’t as easy as just copying one across. There was a step by step guide to doing it on the OnMac Wiki though, so I went ahead creating an alternative.

I can’t take any credit for the real design work—simply applying the Boot Camp symbol to the default drive icon in Photoshop—but I think it adds a bit of variety.

If you’re running Leopard, you’ll need to stray slightly from OnMac’s instructions when applying it:

Format a USB stick as FAT32
Apply the icon to the stick using the standard method
Boot into Windows and view hidden files on the stick
Copy .VolumeIcon.icns and the file named ._ to the root of your C:\ drive
Boot back into OS X and enjoy your new icon!

Of course, you don’t have to use my icon. Whatever icon you choose, those steps should pretty much have you covered. If you do run into trouble though, feel free to leave a comment.

Growing Up with the Web

2008-02-21T18:36:01+00:00

Just over a week ago David Rodriguez emailed me an invitation to write a piece for his web design news and resource site Webpage Design for Designers. I’m happy to say that my article, Growing Up with the Web, has just been published.

If you get a chance, please give it a read (I tried to keep it as succinct as possible) and perhaps leave a comment here to let me know what you think.

As a side note, I mention the SXSW Web Awards towards the end of the article. It’s interesting to see that 4 of the 5 finalists in the student category are entirely Flash-based websites. Whether or not that is a reflection of what we can expect from the next generation of designers remains to be seen. It does worry me though.

In other news, SR.com was recently featured on Smashing Magazine’s 45 More Excellent Blog Designs. I have enjoyed browsing through Smashing Mag’s extensive lists in the past and am honoured to be included on there (and for it to generate fantastic reactions like this). Be warned though, it’s the kind of site you can get lost in for hours if you’re not careful.

Flying Visits with Boot Camp: Using the iSight Mic in XP

2008-01-28T16:54:21+00:00

As I mentioned in my first post in this series, one of the three main reasons I boot into Windows is to game. My mates and I use Ventrilo, a lightweight VoIP program, to chat, talk tactics or just smack-talk each other while we play.

When you’re running Windows on a Mac, the only real upsides compared to running it on your standard PC are physical—hardware rather than software benefits. One of the best hardware features of any Mac is its built-in iSight camera and microphone but support for them in Windows isn’t as great as it could be. Being able to just talk at your monitor without a separate, wired microphone is great but not when everyone on the receiving end has to crank their volume up to full in order to hear you.

There is a solution, however; hidden away in the depths of the advanced sound and audio options of XP is a check box label ‘Microphone +20 dB Boost’. No prizes for guessing what it does but you’ll also be rewarded with an annoying hissing sound from your speakers due to the iSight microphone now being ultra-sensitive.

Getting Lazy

The only solution I could think of was to enable the boost only when I needed it—before jumping into a Vent channel—and disabling it again when I was done. I didn’t fancy clicking through all of those dialogues every time I felt like playing though, so I opted to script my way out of trouble.

My previous post on Boot Camp used AppleScript to switch operating systems easily. Unfortunately, there isn’t really a Windows equivalent of AppleScript. There is, however, the Windows Script Host:

As the name implies, WSH is a script host. A script host is a program that provides an environment in which users can execute scripts in a variety of languages; languages that use a variety of object models to perform tasks.

We’ll be using JavaScript for our mic boost toggle. First, however, you’ll need to find a file called mmsys.cpl in C:\WINDOWS\system32. Right click it and go Properties, then change the ‘Opens with:’ to control.exe (Windows Control Panel) which can also be found in system32.

Now, open up Notepad or your preferred Windows text editor and paste the following:

var WshShell = WScript.CreateObject("WScript.Shell"); 
WshShell.Run("mmsys.cpl"); 
WScript.Sleep(500); // wait 500 ms 
WshShell.SendKeys("^{TAB}"); // ctrl-tab: cycle tabs
WshShell.SendKeys("^{TAB}");
WshShell.SendKeys("^{TAB}");
WshShell.SendKeys("{TAB}"); // tab down to button
WshShell.SendKeys("{TAB}");
WshShell.SendKeys("{TAB}");				
WshShell.SendKeys("{TAB}");
WshShell.SendKeys("~"); // return: push the button
WScript.Sleep(500);
WshShell.SendKeys("+{TAB}"); // shift-tab
WshShell.SendKeys("~");
WScript.Sleep(500);
WshShell.SendKeys("1"); // toggle mic boost checkbox
WshShell.Sendkeys("~");
WScript.Sleep(500);
WshShell.SendKeys("%{F4}"); // alt-f4: exit mixer
WScript.Sleep(500);
WshShell.SendKeys("%{F4}"); // alt-f4: exit cpanel

Give it a name, making sure you include the .js extension, and save it in your system32 folder. You’ll probably want to create a shortcut to the file on your desktop so you can easily toggle the boost on and off.

The script simply navigates to the mic boost check box as if you were using your keyboard. The half-second pauses are to ensure each window has opened up before sending keys to it. If you find the script acting weirdly or not enabling the boost, try increasing the pauses to a second or so. I also recommend only running the script when your system is relatively idle. If it’s busy doing something else then the numerous keystrokes will likely be too much for it to handle and you might end up sending an alt-F4 to whatever unsaved project you happen to be working on.

If you want to turn the boost off again, just run the script once more and the hiss will be gone. I haven’t tested it in Vista at all but I’d be surprised if the same commands work. If you have Vista and feel like rearranging the script, it would be great if you could post it in the comments.

Span-Free Gradient Text Effect

2008-01-17T17:22:00+00:00

Earlier today, the talented Mr Nick La posted a clever little technique for overlaying a gradient onto text.

Whilst it isn’t entirely new, Nick’s method uses an empty span to stretch a background image over a heading:

<h1><span></span>Heading Sample</h1>


h1 span {
	background: url(gradient.png) repeat-x;
	position: absolute;
	display: block;
	width: 100%;
	height: 30px;
}

This works great, even in IE6, but that empty span doesn’t necessarily have to be there.

If you stretch the gradient PNG to be the maximum width of your heading, rather than 1px wide, you can then use an :after pseudo element applied to the heading to achieve the same effect:

<h1>Heading Sample</h1>


h1:after {
	content: url(stretched-gradient.png);
	display: block; /* drop beneath text */
	margin-top: -1em; /* shift up over text */
}

Granted, this method will not work in IE6 or 7 but it does remove that pesky span from the markup. It’s a trade-off, as always.

If you want to gloss over a linked heading, you’ll just need to make the a block-level with display: block; and apply the :after to that rather than the heading element.

Of course, the same limitations apply as with the original method—the trick is only suitable on solid-colour backgrounds and text will not be selectable if your gradient image is too tall.

Make sure you check out Nick’s demo to see what your fancy text will look like, and download the source files to try out the span-free alternative if you like.

Flying Visits with Boot Camp: The Switcheroo

2008-01-12T20:17:02+00:00

Within days of my iMac arriving last November, I had partitioned my Macintosh HD and installed Windows using the Boot Camp Assistant. It wasn’t that I missed the familiar Start menu or sand timer of XP, just that there are some things I can’t do in OS X.

I love the simplicity of Boot Camp, but every time I switch and see that loading screen appear I can’t help but be filled with dread. Consequently, I’ve found myself looking for ways to ease the process.

Whenever I boot into Windows, it’s for one of three reasons:

C++ Development (for my A-Level computing course)
Testing sites in IE6 and 7 (thank goodness for Multiple IEs)
Gaming

Having such regimented visits has made it easier for me to slipstream each boot depending on my reason for switching. I can go in, do what I need to do and get back to Leopard as soon as possible.

This post will hopefully be the first of many on little things designed to take the pain out of switching OS and minimise your time spent in Windows.

One-Click Reboots with AppleScript

On my desktop, there’s an alias labelled “XP Boot” that lets me quickly switch between operating systems with minimum hassle. To create your own, paste the following into Script Editor (located in the AppleScript directory in Applications):

set white_list to {"Finder"}


try
	tell application "Finder"
		set process_list to the name of every process whose visible is true
	end tell
	repeat with i from 1 to (number of items in process_list)
		set this_process to item i of the process_list
		if this_process is not in white_list then
			tell application this_process
				quit
			end tell
		end if
	end repeat
on error
	tell the current application to display dialog "An error occurred!" & return & "This script will now quit." buttons {"Quit"} default button 1 with icon 0
end try


do shell script "bless -mount '/Volumes/WINDOWS VOLUME/' -legacy -setBoot -nextonly" password "PASSWORD" with administrator privileges
do shell script "shutdown -r now" password "PASSWORD" with administrator privileges

The first half of the script quits all running applications (apart from Finder) and the second sets the boot partition to your Windows drive before restarting. The script does not set Windows as the default OS, just enables it for the next boot.

You’ll need to change WINDOWS VOLUME to whatever your C:\ drive is called ("Untitled" by default; if you want to change it, you’ll have to boot into Windows, right click it in My Computer and set a name in Properties). Both PASSWORD placeholders will also have to be filled with your admin password.

If keeping your Mac secure from snooping guests is a factor, you’ll want to remove both password "PASSWORD" segments from the script. It will still work but will prompt you for an admin password every time it runs. If you leave the password in, it will be readily available to anyone who knows what they’re doing but will save you the hassle of typing it every time.

Once you’ve changed the volume name and passwords, hit compile and save the script with File Format set to Application. If you wish to receive a confirmation dialogue before your Mac reboots, tick Startup Screen under Options.

Now just create an alias for the script wherever you like, perhaps give it a pretty icon, and you’re away!

In future posts, I’ll share some tips on saving time once you’re successfully booted in Windows.

Building a Better Blocklist

2008-01-05T17:52:00+00:00

A technique popping up all over the Web recently is what I’ve dubbed the ‘blocklist’. By blocklist, I mean a list of links tiled vertically and including a fair chunk of content. To give you an idea, Veerle Pieters has kindly agreed to let me use the Approved section of her blog as an example.

I haven’t included all of the code needed for the finished technique below, as it does get quite complicated. However, you can view the demonstration of the technique and take a look at the annotated source code there. Whilst it is quite detailed, I do recommend reading through the explanation below rather than jumping straight to the demo; it’ll help you get your head around what’s going on if you run into problems or want to make changes later.

The Current Approach

Take a look at Veerle’s implementation: interact with it—hover and click on the items in the list. Works well doesn’t it? The increased clickable area adds some meat to what would otherwise be a linked heading with a separate description below it, not to mention the benefits it has in terms of accessibility for those with poor motor skills.

Let’s take a look at the code:

<h2>Approved</h2>
<ul>
	<li><a href="#">
	FF Meta Serif<br>
	<em>A gorgeous, all-purpose typeface.</em><br>
	<span> December 11 at  09.47 am</span>
	</a></li>
</ul>

Currently, the only way to make the entire block clickable is to enclose every component of the link—the title, description and entry date—in a single a element.

As a is inline, it cannot contain block-level elements, meaning that the title can’t be made a heading and the paragraphs can’t be marked up as such. To style the blocklist in any detail, each of the three components needs its own element. With her choices limited, Veerle has opted to contain the description in an em element and the date in a span, with br tags to drop down each onto its own line.

Veerle certainly isn’t the only one to take this approach. I hope Elliot Jay Stocks won’t mind me using the Recent Reads section in his sidebar as another example. Indeed, on every site I’ve found that includes a similar list, the authors have had to resort to using strong, em, span, small or even q tags to mark up the contents of their links.

What’s the Problem?

Marking up the list in this way raises some issues. Does the description really need to be emphasised in comparison to the rest of the link’s content? Is there any relationship implied between the item’s heading and its description? What about the date?

Secondly, styling the list has been made more difficult by the inline nature of the elements. Line breaks have had to be used to slice up what would otherwise have been a continuous line of text with CSS disabled (without the benefits of display: block;).

Thirdly, using an element like em just to contain the description prevents its use for text that actually needs to be emphasised. The same goes for links. What if you want an extra link within the description? You can’t have a link within a link.

A Fresh Look at Things

When developing this site, I planned to implement a list of Quicklinks—external items of interest on the Web, essentially the same as Veerle’s Approved section. I figured there must be a better way to construct a list with large clickable areas so got testing.

To start with, I laid out how I wanted the markup to look:

<h2>Quicklinks</h2>
<ul>
	<li>
		<h3><a href="#">Quicklink Title</a><h3>
		<p>A short description of the link</p>
		<p>January 1st</p>
	</li>
</ul>

The trick of the technique is that only the headings are linked. The a elements are then made block-level (display: block;) and stretched over the elements below them like a transparent sheet, making everything clickable.

I should point out that any text covered by the stretched a will not be selectable. If that poses a serious problem for you then this technique might not be what you’re looking for.

For the link to lie on top of the content that follows it without shifting everything down, it must be removed from the document flow (positioned absolutely) and given a higher z-index.

The largest hurdle to overcome is to allow for a varying amount of content or an increase in text size. It would be easy to give every link element a fixed height and leave it there, but that would a) not cover all of the content or b) limit the amount of text that can be included per link. To combat the problem, the list itself must be positioned relatively and each a element given a height of 100%. This makes every link stretch to the height of the entire list. Elements that appear further down in a page’s source naturally have a higher z-index, so each link conveniently overlays its predecessor, chopping the clickable area to the distance between its origin (the top of the title being linked) and the point where the next link begins (the top of the next title).

As a finishing touch, overlay: hidden; can be applied to the list. Making every link a height of 100% causes them to overhang where the list should end by the height of the boxes that precede them, making the list almost 200% its original height. Setting the list’s overlay property to hidden chops all of this overhang and returns the list to its proper height. (If you can’t quite get your head around all that, don’t worry. Grab the code from the demo page and remove overflow: hidden; to see what I mean).

One feature of the technique I’m not completely happy with is that a predetermined height must be allotted for the link’s title, as it has been removed from the document flow. To do this, padding of something like 3em must be added to the top of the element that immediately follows the title. This is done by applying a class to the list item if its title is likely to drop down onto two or more lines and style the element that follows it accordingly:

.longtitle h3 + p {padding-top: 5em;}
.verylongtitle h3 + p {padding-top: 7em;}
etc...

If you can think of a better way to overcome this, please have a play with the code and post your findings in the comments!

So, there we have it. The basic structure behind the technique is wrapped up. All that’s left to do now is to make it look nice.

Tips on Styling your Blocklist

Use the sibling selector to target an element that always follows another (e.g. the second paragraph in every list item: p + p {color: red;} or, as we have used, the ‘description paragraph’ in each link: h3 + p {padding-top: 3em;}. Those sibling selectors are powerful things, yet sadly underused due to poor browser support (I’m looking your way Microsoft).
The way to style a link when it is hovered over is to apply the :hover pseudo-class to the list item, not the a itself. For example, li:hover {background-color: green;}. If you apply the :hover to the a, you won’t be able to change its background for fear of masking everything below and your styling won’t affect the rest of the link’s contents.
If you are going to include additional links within the elements that are covered by the a (one of the benefits of this technique), style them to look like normal text as they will not be clickable. Any users reading your content with CSS disabled or in a feed reader will still benefit from their inclusion but I have not found a way for them to remain clickable through the link that blankets them. Once again, any thoughts on a solution to this would be greatly appreciated in the comments.
Have fun with it! The technique gives you a lot more flexibility compared to the old method and leaves you with nice clean markup to style however you like.

The Good, the Bad and the IE

So, a roundup of the pros and cons of this technique:

	Pros	Cons
Old Method	Large clickable area in IE6	Hard to style
		Forces use of line breaks
		Uses elements improperly that could be used correctly
New Method	Clean, semantic markup	Approximate height of title must be known
	Does not restrict proper use of inline elements	Other than title, text not selectable
	No superfluous markup	Small clickable area in IE6
	Can contain additional links	Small clickable area in IE6

As you can see, it is by no means perfect but does have some major advantages over the traditional method. Your blocklist won’t work quite as well in IE6. Have no fear though, straight out of the box (using the code given in the demonstration) the blocklist should display fine, only with the clickable areas reduced back to the size of the titles.

One benefit of using so many sibling selectors to style the blocklist is that IE6 ignores much of the stuff it would usually choke on. Of course, results may vary if you customise the code to suit your needs, but a line or two of IE-specific CSS should be enough to solve any problem. As is, IE7 gets it pretty much spot on.

That’s it! Once again, a big thankyou to Veerle for letting me use her site as an example. Make sure you check out the demonstration to see the technique in action. It includes two blocklists: one in the style of my Quicklinks and the other, Veerle’s Approved section using the new technique for comparison. However, please keep in mind that any CSS given beyond the basic structure is for demonstration only and not to be copied blindly. I hope the styles I have included give you enough of a starting point to produce your own.

If you have an opinion on the technique, good or bad, any feedback in the comments would be greatly appreciated.