More than seven years ago, a fantastic article was posted on A List Apart explaining how to create dropdown menus with pure CSS. Up until that point, most (if not all) Web developers and designers were using javascript in some way to make their dropdown and fly-out menus function. The concept, for whatever reason, was referred to as the “Suckerfish menu“.

Shortly after that article was published, someone else came along and published information about the Son of Suckerfish menus. Other concepts based on the Suckerfish menu came along as well. The major issue with all of those articles and examples, though, is that they seem to require fixed-width menus for some reason. If you don’t set your top-level menu items to be a fixed width, by default the dropdown menu items will either wrap onto multiple or will force the top-level item to expand to fit the dropdown menu. (more…)

With all of this talk lately about CSS3 and how amazing the Web will be once it gains wide browser support, it got me thinking about how well CSS2 is supported. Sadly, there are still a lot of really cool features that were introduced in the CSS2 spec that we can’t use yet, thanks to the overwhelming market share held by Internet Explorer 6 and 7.

In this article, I’ll take a quick look at some under-used CSS2 features and examine whether or not they are supported in IE7. (more…)

One of the great new features coming with CSS3 is the ability to use native gradient backgrounds. In addition to saving server resources (no need to call an external image), the gradients tend to be more vibrant and faithful to the original colors than any external images.

So far, none of the modern browsers have agreed on which method to use to implement the gradients, so you will need to utilize a few different methods in order to get it to work in multiple browsers. (more…)

Whenever I begin slicing up a new website design to turn it into a template, one of the first things I do is to implement a reset stylesheet. The ideal reset stylesheet will essentially turn off all of the proprietary default CSS properties that browsers impose on various HTML elements. At the very least, padding and margins need to be reset, as each of the major browsers tend to implement those in completely different manners. (more…)

For me, it’s pretty rare that I develop fluid website layouts, so I’ve not played much with them. However, as part of a recent project, I needed a way to create a fixed-width sidebar and a fluid second column. I started searching around, and came across an old (January 2006) article from A List Apart (ALA). Although it’s old, it’s still extremely useful. It’s fairly aptly titled “The Holy Grail.”

The article explains how to create a three-column layout with fixed-width side columns and a fluid center column. For this particular application, I modified it slightly to use a two-column layout, but I’ve since realized just how powerful and useful the techniques described in the article are. (more…)

Every once in a while, you may find yourself in a position where you need to create a hanging indent on a paragraph or set of paragraphs on one of your pages. There isn’t really an out-of-the-box way to do so with CSS, but you can accomplish it pretty easily by combining two CSS properties.

In case you aren’t sure what a hanging indent is, it’s basically when the first line of a paragraph is flush with the left margin, but any subsequent lines in that paragraph are indented. (more…)

Definition lists (dl) can be somewhat of a bear when trying to style them nicely. Because of the fact that the term/definition sets don’t have any kind of wrappers, you can’t successfully and reliably float them to place the terms on the left and the definitions on the right (however, once CSS2 and CSS3 selectors become more widely supported, you should be able to get more control).

However, you can do some nice things with definition lists. This article will show two examples of how definition lists could be used on your site and how to style them nicely. (more…)

I’ve found quite a few articles and tutorials explaining how CSS sprites are basically the be-all end-all of Web development, going on and on about the idea that all of the icons you use on your Web site should be stored in a single file, reducing the amount of time it takes to load them individually and reducing the number of times a browser has to request something from your Web server.

It’s a great idea, in theory, but it’s not always practical. CSS sprites are extremely useful when you are working with fixed-size (height or width) elements on your site. However, they can be extremely tricky to implement (and generally not worth the effort) when you’re dealing with items that have dynamic heights and widths.

When you are dealing with fixed widths or heights, though, CSS sprites can be fantastic, especially if you have a slower Web server or if a large number of your users have slower Internet connections. (more…)

I spent most of the day today in a conference session dealing with the new elements that will be coming with the future of HTML5 and CSS3, presented by Molly Holzschlag. The session was extremely informative, and we discussed some really interesting topics. In addition to our discussion on HTML5 and CSS3, we discussed quite a bit about accessibility, browser limitations, the reasons that things are the way they are (doctype declarations, for instance) and how things might be in the future.

Molly made it very clear throughout the session that she does not own a crystal ball, so she obviously can’t tell us exactly how or when the final CSS3 or HTML5 specs will be completed and approved. However, she did give us some insight into the elements that have already been implemented and the elements that are in the process of being implemented in specific browsers. In this article, I will try to give a quick overview of some of the things she mentioned. Most likely, you’ve heard of most, if not all of these. However, I just wanted to put some of them together in one place. (more…)

The other day, Smashing Magazine tweeted about an updated guide to CSS implementation in e-mail clients. The guide is extremely helpful, as it shows you exactly what CSS techniques and features you can use within your HTML e-mail messages and which e-mail clients will display them correctly.

The chart displayed in the original blog post shows over 50 different CSS techniques and elements are evaluated for 11 different e-mail/Webmail clients. Apparently the PDF and Excel versions of the chart that are linked from the post include more than 23 different mail clients. Unfortunately, looking at the chart, it appears that the safest way to create an attractive e-mail message that looks the way you intend in multiple e-mail clients is to code with tables and inline styles.