Wolf’s Little Store

I don’t believe you can design successfully for the web if you don’t know HTML and CSS. After perfecting his mockup, a web designer needs to be able to take that design and build a website out of it. If never get your hands dirty in the code, you’re not a webdesigner, period.

I’m not saying you need to be able to build an entire website - that takes a team of skilled people with different proficiencies. And by website I mean a CMS-driven dynamic website, not your single HTML file you uploaded to myfirstwebsite.com.

Designing a website, writing the markup and writing the styleheets are the foundations of the skillset of a webdesigner. You could call it the webdesigner’s holy trinity: perfecting these three takes years, and anything else you know can be considered a bonus.

When you start out with HTML and CSS you run into a thousand cross-browser issues and trying to make the mockup real often becomes a frustrating experience. Almost daily I hear fellow webdesigners curse at one browser or the other. The only way to really learn how to deal with bugs is to spend some time reading up on why and when they occur, and how you can build around them or solve them. I know I spent quite a few hours with a few bugs and hacks.

I compiled a list of common bugs and things you should know how to do to get from mockup to website in no time. This is a reference list so this post will probably get updated in the future.

Currently, this list is browserbug-focused and doesn’t deal with certain skills like saving images for the web, like writing clean and structured markup and stylesheets. Some things are not easily listed - common sense for example. Nonetheless, enjoy.

The list

• Floating and clearing, including clearing without structural markup.
  • Also see: how to do it for IE7.
• Positioning, and more specifically making the absolute relative
• Dealing with, and the mechanics behind CSS specificity
• Avoiding the flash of unstyled content
• Countering the IE6 double margin bug
• The concept of hasLayout
• The Safari 2 line-height bug
• The proprietary filter to add PNG support to IE6
  • Working with iepngfix.htc
• Min-height fast hack
• IE6 min/max-width expression, that doesn’t freeze the browser
• How to get rid of the ridiculously long buttons and inputs in IE6
• Vertical centering with a floated shim as explained here.
• Embedding flash files with swfobject.
• The 62.5% rule for sizing texts in ems
• Z-index image and background layering, and the effect of z-index values to positioned elements
• Opacity via opacity, -moz-opacity and the IE6 alpha filter as explained here.
• Adding position: fixed; support to IE6
• Centering without knowing the width of an element: centered widthless floats

• Category: webdesign
• Back to the overview