So yea, this blog is sorely neglected, but if you’ve ever wanted to right-click on a link in Firefox and see the background image of said link (or the background of it’s parent element or multiple background images), I made an extension just for you. Actually, I made it for you several years ago. I just didn’t tell you. It’s called View Link Background Image and you should install it.

User Testimonial:

“Oh my god I had no idea this was a thing. You are a golden god.” – @beep

With IE9 looming over the horizon, it’s finally time to think about the great advantages to having IE7 as our new lowest common denominator. It really will change the way you work. Here’s just a few things that become possible:

• Warmly embrace 24-bit PNG transparency. You’ll still be able to get smaller file-sizes out of 8-bit PNGs, but you won’t have to use any shady hacks to get rid of that telltale gray background.
• Stop adding “book end” classes to the first or last item in a list to give it a different set of styles. Instead you can use the :first-child or :last-child psuedo-class. Nathan’s right, no :last-child support in IE7.
• Forget about adding page slug classes for individually styled navigation items. With CSS2 attribute selectors, you can actually write styles for a[href="/about/"].
• Reliably apply multiple classes to elements. A common example would be <p class="alert error">Error...</p> Honestly though, being able to finally use substring matching attribute selectors could sidestep the need for multiple classes altogether. Instead you could write a rule for p[class$="-alert"] that would apply to .error-alert, .success-alert, or even .rabid-antelope-alert.
• Eliminate the use of JavaScript for simple fly-out navigations. Now that the :hover psuedo-class works on non-link elements, you can show or hide sub-navigation when the parent list-item is hovered.
• Finally say goodbye to @ded‘s Min-Height Fast Hack now that min-height works across the board. This also means you can use max-height, min-width and max-width too.

Hold Tight!

While I was working at an agency that still supported IE6, it was hard not to envy those web workers who did not have to design for it. For those of you who have clients that still hold dear to this undead browser from 2001, it’s time is very, very near. There are a growing number of major sites and applications that no longer support IE6. What I’m most excited about though, is that fact that Google has joined the movement. They began phasing out their IE6 support (starting with Docs and Sites) this month, started warning YouTube users that their browser is no longer supported, and will allegedly stop supporting IE6 in GMail “later this year“. With that kind of pressure, it won’t be long before even the slowest IT departments start allowing their users to upgrade or switch browsers.

So, what changes are you most excited about once IE6 is no more?

• Personal Guidance – These types of emails usually require the most time, but are often the most rewarding to answer. Examples include students asking what types of courses they should take and amateur webmonkeys asking what skills they need to “make it” in the industry. I was once an amateur webmonkey, so I try to answer these when I can, even if that means they sit in my inbox for a week or two.
• Technical – Or, “how do I make this do that” emails. I try not to answer technical questions directly. I’ve learned most of what I know about website design through experience. Instead, I try to point people to places where they can learn the answers themselves. That leads to the last category.
• Additional Resources – The majority of questions I get are from people who simply want to know what they should learn next. I have a lot of respect for self-learners, so I do my best to suggest books and resources that I think will help. Here is an actual example of this type of email that I received today:

Hey Jason -

I just finished reading your book and I have to say kudos for a job well done. This was probably one of the most useful web design books that I have ever read.

However, now that I’ve finished your book I am ready to jump right into making my (somewhat) great new comp that I’ve made in Photoshop into a web page. Yeah, that’s where I get stuck. I’ve read a couple of the ‘dummy’ books for CSS, PHP, etc, but those don’t seem to help me take my design from the comp I’ve made in Photoshop and turn it into a functioning website. So there’s my question: can you recommend any books / sites / resources for doing just that? I understand the mechanics of CSS, for example, but I don’t know how to use it to replicate that beautiful design that is currently stuck in Photoshop onto the web.

Thanks in advance for any help you can offer. And again, great job!

John Doe

As I read this question there were several books that immediately came to mind: A few of the Sitepoint books, Designing with Web Standards, Bulletproof Web Design, Transcending CSS & Web Standards Creativity. I love all of these books, and the skills “John” needs are explained well in each of them, but the process of converting a Photoshop comp to working HTML/CSS isn’t something I learned solely from a book, but rather through years of reading online resources, viewing source code and tinkering. I remembered seeing a link a few months back to a series of screencasts that supposedly did a good job of explaining this process, so I started hunting. What I found was Chris Coyier’s CSS-Tricks.

Chris is currently up to 24 video screencasts covering a wide range of basic-to-intermediate web design and development skills. I haven’t watched all of the videos yet, but from what I’ve seen, Chris has a knack for breaking down the tasks he’s explaining into easily digestible instructions. I’ll definitely be adding CSS-Tricks.com to my list of recommended resources.

1. Typos
   My most common blunder (by far) in writing CSS is misspelling selectors and
   properties. I went on a rant about my tendency to spell position as
   positon back in
   2005 and that one still gets me occasionally. Most of the time
   syntax highlighting saves the day,
   but there’s no help for misspelled selectors like #haeder, .waring, and .altarnate.
