If browsers adhered to accepted web standards, life would be blissful for web designers. But, instead we’re forced deal with the frustration of inconsistent browsers. Fortunately, we struggle en masse, so we’ve aggregated some time-saving web tips & tricks we’ve found useful. We hope they help you as much as they’ve helped us. And we offer a collective thank you to all those who share their knowledge with others.

Reset CSS

By default, html elements start with declared margins, padding, font sizes, etc. The goal of a reset file is to override these default settings and reassign neutral values to all elements. These neutral or “reset” values can then be styled as necessary and more logically via subsequent Cascading Style Sheet (CSS) declarations (rules). One of the early advocates of the reset style sheet was Eric Meyer.

• http://meyerweb.com/eric/tools/css/reset/
• http://meyerweb.com/eric/thoughts/2007/04/18/reset-reasoning/
• http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/
• http://meyerweb.com/eric/thoughts/2008/01/15/resetting-again/

As you can tell by the continued rehashing and refining of reset.css files, the debate continues. And while we prefer Eric Meyer’s reset style sheets, you can find numerous others to choose from, including Yahoo’s YUI based reset. Regardless of the source, reset style sheets are incredibly helpful and are immensely popular.

CSS based navigation

The days of building navigation with sliced up images is long over… unless your navigational elements require images. But even then, you can swap these images and control their positioning with CSS rather than outmoded javascript. Normally, you’ll be working with unordered list and list items tags, stylizing these with CSS to change fonts, background colors and images, and more. The possibilities are almost infinite. You’ll find many terrific css-based navigation tutorials online, but here are few of our favorites.

• http://css.maxdesign.com.au/listamatic/index.htm
• http://css.maxdesign.com.au/listamatic2/index.htm

Floats

Shortly after you’ve begun to format your pages with CSS, you’ll encounter the need to create a multi-column layout. This is where CSS newcomers can quickly get frustrated. Multi-columns are easy to do with tables, but with CSS, you need to learn and understand “floats”. Floats, clearing floats, and how to deal with browser issues related to css-based floats can seem daunting, but if you read a little, and look at some examples, you can quickly gain an understanding of floated elements. Here are some excellent resources.

• http://css.maxdesign.com.au/floatutorial/index.htm
• http://www.smashingmagazine.com/2007/05/01/css-float-theory-things-you-should-know/
• http://www.code-sucks.com/css%20layouts/

PNG Transparency

You’ll be hard pressed to find a cool, modern website today that doesn’t utilize the power and flexibility of PNG’s transparency. Unfortunately, PNG transparency requires some finagling to work properly with Internet Explorer 6 (IE6). And while IE6 is slowly spiraling into thankful obscurity, it still accounts for approximately 25% of the browser space - give or take - and therefore we have to accommodate it’s quirkiness.

In the past, if you wanted to use PNGs in your web design, and wanted it to work correctly in IE6, you had to code in some CSS hacks or apply “IE filters” to your images. This could be annoyingly laborious and fraught with problems. Fortunately, some very bright people developed a down-and-dirty fix that applies universally to images and background images in your document - so we can simply insert their code and our PNGs and not have to worry about IE6. It’s a real time-saver that web designers everywhere are eternally thankful for, I’m sure.

• http://www.twinhelix.com/css/iepngfix/

UPDATE: 12/14/2009

ie7.js library by Dean Edwards

This javascript library attempts to bring W3C compliance to IE5, IE6, and IE7 even. It uses javascript to inject CSS and HTML compatibility into browsers that normally don’t fully support them (yup, Internet Explorer).