Getting a lot of hits from the 53 CSS-Techniques You Couldn’t Live Without post on Smashingmagazine I realised I don’t really need a lot of those (although a lot are cool). Instead let me share with you CSS techniques that saved my a*** whenever I had to create a layout using CSS or proving those wrong that claimed layout tables cannot be replaced.

None of these are new, and many will be the comment that people knew about this, but I can safely say that knowing about the following and some scripting allows me to create almost any of the fancy 53 techniques mentioned.

Tabula Rasa – the global whitespace reset

In October 2004 I found Andrew Krespanis’ global whitespace reset on his still (to me ) beautiful site leftjustified. The idea behind it is so simple, it is ingenious: as every browser out there has an own mind when it comes to rendering styles with a built-in stylesheet, you can overcome all the differences with a simple * selector that undoes everything the browser did. You reset margins and paddings to zero, remove list-type and even set a standard font size. After using global whitespace reset you have a clean slate to start from.

Making the absolute relative

Absolute positioning can be dead handy when you need to align different elements horizontally. You just position one to right and give the other a right padding of the width of the first one, voila – columns. It gets problematic when you need to have other content above the multi column one and you don’t know how high that one will be. The trick is to have both in a parent element and position this element relative – the absolute element will be positioned in relation to this one and not the browser window. Douglas Bowman is the man to thank for this one and that it doesn’t work on MSIE 5.02/Mac is not really causing me any headache.

Containing the float

The problem with the second trick is that if the absolutely positioned column is not the longer one of the two it’ll spill out of the containing element, which is why it is better in a case where you have no clue about the column length to float both of them. The problem when you float them is that the containing element has no height whatsoever. The workaround is to set 100% width on the container and float it to the left, too. Make sure to put a clear:both on the following element on the page

Sliding doors of CSS

Another Bowman trick was Sliding doors or in short using a large background image and clever positioning to allow for expandable navigation elements. As I am not caring much for browsers that should not be supported any longer, I normally tend to use one massive background image and position it in the different elements accordingly as shown in the flexible CSS menu tutorial.

Using background-position to cut down on images and avoid caching issues

Another permutation of this solution is using one background image for several page elements and use dimensions and background-position to only show the relevant part of the image. This technique, christened CSS Sprites (rubbish, they aren’t 24×21 pixels like real sprites) by Dave Shea allows you to cut down load time (as you don’t need to resolve the URL and load lots and lots of images) and avoids nasty flickering on rollovers that MSIE had.

Out of the screen, out of the mind with off-left

Sometimes you need to show and hide content or you need to have content that is only available to visitors that have CSS disabled (the latter should never become a habit, it is a dirty hack and you know it). This is where the off-left technique comes in handy. Instead of using display:none you position the element far off the screen with a negative horizontal and vertical value. Screenreaders will still read them out, but CSS enabled browsers don’t show them at all.

I love CSS, I like most browsers, I just don’t think that we need to overcomplicate matters.

[tags]CSS,tricks,webdevtrick,webdesign[/tags]

So you expect me to talk?

Check the first .net podcast and hear Paul Boag (as the host), Dan Oliver, Gary Marshall, Andy Budd and me talk about the iPhone, hiring web developers, HTML emails and IE7.

[tags]iphone,ie7,html mails,hiring web developers,podcast[/tags]

What started as a blog post grew out to be an article for ALA or Thinkvitamin but then ended up on the official blog of the YUI. In the article I am explaining a different approach than using frameworks or standard web design methodologies to create web applications. Instead of concentrating on the technology or the user agent conformity of the application you concentrate on how the app should react to what users do. Separation of Structure, Presentation and Behaviour was just the beginning. Separating out the events that drive the application might just make it easier to build complex applications. I know it did for me.

• Check out Event Driven Web Application Development over at the YUI blog

[tags]web application,application development,events,methodology,development[/tags]

I just ordered another set of Moo Cards (those little business cards you might have gotten from geeks at @media or similar occasions) and got the following mail as a confirmation:

Hello Christian
I’m Little MOO - the bit of software that will be managing your order with us. It will shortly be sent to Big MOO, our print machine who will print it for you in the next few days. I’ll let you know when it’s done and on its way to you.
In the meantime you can track and manage your order at:
http://www.moo.com/account
Remember, I’m just a bit of software. So, if you have any questions regarding your order please contact customer services (who are real people) at:
http://www.moo.com/service
Thanks,
Little MOO, Print Robot
MOO “We love to print”
Order details as follows:

Honest, funny and with all the information you need. Please more of that!

[tags]moocards,marketing,email,automated messages,funny[/tags]

I think we all have realised it by now JavaScript is a hot topic again and if you know your stuff and play your cards right you can make money and gain fame with publications (books, articles, magazine submissions) and conducting trainings and workshops.

This is grand and there is no reason why JavaScript should not be an integral part of web application and web site design – if used in an unobtrusive manner and with maintenance in mind .
However, lately I’ve discovered that there are a lot of publications cropping up that have been rightfully forgotten and got a lick of paint and the label AJAX just to be sold again without really looking into upgrading them. (more…)