2. Missing Units
   When using negative text-indent for text replacement, the set dimensions are the only
   thing holding open the block. If you leave off a unit (height:335;) that
   block will completely disappear. As you might have guessed, this has never happened to me.
3. Z-idiot
   Z-index is a practical and powerful tool when designing with CSS. The number one rule to remember when working
   with z-index is that the position property has to be set to
   relative (not realtive…), fixed or absolute. I’ve been known to arbitrarily insert z-index
   all over my CSS…and then I realize the element I’m trying to stack doesn’t have a position declared.
4. Background Position
   Is it bottom 100px or 100px bottom? That question used to always trip me up. Then I’d get confused when it was broken in Firefox. The
   W3Schools’ documentation of the background-position property is
   fairly straightforward when it comes to similar units. When using % or position values, you declare the horizontal (x) position and then the vertical (y).
   When you use keywords however, the examples suggest to declare the vertical keyword (top, center, bottom) first. So, what if you want to mix keywords and values?
   In that case you follow the %/position convention and give the horizontal value first. To answer my own question, it should always be 100px bottom.
   For more info and examples, see my Background Position Compendium post.
5. Bang Important
   Cascading order and inheritance in CSS is a beautiful thing…until you start working on a large family of sites that inherits rules from
   multiple external stylesheets. I personally see the !important rule (.error {color:red !important;}) as a hack and therefore try to avoid using it. Occasionally though,
   it’s a handy tool and a necessary evil. Just remember what properties of which elements you’ve set to important or you’re bound to
   pull your hair out later when you want to override them. If you need a quick refresher course, David Hellsing has a great article on Cascading Order and Inheritance.

I’ve been there, done that, and built out enough standards-based designs to diagnose (and/or avoid) just about any rendering anomaly. As useful as that skill is though, I still occasionally find bugs that leave me completely bewildered. Last week for instance, I had the same mind-melting problem pop up on two different sites. While the individual cases were very different, the common denominator was that they were absolutely-positioned links that weren’t clickable or hoverable in any version of IE. I didn’t write the code in question on either of these sites, but there was nothing wrong with it. Here’s a quick example:

HTML

<a class="clickme" href="#">Why can't you click me? :(</a>

CSS

a.clickme {
display:block;
position:absolute;
top:5px;
left:5px;
height:150px;
width:200px;
font-size:1px;
text-indent:-9999px;
}

If I were doing something like the above example, I would typically put a background image in the link because, well, that’s what text-replacement is all about. This particular link was placed over an image with a clickable area and therefore needed to be transparent. No problem in Firefox, Safari, or Opera…but when I checked the site in IE, the link wasn’t working.

In troubleshooting the issue, I put a border around the link and there it was in the right position with the right dimensions. Next, I added a background to the hover state and attempted to hover the link area with the mouse. Nothing happened, so I added a background-color to the non-hover state and it worked fine. I took the background-color off and it was broken again. Of course, the block needed to be transparent so at this point i was getting irritated. That’s when an idea came to me that I’m sure I’ll catch a lot of flack for: that’s right, I used a spacer gif.

I can think of several ways to avoid doing the link this way, but given the constraints of it having to be a transparent, absolutely positioned link, this seems like a good solution. Please check out the demo in IE and let me know if I’m crazy (you probably already knew that) and what you might do differently.

Even on static html sites, you can usually use the good ole’ server-side include syntax to add a repeated block of code to multiple pages:

<!--#include FILE="subnav-section.inc" -->

Now let’s say you have a nav list in there like this:

<ul class="subnav">
<li><a href="1.html">Chocolate</a></li>
<li><a href="2.html">Hazelnut</a></li>
<li><a href="3.html">Coffee</a></li>
<li><a href="4.html">Cake</a></li>
</ul>

Hopefully, you don’t give your pages vague names like 1.html, I’m just tossing those in there for brevity. Anyway, let’s say you want to change the background and text color to indicate which page you’re on – yea, I know…an active state, I was just explaining for those who might not know.

One cheap and dirty way I’ve found to do this is to add a wrapper div or even the <ul> itself around the include call with an added class that is specific to the page you’re on. Then, you can add the same class to the link and use the combination to set the active state.

To demonstrate, if you’re on the Coffee page (and who isn’t), your include call might look like:

<ul class="subnav coffee">
<!--#include FILE="subnav-tasty.inc" -->
</ul>

Inside that include, you’d have:

<li><a href="1.html" class="chocolate">Chocolate</a></li>
<li><a href="2.html" class="hazelnut">Hazelnut</a></li>
<li><a href="3.html" class="coffee">Coffee</a></li>
<li><a href="4.html" class="cake">Cake</a></li>

Then, within your css, you would add something like this:

.chocolate li a.chocolate,
.hazelnut li a.hazelnut,
.coffee li a.coffee,
.cake li a.cake{
background:#000;
color:#fff;
}

And viola, if you’re on the coffee page, the coffee nav item now has white text on a black background. Easy peasy.

