mmm defiantly some links there worth reading and keep bookmarked for later reference, thanks for that.

Lots of resources worth checking out thank you. I hadn't even thought about liquid faux columns so a big thank you for that.

Great article Jonathan, as usual. The thing that I think causes the most problems to newcomers is cascade. I've seen folks use the most elaborate hacks and load of !important nonsense to circumvent such an easy principle. It's not that they don't get it, its just that they don't know about how cascade works.

You forgot about IE hacks! HTML Comments causing problems in some instances (last character repeat bugs) fixing problems in others (fixing foated images) setting height to 0.001% to stop things disappearing etc.

Also, the issues related to relatively positioned elements in floated containers, ie unclickable items etc.

Love the redesign btw, I haven't checked back here in a while!

All good points! But sometimes even the basic parts of CSS can be tricky for Web designers. I agree with Miha Hribar on the cascade including specificity is hard for new CSS users to use well.

Let's not forget liquid layouts, which are still a bane for most people. I keep a lot of resources at Liquid Designs for anyone who needs help.

How about IE conditionals?

http://www.quirksmode.org/css/condcom.html

Learning about those saved me from having to apply a million hacks to make IE happy within my base css file. Now I can serve IE its own css file if it needs special attention.

A great set of links, but I agree with Miha that you're missing what I think is the most crucial concept necessary to "get over the hump", and that's cascading/inheritance. (OK, maybe the box model is more important.)

I mean, it's called Cascading Style Sheets, and yet how many stylesheets have you seen where the author has created an endless number of class specifications, each of which sets the same font-family, font-size, etc., each delegating to it's own small set of elements.

I think most CSS "dabblers" don't understand the power of the various types of selectors (or they're still afraid of sketchy browser implementation), and they don't understand how to utilize cascading. Those are the things necessary to get over the hump.

This is a great reference article, thanks for writing it.

One thing that comes to mind is the idea of false columns, that's something that continues to come up when I'm teaching new people about CSS.

I've never seen (nor thought of) anyone doing their rollover images in the way mentioned. A technique I used to address the issue is to put the "hover image" as the background of the containing list item, and then the "off image" on the a. Upon a:hover, background:none.

Seems like it would be a pain to setup every button like that, especially if they have unique text. Good post.

Great article, and yes alot of great resources in there. This is the great thing about programming, is finding more efficient ways to do things that your currently doing in a less then optimal fashion.

Sprites, takes me back to the Commodore 64 days and full screen scrollers. :)

Ah, well, a great article! If only I had found one of these before I was finding all of this out by trial-and-error.

Still, some of these links did provide me with something new to work with!

Article was a bit above my head, but I understood enough of it to learn that I should brush up on my CSS skills!

bad link? "Listamatic" goes to http://www.alistapart.com/articles/fauxcolumns/

Thanks. I haven't designed a site in years and now I'm having to relearn all this new css layout. The article provided a lot of help to me....but I still miss tables....

Very cool stuff

Some good links there! Well worth a read, nice artice.

Harry

Some good info here for dealing with CSS. Marked for reference. Thanks!

Great article. I totally agree there is a "hump" in the learning curve right before it all comes together in peoples minds. I like that you mentioned DOCTYPE as well. People can avoid a lot of confusion and achieve consistent behavior if those are understood.

Wow very nicely written :) Going to share this with my readers on P2L, thanks!

great resources for css beginners and advanced too. I bookmarked the page ...I know I will need the tips sooner or later. Cheers,

I have a tip that's more geared towards effective layout. It's a mash up of Jason Santa Maria's gray boxes wireframe approach and traditional newspaper column layouts, but I basically made a fluid layout with a transparent PNG grid overlay. It knocks out the links when viewing, but during production, it's okay.

