td { border-left: 1px solid #CCC; }
td:first-child,
td:last-child { border-left: none; }

IE7 correctly removes the border from the first table cell in each row, and doesn’t do anything with the last table cell (because it’s not supported). But in IE8 it’s a different story. Here, the two selectors fight it out like siblings! To illustrate, td:last-child basically says to td:first-child, “I know we’re supposed to share here, but I don’t want to share! Since I can’t use this, I’m going to take it from you so you can’t use it either.” Well, not really, but in technical terms, the entire declaration block gets discarded by IE8 when :first-child and :last-child are grouped together. To get this selector grouping to not cause problems in IE8, you have to separate the selectors into two different rules:

td:first-child { border-left: none; }
td:last-child { border-left: none; }

This will allow IE8 to correctly apply the style to the first table cell and do nothing with the last one.

I know, :last-child isn’t even supported in IE8 yet. Despite this shortcoming, I’ve decided to start using it anyway since I figured out a way to make it work in IE (more on that in another post). But this obscure bug in IE8 only makes me realize that testing in IE, even in the latest version with seemingly much better CSS support, is still a very important part of the front-end development process.

While all these things are what the designers at Netflix work hard on every day [great IA, Ajax, social networking integration], they go unmentioned by their customers. It’s not because these aspects aren’t important. It’s because the designers have done their job really well: they’ve made them invisible.

Jared Spool on Great Designs Should Be Experienced and Not Seen (via stopdesign)

This has been working great for me but yesterday I read a post by Noah Stokes about using function keys as custom keyboard shortcuts in Photoshop for frequently used menu items. He assigns Crop to F1 and Save for Web to F2. Then it hit me, I could the same technique, but apply it to my existing actions! Now when I first make a selection in Photoshop, I can hit F1 to Flatten, Crop and Save for Web all at once!

To set this up, first you’ll need to set up your actions as shown below.

Then select the action in your actions palette. In the actions palette menu, select “Action Options.” This is where you can assign a function key to the action.

It doesn’t matter how awesome or slick the CSS or ActionScript on your site is. You have to make your site memorable. Your site has to speak clearly. Otherwise it may just end up as a web monument awaiting for another beautiful site to take its place.

Jamie Dihiansan on Designers: Make it Memorable

Facebook shocked everyone by providing a decidedly inferior experience for IE6 users, bluntly telling them why and also offering browser upgrade links. More recently, Google followed suit – not entirely for altruistic reasons, no doubt. Google Mail users running IE6 now see a ‘Get faster Gmail’ link, leading to a page promoting Firefox and Google’s own Chrome browser. Like Apple and Facebook, Google considers IE6 ‘unsupported’, warning that it fails to run some features of Google products.

Craig Grannell in Calling time on IE6

I agree with their notion that not every site can afford to end support for IE6, or even convince users to upgrade their browsers, but we can, in small ways, start following the examples set by these larger organizations. It’s pretty clear that the end of IE6 is just around the corner. That’s what I’m hoping for at least.

Being a front-end developer myself I find this topic both interesting and amusing at the same time. The topic has been argued and debated to death over the years. I’m not here to do that though. I’m simply trying to answer a colleague’s question “how do you feel about this?” This being the give up and use tables mentality.

The advantages of CSS based layouts, or better put, the development methodology of separating structure from presentation from behavior, are well known. I’m not going to go through them. But I will say that the learning curve can be relatively steep for newcomers, especially those who have done table based layouts in the past. The temptation is to “give up and use tables” because that is what is most familiar.

To these people, I say “go right ahead.” If you can get the job done in half the time using tables for layout then you’ll be saving yourself lots of time. It won’t make you a bad person and you won’t be doing any disservice to humanity. So don’t worry so much about it. It will make your site harder to maintain, and your pages will be a heftier download for the user, and, oops, I said I wouldn’t go there.

I will also say to these people, “don’t give up on using CSS for layout just yet!” You simply can’t learn CSS from scratch in one day or even one week. It just doesn’t happen that way. Once you learn how to leverage CSS based layouts, it won’t take much time to put one together. It’s the details, intricacies and variances in a design that require extra attention and more time, but that holds true no matter what method you use for page layout. But, if you can commit and be dedicated to learning CSS, you’ll embark on a learning process that will give you a renewed desire to do things better, a sense of web craftsmanship, and a greater sense of pride in your work. You’ll expand your skill-set and become better at what you do, which will ultimately make you more marketable. You’ll eventually be able to put together a CSS based layout in no time at all and you’ll soon start seeing and experiencing all the advantages that come with it.

So either path you decide to pursue I wish you luck. It is my hope though that you would choose the latter path and be willing and dedicated to go the extra mile. I guarantee that you won’t look back with regret.

Here are some tips that have helped me along the way:

1. Use the right markup for the job
   Meaningful markup is what gives CSS it’s true power. Use div tags to group areas of the page together, use heading tags for headings, use list tags for various types of lists, etc. It’s really pretty basic stuff.
2. Reset your CSS
   The purpose of a reset stylesheet is to remove the inconsistent default styling of HTML elements, which creates a level playing field from browser to browser. There are many CSS resets out there, the most popular of which are Eric Meyer’s Reset CSS and Yahoo’s YUI Reset CSS. I personally use a slightly modified version of Eric Meyer’s reset.
3. Use a clearfix class
   If a containing element contains floated elements, the containing elements dimensions do not automatically expand to surround all the floated elements. The reason for this is in the W3C spec but essentially content needs to be able to flow around floated elements. The clearfix class can be found here. See update below.
4. Organize your stylesheet(s)
   As your stylesheet begins to contain more and more rules, things can start to get tough to find. Organize your rules by relationship and context, by section and/or page. If necessary, break apart your stylesheets into several files to make maintenance easier.
5. Code for the best browser, then fix for the broken ones
   Today, the best browsers are Safari and Firefox. Internet Explorer however, is the most used browser but it comes with many rendering inconsistencies, especially version 6. If you design your CSS to the standard first, then fix the issues that are specific to older browsers, your code will ultimately be more supportable in the future.
6. Know the limitations of IE
   If you are aware of the CSS bugs that are only found in IE then you will know exactly how to fix them when they occur. Even better, you’ll be able to anticipate these bugs as your are designing your CSS, and can immediately apply a fix so that it’s taken care of. For more details check Explorer Exposed! at Position Is Everything.

For more tips read CSS: It’s not that hard, at Unmatched Style.

Update 3/18/09: Last night I found out about an alternative to the clearfix class. Something so painfully simple I wondered why I hadn’t ever heard about it before. It essentially uses overflow: auto on the containing element. Viola, easy clearing, with no special class name required! I think I’m going to start using this technique right away. Read more here.

Motorola DynaTAC 8000X… The Model T of mobiles. The device was birthed from a fierce race between Motorola and Bell labs to bring the first portable to market. In 1973, Motorola’s Dr. Martin Cooper won that race when he placed the first phone call on an early prototype that paved the way for the DynaTAC.

Mat Honan on From Brick to Slick: A History of Mobile Phones

I stumbled across this optical illusion the other day while measuring the width of an icon with the marquee tool in Photoshop. The dancing marquee lines appeared to bend right before my eyes! It’s not too often that you find an optical illusion like this without googling it first.

We’ve all seen those 3 digit security numbers on the back of credit cards, but what exactly are they called? Are they called CCV, CVV, CVC, or CVVC? Well according to sir Wikipedia, the overarching term is actually CSC, or Card Security Code, which encompasses all the different flavors that are out there. CVC1 or CVV1 is actually encoded on the magnetic strip. CVC2 or CVV2 is the 3 digit code on the back of the card in the signature panel. This code is often asked for by merchants for “card not present” transactions over the internet, by mail, fax or phone. Still confused? Check the Wikipedia link above for all the boring details.