New Blogger Layout Conversion No Picnic

Whew! After hours of frustration, I have succeeded in moving this blog's template over into New Blogger. I did my best to maintain the same look and feel, but there are subtle differences. (You can see the old template by clicking on the thumbnail at left.)

And what a learning curve it's been. Hopefully, the results will prove worth it. One of the major benefits of New Blogger (and certainly my primary motivation in upgrading to widgets view) is the new labels/categories feature, evidence of which you can see at right below. Those who have been with me for a while will be familiar with the various not-so-successful code hacks and workarounds I have employed over the years in an effort to give this blog that all-important missing functionality.

I posted recently on the changes needed to get the 3-column Minima template that I give away here working properly in New Blogger layout view. That was a piece of cake compared to this blog's template, because of all the customization I had done. New Blogger didn't like my classic template at all, and the easiest approach to feeding New Blogger widget view something it could digest proved to be to rebuild it from scratch. I started with the 3-column Minima template, but you can only get so far dragging widgets around the screen. To get the functionality and look and feel I wanted, I had to delve into New Blogger's XHTML code, which is a whole lot more obtuse and less forgiving than Old Blogger's code. (Tip: all tags must be closed, even IMG tags, or they will generate error messages.)

More Internet Explorer Grief

Lots of challenges followed, including the usual crazy-making peek-a-boo float and IE box model problems. I employed an inelegant code hack (child selectors) to solve the latter problem and get the template performing roughly the same in both Firefox and IE. The peek-a-boo float problem was solved by adding {position: relative} to the div in question. There are still infuriating inconsistencies though, which I am at a loss to explain: the left padding of some of the sidebar contents seems to mysteriously reset for no apparent reason, jumping the headings and web badges all over the place in IE. I can find nothing in the code to account for this, and I'm truly mystified. There's a limit, however, to the energy I'm prepared to expend in pursuit of perfection.

Adding Post Auto Links

A tougher challenge, critical to the business goals of this blog, was getting the small WebLens badge that you see at the top of this post into the default post configuration. In Old Blogger, this was easy to do and I had previously shared the necessary code tweak here. In New Blogger's Page Element view, you can insert a link (or anything else) by adding a new HTML/Javascript widget to the center column. This will add the inserted object to the individual post pages. But call me obsessive: I wanted it to also appear on all posts on the main index, archive, and category pages. This required getting up close and personal with New Blogger's expanded widgets code view.

Trouble is, there is nothing obvious in the code to indicate where posts begin and end. Instead, there are plenty of convoluted loops, if/then/elses, cryptic widgets, and mysterious includables. See for yourself in the tiny snippet at right.

It took hours of trial and error to find the right spot to paste the link. After much experimentation, it finally came down to two possibilities, which I have highlighted in red. Pasting the link after either of these seems to work. I opted for the first, as you can see. I might never have solved this if it weren't for Bonnie Calhoun's fantastic blog, How Can I Do That?, which I found in the Blogger Help Groups. Her post on inserting Adsense code finally pointed me in the right direction.

Anyway, I hope you like the new look and feel, and — above all — enjoy the ability to easily find relevant posts on topics that interest you. Let me know what you think.

Disabling the Blogger Navbar

Here's a great tip from reader Matt Mc. Matt commented in response to a post about customizing your Blogger template that he finds Blogger's default navbar annoying. Blogger doesn't let you disable this feature but Matt shared a short snipped of CSS that you can add to your template to suppress it.

I tested it out and it works great, though I have re-enabled it on this blog, as I don't mind the navbar and its search feature could be useful to you. (For readers new to blogging, the navbar is the black horizontal bar at the top of this blog, just above the header graphic. It offers some useful functionality and is intended, in theory at least, to deliver traffic to your blog from other Blogspot blogs.)

Turning Off the Navbar

Here's how to disable the Blogger navbar:

1. Open your template and locate the style section at the top, just under the <$BlogMetaData$> tag.
2. Find a space between two other styles, and type the following code:
   #b-navbar {
   height:0px;
   visibility:hidden;
   display:none
   }
3. Save your changes and view your blog. The navbar should be gone.

Once again, the elegant simplicity of CSS saves the day. Technically, this combination of style declarations doesn't really turn off the navbar; it just hides it from view.

Note: there is some question as to whether disabling the navbar violates Blogger's terms of service, though I could find nothing specific on their site relating to this.

Horizontal Suckerfish and More CSS Menu Resources

I blogged back in June about my efforts to enhance WebLens with CSS-based dropdown menus that were standards compliant and which work across all browsers, including the persnickety Internet Explorer. In a post on creating dropdowns that work in IE, I summarized the three approaches I had found. I chose the very popular Suckerfish solution for WebLens, and it has been a great success.

In building the menu system recently for a site about a popular Canadian television personality, I wanted to modify the Suckerfish code to display the sub-menus horizontally in a row instead of stacked one below another as seen on WebLens. Google queries on this didn't lead to much, except a few help requests posted to webmaster forums, so I puzzled it out myself.

You can see the result of this tweak at the site mentioned above, and the code is available here for your use, should you want to play with it. I'm pretty happy with it; the only failing has been my inability to figure out how to align the sub-menus with the left edge of the top menu containing DIV, instead of the individual list items. No amount of fiddling around with positioning seemed to solve this.

In trying to troubleshoot this challenge, I never did find a fix, but I came across more helpful CSS menu resources, including some great articles:

• aListApart: Hybrid CSS Dropdowns
• aListApart: Sliding Doors of CSS
• Vitaly Friedman's round-up of 37 CSS Navigation Techniques
• Stu Nicholls' Validating Flyout Menu

Had I seen the ListApart Hybrid CSS Dropdowns article earlier, I might have chosen that technique instead of struggling to modify the Suckerfish code myself. Oh well. Live and learn :-)

I can't wrap this up without mention of a couple of CSS and/or DHTML menu generators (free and/or for fee) for those not inclined to hand code. Check these out:

• Colly's CSS Rollover Generator
• Webmaster Toolkit's CSS Menu Generator
• ProjectSeven's Pop Menu Magic
• Brothercake's Ultimate DHTML Dropdown Menu

Hope you find these resources useful. Enjoy!

Template Background Hacks and Generator Tools

Random Bytes has had a facelift. For those who have been here before, the new look may be a bit of a surprise. If you popped by yesterday afternoon, my apologies. This blog's look and feel was evolving minute by minute, as I experimented with colours and backgrounds.

I think I've got something I like now, though, so it shouldn't change too much more. I felt it was time for a fresh look, especially since the old look and feel has been propagated through the blogosphere with the growing popularity of my three-column template.

For the new design, I wanted to focus on simplicity and readability. The first priority was eliminating the background mouse graphic, which had cluttered up the design and drawn some negative feedback for slowing page loads.

Creating Background Colours and Patterns

In choosing a color palette, I opted for a monochrome colour scheme, staying with green to tie into WebLens (albeit subtlly). I wanted the blog contents to display against a background colour or pattern, and found Rails2U's Background Image Maker indispensable. This useful tool allows you to generate any size background rectangles for tiling. You can specify desired color by dragging sliders or entering a hex code. The tool allows you to choose between stripes, dots, and gradients, and supports full PNG transparency.

There are also plenty of free online sources of background rectangles for tiling, such as the collection at GRSites. (If you use these, be careful of placing text directly against a busy background. Place a white or coloured background behind the text first, as I have done here.)

Adding Backgrounds to Your Blog

You can use the images produced by the tools mentioned above as your blog's main background as I have done here, or place them behind various CSS elements, as you seen in the sidebars and post titles of this blog. For this re-design, I finally settled on a striped green background for the main page and a subtle green gradient to use for emphasis and visual interest.