Warning not suitable for IE viewers. :-) Best for FF. (It's just production stuff!)

Go ahead change the size of the window and watch the scaling of columns and elements:

http://bfiprotos.blueflameinteractive.com/

Same with wireframes:
http://bfi.blueflameinteractive.com/

-CP

One technique I myself employ each and every time, is the global whitespace reset..

Simply put, start off your stylesheet at the very top, like this;

* {margin: 0; padding: 0; border: 0;}

The asterisk (*) is a universal selector, ie. affecting every single element throughout your (x)HTML.
What it really does is zeroing out differences between browsers, and keeping everything in check.
Of course, you'll have to apply margin, padding and borders yourself, to elements that'd otherwise have these properties set by default, eg. paragraphs, lists and especially the body tag itself (opera applies padding, IE margin).

Get used to this method, and you'll quickly become a master of the grid, not a slave ;)

Cheers

<h3>When a (Microsoft) Problem Comes Along, You must ZOOM it!</h3>
Many, many coded designs ago, I too discovered the virtues of 'overflow: auto' with regard to clearing floats. Of course, setting width or height is often not a very good way to get IE6-and-below to clear the float, especially when the element in question has padding. Luckily, though, Microsoft has given us an out by providing conditional comments. Now, I just have an IE6-and-below style sheet with a few tweaks in it.

The best part of this scheme is that I can use the MS-proprietary CSS property 'zoom' in the IE style sheet. 'zoom: 100%' bestows 'hasLayout' on any element to which it is applied, which fixes a whole subset of rendering issues in one fell swoop. Parent elements expand to clear floated children; floated anchor elements containing images set to 'display: block' don't get all wonky; list items using background-image bullets don't flake out; dogs and cats, living togeth- well, you get the idea.

I'm sure there are edge cases where 'overflow: auto' and/or 'zoom: 100%' aren't suitable. I just haven't found one yet, after coding dozens of designs.

Floats take a little getting used to, but I wouldn't do it any other way now that I've gotten through learning it. I'm also a big fan of the sprites and image replacement techniques. Again, a bit tricky to get used to, but once you do... look out.

Forms are teh sux.

HTML forms are the bane of my CSS existence.

I'd have to agree with most of the people on here about conditional statements, I don't think they're as vital as the six categories mentioned here but with CSS3 getting closer and closer who knows what things will have to be kept away from IE to keep things sane.

They definitely are a major help already.
Great article, I've mined it for whatever I can learn.

Nice article, will certainly come in handy.

Great read. I've bookmarked this article. Thanks for putting things together.

All well put Jonathan.

I could not agree more with the “cascade” issue. It is the main bottleneck to rookies. I will have to add to that the semantic meaning to markup and CSS. It is hard for beginners to grasp the value of semantic meaning to code. Same applies to server side code and even in SQL statements.

Nice article. This is a great list for beginners and experts!

It's a good sensation...
I mean: this is my (and many other's) normal way to act and think.
Well, not in all points but most of them.
For months - no - years! - many people keep on thinking 'bout a different web.
What once was weired, today is normal!
Yes, I have a good feelings about that! :D

Thanks for these pointers. Its good to get an overview of doing things the CSS way.

Great article. Thanks!

What an amazing article! I was searching the web for an article like this, and a couple of hours later this one cropped up on my RSS feeds. Crazy luck! Thanks very much Jonathan.

good article. but in my opinion it's now obsolete to consider quirks mode (nobody uses ie<6 nowadays)

Interesting article.

Great list for novice as well as for professionals too

I'm glad to see many designers / developers around the world acknowledge the importance of CSS / Web Standards.

It's just sad that in my part of the world, people don't care! :) Well I do, just bought a SitePoint book on CSS and it's great!

I look forward to learn more from you.

btw, are you ever going to STYLIZE the "Add my comment" button? ;) To match it with the site's beauty.

Great post. Your list was most comprehensive.

Great roundup of CSS goodness. I just got stymied from a custom component I had written for a customer. Turns out that my doctype had been stripped out and replaced with a doctype that rendered my code in quirksmode. Truly evil.

Corners

Clearfix is what I use for handling floats. Its by far the easiest and best cross browser approach to handling the clearing of floats I have seen. I know many people will use various "overflow" properties to pull off the clear, and that is great so additional classes (i.e; class="clearfix") doesn't have to get amended to various containing divs, but I have found using the overflow approach can have its cross browser pitfalls.

.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.clearfix {display: inline-block;}

/* Hides from IE-mac */
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

I'm an aspiring web developer (pretty young too - not even in college yet) and its sites like these that I love to read. Keep it up Snooks.

I also think the Sitepoint book is great.

Thanks for sharing this nice reference article. I tried that Liquid Faux Columns technique and it works perfect!

Ya the liquid faux columns worked great for me too!

I dream of a day when there will be solid standards across browsers, I just hope google Chrome doesn't have its own CSS nuances.

I agree with both James and NewYoka that the liquid faux colomus article is great. I have been looking for this for a while now and finally found it :)

Great reference article, thanks for writing it. I love the fast rollovers article. Bookmarked!

Floated Navigation, there is a bug in ff 2...

I am using these techniques in almost every project, especially floated list and sprites/image replacements for navigation... nice list :)

Great list, I bookmarked a few that will be really helpful in my work. Thanks.

Great post! Really informative post. Thanks for sharing with us.

These are great techinques I have been using them for a little bit now. The floated list is a great tool as well as the replacements for navigation, thanks so much for your valued work !

css examples - www.cssportal.com

Great reference article, thanks

Thanks for the helpful information

Outstanding article sir!Bookmarked cheers.

Я никак не смогла вставить рисунок в коментарий. Вставляю ссылку на рисунок а он не показывает его как рисунок. Что мне делатЬ?
Фотки беру отсюда - images.yandex.ru/yandsearch?text=snook.ca