(This blog post is kindly referenced on Drupal.org here: http://drupal.org/node/123260)

by Sam Street

The difference between a good web designer and a great one is the ability to know how to take short cuts and save time without compromising the quality of work.

I recently found a site offering 20 great tips that will speed up your work and give it a professional edge.

The site proved to be a great resource so I'll outline a few of the more helpful tips it provided. Click here for the full 20 tips. The link can also be found at the bottom of this article.

CSS: IE Box Model Hack

Sooner or later you’ll come across an important bug in Internet Explorer that incorrectly calculates the width and height of block level items by including padding values within the box’s dimensions, rather than adding it outside the box. This can wreck layouts. The solution is known as the Box Model Hack, which uses another bug in IE to force it to use tags that other browsers ignore. If you have a div validly specified like this:

div { width: 100px; padding: 5px; border: 5px solid #fff; }

You’ll end up with a box that’s 120 pixels wide in most browsers, but only 100 pixels wide in IE. The easiest solutions is the box-within-a-box method, which places one div inside another:

div { width: 100px; } div .hack { padding: 5px; border: 5px solid #fff; }

Nest the div that uses

class="hack"

inside the outer div to use this method.

CSS: The correct format for pseudo classes

For text rollover effects, it’s important that the pseudo classes are in the right order, or they won’t work correctly in all browsers. The correct order is:

a:link { color: blue; } a:visited { color: purple; } a:hover { color: purple; } a:active { color: red; }

Favicons:

Favicons are the little 16x16 pixel icons that appear in your favourites lists and the title bars of web sites. They’re quick and easy to add: save a graphic in .ico format (Mac users may want to consider using Graphic Converter as Photoshop doesn’t support this format) and put it in your site’s root folder. It’s as simple as that.

Source: http://www.netmag.co.uk/zine/design-tutorials/20-pro-tips