To add a background pattern to your blog

1. Open your template and locate the CSS for the body tag.
2. Between the opening { and closing } parentheses, add a background declaration pointing to where the background image is hosted, as in
   background: url("http://your-domain-and-filename.png") repeat;
   (Note that you will need to host these images elsewhere, as you can't upload them to Blogger.)

The repeat attribute controls tiling, telling Blogger to replicate the graphic both horizontally and vertically, as I have done in the main background here. To repeat only horizontally, as in this blog's post headings, change the repeat attribute to repeat-x. (For vertical repeats, it would be repeat-y.)

To add background tiles to post headings

1. Open your template and locate your blog's CSS post declaration.
2. Add the above code, but with repeat-x. Note: you may need to move the opening post div tag above the date header, to get the background behind everything. Depends on the effect you want.

To add background tiles to sidebar elements

In this blog, I could have placed a background gradient or texture behind the entire sidebar, but I wanted to use them to emphasize certain sidebar contents. To do this:

1. Create a style specifying the desired formatting, such as
   .BlueGradient { background:url("http://your-
   domain-and-filename.png") repeat-x; padding-top:2px;}
2. In the HTML, locate each set of sidebar elements you wish to emphasize, and enclose each within your new div, as in this example:
   
   <div class="BlueGradient ">
   <h2>Archives</h2>
   <ul class="archive-list">
   <BloggerArchives>
   <li>
   <a href="<$BlogArchiveURL$>">
   <$BlogArchiveName$>
   </a></li>
   <BloggerArchives>
   </ul>
   </div>
3. Save your changes and view your blog. You may need to adjust margins or padding to get the effect you desire.

For more on adding backgrounds to your blog, see this earlier post. Hope this information helps, and let me know what you think of the new design.

The Web's Most Useful Site?

I may have just stumbled across the Internet's most useful site — for webmasters at least. The Scrutinizer is a single page from which you can run dozens of different tests on the content of any page in your site. Available tests run the gamut from HTML and CSS validation and link popularity and rank checks to pings and traceroutes, plagiarism checks, site speed tests, and more.

Just enter your URL, select the test(s) you want, and click Go. Great resource.

Church Sites That Inspire

I'm not religious, but I love this web site! Stumbling around the Web late last night, I came across ChurchBeauty, and couldn't pull myself away. No, it's not about church architecture — though that would be interesting too — it's a showcase for quality church web sites, similar to the many CSS design galleries on the Web.

The site author (who, unfortunately, doesn't identify himself) has collected high-quality church sites and organized them into several categories, including clean, simple, colour scheme, photography, CSS, classic, video, and organic (not quite sure what that means). Though he focuses on visual design, he also provides categories for writing and usability. This is the first design gallery I have come across that acknowledges the importance of content.

He invites visitors to recommend sites for inclusion, and you can click through and rate the linked sites. A fun site to poke around, especially if you're seeking inspiration — divine or otherwise.

Preventing Disappearing Columns and Sidebars

Update: for more on troubleshooting Internet Explorer quirks and bugs, see this post.

Over the last few months, many people have downloaded the three-column templates provided here. These templates use a fluid layout, which means that content scales to accommodate the viewer's font size and/or browser window rather than being locked down at a fixed width. The templates were tested in a wide range of browsers before I put them online. Overall, their performance is solid and feedback has been great. A few people, however, have reported strange behavior in older versions of Internet Explorer. In certain situations, the right-hand column or sidebar may mysteriously vanish or jump around unpredictably.

This well known IE problem actually afflicts many three-column designs that use a fluid or liquid layout. It appears when you enlarge screen fonts or reduce browser window dimensions. And, no, Firefox is not immune.

However, IE versions 6 and earlier are responsible for much of this behaviour. It is due to IE's faulty implementation of the CSS box model, which describes the boundaries of HTML/CSS elements. According to the W3C specification, the width and height of a CSS element is based upon the raw dimensions of the element itself, before the addition of margins, padding, and borders. IE, however, uses a different box model, in which padding and borders are included in calculated base width. When fonts are enlarged beyond the width of a container, IE also improperly widens the container. These differences between the two approaches are responsible for many layout inconsistencies among browsers, including the wrapping third column problem seen in liquid layouts.

Fortunately, there are some simple fixes you can try. And, for the really stoic, all kinds of box model hacks that you can use to achieve virtually identical performance from IE and standards-compliant browsers.

Troubleshooting Tips and Fixes

If all you want to do is prevent a third column from wrapping and absolute consistency across browsers isn't huge issue for you, the troubleshooting strategies below may solve the problem:

• Check for images, form input elements, and web site URLs that exceed column widths and may force wrapping
• Reduce the width of form input elements until columns cease wrapping
• Reduce image sizes until layouts behave themself
• Shorten the alt text of web badges — long strings can force wrapping if the badge doesn't display for some reason
• Try reducing the width, margins, borders, or padding of one or more columns
• Reduce the font size slightly.
• Increase the overall width of the container div by a few pixels or percentage points
• Make sure the cumulative width of all columns, plus their margins, borders, and padding does not exceed 100% of the width of their container div
• Remember that borders add width — one pixel can force unwanted wrapping!

Often, a combination of these measures will seem to eliminate the problem. Don't assume, however, because your layout looks fine in Firefox or your version of IE, that no problem exists. Test in as many browsers as you can, especially older versions of IE. Often, the problem appears when window dimensions are reduced, so test at different window sizes. The problem can also occur when screen fonts are enlarged, so test at different font sizes too (click View / Text Size, and select increasingly larger font sizes, or press control while scrolling your mouse wheel). For the ultimate test, view at large font size in an 800 x 600 size window (type javascript:window.resizeTo(800,600) into your browser address field to simulate this width).

Box Model Hacks for Forced Cross-Browser Consistency

If you wish to trick Internet Explorer into acting like a standards-compliant browser and you are comfortable with CSS, consider using IE conditional comments to provide an alternate style for IE or try the box model hacks linked below. There are several versions of the box model hack, all of which involve "tricking" IE into rendering the box to the same dimensions used by compliant browsers. Be warned, however, that most of these are not for the faint of heart:

• Why does the box model need a hack?
• Tantek's original box model hack
• Getting Internet Explorer to play well with CSS

Hope these tips help, and if other strategies have worked for you, please drop a comment below.

Three-Column Template Generator!

I have blogged a couple of times recently about ways to create 3-column templates. These posts have provided free templates for you to grab and customize, both for blogs and for regular web sites.

If you don't care for my designs, or if customizing them is beyond your comfort zone, you might want to try Firda Beka's Firdamatic tableless layout generator. This easy-to-use tool gives you a choice of two or three columns along with several customization options.

Best of all, you can use the code generated by Firdamatic for a regular web site, or click through to XML versions of the code for blogs. She has one for Blogger / Blogspot users and another for Moveable Type. A great resource. Thanks Firda.

(FYI: If you don't see two side-by-side columns on Firda's site, resize your window: she's got a vanishing float thing happening at certain window sizes.)

Multiply CSS — Huh?

Over the last few weeks, I have puzzled at the frequent occurrence of the term multiply CSS in my stats. What!? Is there something I should know about the arithmetic capabilities of stylesheets?

Search engines don't understand context. Google has been making a literal keyword match on the query words multiply CSS, directing people to my post, CSS Showcase Sites Multiply Like Bunnies. I'm always happy to have the traffic, but I suspect this is not what people had in mind.

A quick Google query solved the mystery. Multiply.com is a photo and video blogging site, along the lines of MySpace, but focused on more intimate networks of friends and family. From the volume of queries in my stats, it's safe to assume that users of the service share the desire of Blogger users to be able to modify the default template.

So, for all you Multiply users drawn to this post through Google, the information you need can be found at Multiply's About Custom CSS page. Hope this helps, and please drop back again.

CSS Menus: Create Dropdowns That Work in IE

Update: For horizontal Suckerfish, see this post.

WebLens has undergone yet another facelift. Having never been happy with the previous horizontal menu bar — accomplished with a kludgy Javascript that worked unpredictably — I set out a week ago to replace it with a CSS menu that uses semantically correct HTML. The process is worth sharing here.

The Challenge

When it comes to CSS drop-down and pop-out menus, there's good news and bad news. The good news is that it's absurdly easy to create elegant CSS-based drop-down menus that are standards compliant and cross-browser compatible. The resulting pages are cleaner and more compact. They load faster, are more search engine friendly, and pass W3C validation. The bad news, as usual, lies with Internet Explorer's refusal to play by the rules.

CSS drop-down and pop-out menus are built with nested unordered lists. The drop-down effect is enabled by the ability of standards-compliant browsers to apply the :hover pseudo-class to any element in an HTML document, including list items. Unfortunately, Internet Explorer — which still has a market share of over 90% — does not support :hover on anything but the <A> element. Achieving the drop-down or pop-out effect in IE requires extra measures to make the browser mimic the :hover behaviour.

Three Possible Solutions

I bookmarked dozens of sites in attempting to find a true cross-browser solution for CSS menus — one that works not only in standards-compliant browsers like Firefox, but also in IE, which still sets the standard, whether we like it or not. The techniques I found cluster, essentially, into variations on three fundamental approaches:

Suckerfish: CSS with Javascript Help for IE

One of the first solutions proposed was Patrick Griffiths and Dan Webb's Suckerfish Dropdowns. Elegant in its simplicity, Suckerfish involves using CSS to style a set of nested lists, with a short snippet of Javascript to attach mouseover and mouseout events for IE. Griffiths and Webb's original AListApart article describes the process in clear, straight-forward language and provides code samples you can clone and make your own. Numerous variations of Suckerfish have been proposed, and discussions of solutions to challenges encountered with this approach are ongoing. This is the method I ultimately chose for WebLens.

WhateverHover: CSS with DHTML Behaviors for IE

A similar but — to my mind — more technical approach involves using dynamic HTML behaviors to make Internet Explorer behave itself. This method uses CSS to style drop-down menus for browsers that understand the :hover pseudo-class, with Microsoft conditional comments containing a call to an external HTC file for IE. The technique is explained well by Claire Campbell and Peter Nederlof. Mark Wilton-Jones provides a version for vertical pop-outs.

Stu Nicholls' CSS/HTML Hybrid Solution

Finally, one of my favourite CSS sites provides a novel third approach. Stu Nicholls' CSS Play contains dozens of examples of innovative CSS implementations, including a huge collection of menus. One of these, the Ultimate CSS Only Dropdown Menu, uses CSS together with IE conditional comments and simple HTML tables to style dropdowns that work in both IE and compliant browsers. Nicholls' solution uses just CSS/HTML; no Javascript or IE behaviours.

Note: Nicholls' solution validates, as do the other approaches discussed here, if implemented correctly. WebLens passed the CSS validation easily after including the Suckerfish menu. The new CSS WebLens menu also passes HTML validation, but many of the pages fail because of the embedded ad code, which is not standards compliant.

Blogger Template Hacks: Changing Fonts

When I created this blog, I accepted the default font specified in Doug Bowman's Minima template design: an attractive serif typeface called Georgia. I thought it was time, however, for a minor facelift to tie in more closely with WebLens' look and feel. Fortunately, changing fonts is quick and easy with the CSS built into Blogger's templates. Here's how, for those new to this:

1. Open your Blogger template and find the CSS for the Body tag.
2. Between the opening { and closing } parentheses, add the following code:
   font-family: "Trebuchet MS", Tahoma, Arial, sans-serif;
3. If there are other font declarations for the body tag, make sure they don't specify a different font. In the original Minima template, for example, the body style contains this code:
   font:x-small Georgia,serif;
   I removed the word Georgia and left the size specification as is. (If you wish, you could roll the two statements into one, for more compact code. It would look like this:
   font:x-small "Trebuchet MS", Tahoma, Arial, sans-serif;)
4. To vary the font size, try changing the size declaration. xx-small will reduce the size; small or medium will increase it. These are relative font sizes, which means that they will scale based on the user's default settings. There are many other ways to specify font size, such as %, ems, and pixels, but we'll save this discussion for another time. (Be careful here: changing font size can lead to overflow problems.)
5. Save your changes and re-publish your blog.

That's all there is to it. The steps described above will apply the specified typeface globally to your entire blog. If you wish to make the change selectively — to headings or sidebars only, for example — locate the CSS for the element you wish to style and insert the code there instead.

Some Font DOs and DON'Ts

The code snippet above illustrates the recommended way to specify a typeface for the Web. Suggesting alternates allows you to control which typefaces people's computers substitute if they don't have the first font specified among their system fonts.

Using a relative font sizing unit, like the keywords small and x-small shown above, is also recommended since this gives users control. Specifying absolute font sizes — in pixels, for example — deprives users of the ability to change font size, leaving your page not very useful for those with impaired vision or aging eyes.

Font Lingo

For those unfamiliar with typesetting terminology, the terms serif and sans serif derive from Latin, and refer to the presence or absence of the little "feet" you see on each character in a serif typeface such as Georgia or Times. A sans serif typeface lacks these, making for a cleaner look. Sans serif type is often recommended for onscreen viewing. (The embedded screenshot illustrates how this blog looked before this post. You can decide which you like best.)

Hope you found this post useful. If so, please support Random Bytes with a link from your blogroll. Sign up for our feed for more on this topic.

CSS Showcase Sites Multiply Like Bunnies

Big surge in traffic last week, thanks to a front page link here from CSS Drive. (Seems someone there found my article about CSS transparency noteworthy.) CSS Drive is one of the Net's many CSS design showcase sites. These sites are worth a visit whether you're seeking inspiration, trying to figure out someone's code, or just endeavouring to keep up with trends in CSS and web design.

These design galleries exist in the zillions — well, OK, maybe I'm exaggerating a bit, but several are worthy of your bookmark list. The best-known, of course, and the one that started the trend is Dave Shea's CSS Zen Garden. Others worth a look include CSS Beauty, Unmatched Style, CSS Vault, and StyleGala.

There are new CSS showcase sites almost every day. In fact, the rate at which these sites are proliferating leaves no doubt that CSS has taken the web by storm. We'll keep you posted on noteworthy new additions.

Two Techniques for CSS Transparency

One of the trickiest things to control, in a CSS-driven design, is the transparency of the interaction between foreground and background content. Browser inconsistency — most notably IE's stubborn refusal to comply with standards — only adds to the challenge. I was struggling with this until I ran across Stu Nicholls' CSS Play web site. This site abounds with powerhouse CSS demos, including some great cascading menu effects and the best examples I have seen of the differing transparency approaches possible with CSS.

Background

(For the non-techies in the crowd, the term transparency — also called opacity — refers to how much of the background is visible through the foreground on a web page. Until the emergence of CSS, web designers had limited control over transparency. We could use transparent GIF images, which offer all or nothing in terms of transparency (i.e. the background is either 100% transparent or 100% opaque), or we could resort to the PNG graphic format, which offers true alpha transparency but limited browser support. (For details, and for some useful IE PNG hacks, see A List Apart's posting about the PNG format). The only other solution has been a kludgy workaround involving placing a lightened duplicate of the background image in the foreground. Nicholls illustrates this approach as "method 3" on his page of opacity demos.

Clever CSS3 Transparency Hack to the Rescue

One of the solutions that Nicholls demonstrates ("method 1') utilizes a clever cross-browser code hack that marries IE and Mozilla proprietary code with an opacity property that is part of the CSS3 working draft. It is an elegant solution that affords complete control over degree of transparency. This technique essentially involves creating and styling two DIVs — one to contain the background and a second to hold the foreground text (if they were in the same DIV, the foreground text would be transparent too). The HTML looks something like this:

<div id="sidebarLeft"> </div> <div id="leftwords">
<H3>Left Column</H3>
...
</div>

Note that the "sidebarLeft" DIV is empty. Its sole job is to provide a hook to hang a style on, in this case one called "sidebarLeft." This style is formatted as per normal, in terms of padding, margins, width, height, etc. but, then — and here's where the magic happens — for a transparent effect, the CSS snippet below is added.

#sidebarLeft{filter: alpha(opacity=75);
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=75);
-moz-opacity: 0.75; opacity:0.75;
}

Another style (#leftwords) formats the text block placed against the background. To illustrate how this hack works, I have prepared a new version of the three-column template discussed here earlier with this opacity effect for the left sidebar. Feel free to download the template, called White True Opacity, and experiment with level of transparency. To do so, open the template and change the values highlighted in orange above to any number between 1 and 100. Change the values highlighted in blue to a number between 0 and 1. Lower numbers will make the item more transparent; higher numbers, less so. Save and reload the page.

Shown as "method 1" on Nicholls' site, this transparency effect is cool, but be aware that it uses techniques that are not standards compliant and which lack wide browser support.

Low-Tech Transparency for the Rest of Us

Fortunately, there is another technique that designers have long resorted to, and which doesn't break any browsers. It's a low-tech workaround that's quick and easy to implement. It, too, is a "hack" — using a PhotoShop trick to create a 50x50 tile that fakes the appearance of transparency. Firda Beka shows how it works here, and offers a nice selection of ready-made 50x50 background tiles you can grab and save. To use these in a stylesheet, just add this declaration to the style for the element you wish to format:

background:url(filename.gif);

where filename.gif is the 50x50 semi-transparent GIF you just made or downloaded. Save your work and re-load the page. Try it with several of Firda's 50x50 sample tiles. Whether the resulting effect is gorgeous or hideous will depend largely upon other foreground and background colours in your design. You can experiment with this technique using this template, called White Fake Opacity, if you like. Just replace the GIF that I used with a colour of your choosing.

Please feel free to use either or both of the designs I have posted here. To put your own stamp on them, just save them to your desktop, open, and modify the styles as needed, and substitute your copy for the placeholders. If you're hand-editing the code, be careful not to delete any of the DIVs, or you'll break the layout. And if you're finding these posts useful, please support Random Bytes with a link from your blogroll.

Another Three-Column Template

Some time back, I wrote about how to modify the default Blogger template for a three-column layout, with a link to a completed template for those not inclined toward hand-coding. The template I provided works fine in Blogger but isn't appropriate for conventional web sites because of the embedded XML.

I've noticed a lot of people searching on this topic in my stats, so here's a 3-column template for regular web sites. This template creates a barebones tableless three-column layout using CSS. The design is minimal, with dummy text to illustrate where your content will appear.

To put your own stamp on this design, just save it to your desktop, open it, modify the styles as needed, and substitute your copy for the placeholders. If you're hand-editing the code, be careful not to delete any of the DIVs, or you'll break the layout.

Hope this works for you. Feedback welcome. And if you're finding these posts useful, please support Random Bytes with a link. Sign up for our feed to ensure you don't miss future articles.

Book Lives Up to ZenGarden Rep

What a delightful read! I just got my copy of Dave Shea and Molly Holzschlag's The Zen of CSS Design, the new companion publication to the Net's pre-eminent CSS destination, and I was up all night eagerly digesting the book's abundant insights.

Well written and lavishly illustrated with numerous full-colour photos and lots of sample code, this book dissects three dozen of the most intriguing and complex designs at ZenGarden. The authors provide abundant CSS tips, including workarounds for some of the most challenging browser (IE) implementation problems.

The book is a passionate argument for standards-based design, and an eloquent demonstration of the power of CSS when used to its full potential. Like the ZenGarden site itself, it raises the bar on web design, providing both inspiration and challenge to all who would build better web sites.

Peek-a-Boo Floats and Other CSS Mysteries

Update: for more on troubleshooting Internet Explorer bugs and glitches, see this post.

Until recently, my work with CSS had been limited to prettying up site contents, using stylesheets to control or change text, link, background, and paragraph formatting. (Even at this basic level, you can create some nice effects, using CSS for font size and colour, mouse rollovers, margins, borders, vertical spacing, and so on. See Eric Meyer's Definitive Guide to Cascading Stylesheets for an excellent guide to this topic.)

Like many, however, I continued to use HTML tables for layout, aware of what was possible with CSS but nervous about going the distance. But stylesheets provide so much more capability, including precise control over layout and positioning of all the elements on a web page. You can create a nested two-column layout (as I have done at WebLens) with nary a table cell to be seen! With the WebLens re-design, and Shutterscribe before it, I became determined to take full advantage of the powerful capabilities of stylesheets for layout.

Once the world of FLOATs and DIVs opens up, there's just no going back, though I quickly discovered that positioning is a complex subject, with a steeper learning curve than anticipated. This was partly because of browser implementation issues and other perplexing glitches that CSS purists don't like to talk about. One of these is known fondly as the peek-a-boo float: a crazy-making bug wherein certain content mysteriously disappears when you take some mouse action. In the case of WebLens, the left-hand column persisted in playfully vanishing every time I moused over a link on the right-hand side!

Fix: I just about went nuts troubleshooting this and other problems, until I discovered some excellent fixes and workarounds. Among these: try experimenting with height and/or width of the containing and/or floated DIV, or adding the argument {position: relative} to one or both DIVs. These fixes and others are described in John Gallant and Holly Bergevin's article, How to Attack an Internet Explorer Display Bug. MaxDesign provides some useful strategies in their excellent Float Tutorial, and there's lots more good CSS introductions and troubleshooting resources among WebLens' web design links.

A final note: sometimes, stylesheet problems are due to the complexities of the cascade and the intricacies of CSS inheritance rules. When a style declaration is not behaving as expected, try inserting the !important attribute just before the closing semi-colon. This usually over-rides the cascade and achieves the intended effect. This tip comes from CSS guru Eric Meyer. His book, Definitive Guide to Cascading Stylesheets, is among the best introductions to CSS available.

Why CSS?

If you've been poking around WebLens, you'll know that the site has recently been overhauled, making full use of CSS cascading stylesheets. CSS provides the ability to make site-wide changes quickly and easily, and to alter look and feel with minimal effort. Stylesheets allow designers to separate content from presentation, and to create web sites that are surprisingly elegant.

Best of all, CSS means that web designers no longer need sacrifice accessibility for sophistication. CSS-based design has been hailed as next-generation web design, and is quickly making a purely HTML-based approach archaic. As web pundit Todd Dominey points out in his amusing and informative blog, What Do I Know?, all the "layout hacks" we are accustomed to, including transparent GIFs, hard-coded line breaks, and nested tables, will soon be history.

If you're not aware of what's possible with CSS, have a look at CSS Zen Garden for inspiration. You may also want to check out the new book by Dave Shea (the brains behind Zen Garden) and Molly Holzschlag. The Zen of CSS Designprovides a tantalizing look behind the scenes of some of the Zen Garden designs. And I have links to some excellent resources on the WebLens Web Design page.