The main problem is that the keyword values are to be declared with the vertical value first and then the horizontal (ie, bottom right). With numeric and percentage positioning, you declare them the opposite; horizontal value first and then the vertical. This creates some confusion when you want to do something funky like specify a pixel value for the horizontal position of a bottom aligned background. Do you say bottom 100px or 100px bottom? It would be nice if the browser made the assumption that if you declare an explicitly vertical keyword like bottom, then the other value is horizontal. Safari and IE make this assumption, but Firefox and Opera will only accept one order. If you get the order wrong, the browser will give up on positioning the background altogether and place your background in the default top left corner.

How nice. To avoid this problem, and for the sake of consistency (and sanity) you should always declare the horizontal value first and then the vertical. Even if you are using only keywords, bottom center and center bottom both render the same way, and even though the W3Schools says the former is correct, they both validate.

To figure all this out, I set up a page with 24 different combinations of background-position values containing bottom, right, center, 100px, and 80%. I left out top and left because either of these could be specified simply as 0 which would eliminate the need to mix keywords with numeric values alltogether.

Enjoy: The Background Position Compendium

Much more frustrating than that experience is server-side stylesheet caching. Although I’ve seen this happen periodically on Linux servers as well, our Windows testing server here in the office is a cache maniac. If you refresh a page on the server a few times, the machine will start serving a cached version of the stylesheet…and continue doing so for several minutes. You can clear your browser cache and refresh a zillion times, but you’ll still get the cached version. When you point your browser directly to the CSS file, it will actually show the latest version, but when you go back to the page you were trying to refresh, or any page that links to that stylesheet, you’ll still get the cached version. It’s enough to drive me mad, especially when I’m already working on fixing quirky IE issues.

While the server caching settings really should be reconfigured, the accepted local method of dealing with this annoyance is to add a query string to the stylesheet url like so:

<link rel="stylesheet" type="text/css" media="screen" href="css/screen.css?foo"/>

This essentially fools the server into thinking the file must have server-side code, hence forcing it to re-load the stylesheet.

While this parlor trick stops the server-side caching, we often work on sites that do not have the stylesheet seperated into an include, so you can add the ?foo to the stylesheet href value on one page, and as soon as you jump to another page, you get the old stylesheet again. Additionally, we often forget in our final cleanup to remove the query strings when we’re done working on a site, leaving behind our query-stringed stylesheet links for the world to see. Bah!

What’s the solution? Ideally, adjusting the server’s cache settings. As a stopgap though, or for situations where I don’t have control over the server’s cache settings, I wrote a bookmarklet that reloads all the linked stylesheets with a query string of the current timestamp attached. I used a timestamp rather than the usual ?foo because sometimes it seems like the server caches the ?foo query string and we end up using ?foo1, ?foo2, ?foo3… This way, the query string is guaranteed to stay unique.

CSS Cachebuster
As usual with bookmarklets, just right click on the link and “save link as” or drag it into your bookmarks toolbar.

I know, I know, it’s not all that impressive, but I’m proud of my little bookmarklet. As I keep telling Dustin and my other 133t Hax0r friends, I’m a designer, not a coder. Now feel free to pick it apart and tell me what you would have done differently and I’ll update the link above accordingly.

On April 5th, 2007 hundreds of websites will “go naked” by turning off their stylesheets, showing the world their pale-white, Times New Roman scribbled <body>s. I’ll be stripping down this website, as well as the website for my book, and amesnjas.com as well. Oh the humanity!

What does this look like for you as a constructor of websites? Well, let’s use the ubiquitous hCard as an example. According to the wiki:

hCard is a simple, open, distributed format for representing people, companies, organizations, and places…

So, any time you want to display contact information on a website for any of the types of entities listed above, you would use the hCard format. To make it uber-simple, the Microformats authors have even set up an hCard Creator. In the form, you can enter as little or as much information as you’d like, and it will spit out the appropriately formed hCard code:

<div class="vcard">
<a class="url fn n" href="http://www.jasongraphix.com/">
<span class="given-name">Jason</span>
<span class="additional-name">Edmond</span>
<span class="family-name">Beaird</span>
</a>
<div class="adr">
<span class="locality">Columbia</span>,
<span class="region">SC</span>
<span class="country-name">USA</span>
</div>
<div class="tel">123-456-7890</div>
</div>

Viola! A nice little bundle of information stored in appropriately tagged <div>s and <span>s. But whatever should I do with it? That’s what I was asking myself last week when I created a set of hCards for the regional offices of a corporate client. With a little CSS lovin’ and a couple simple jQuery functions, I created a page that highlighted each office’s contact information and map location when you hovered over either the map location or the hCard details. Confused? Well, I’ve adapted the main concept into a similar example. Instead of regional headquarters, I’ve used the locations of a few people who’s blog I read. Instead of map dots, I’ve used each website’s favicon. Clicking on either the favicon or the hCard will take you to that person’s site. Feel free to download and use this example however you see fit. Enjoy!

hCard Mapping: Example – Download (24 KB)