Web Design and CSS, how hard can it be?

So, audaciously, I decided to do the theme for my pet Rails project. How hard can CSS and Photoshop really be? Having made basic layouts and modified various themes, I thought my CSS skills were adequate, and Photoshop is, after all, just another Windows application.

With the help of my talented fiancee and flatmate, the Photoshop side of things went fairly well for a banner image. Not too hard, find a good image and apply some layers, effects and text.

When time came to hit the CSS, I felt confident. Based on my vague trial and error understanding of floats etc, I managed to spend a fair bit of time messing around, painfully, slowly getting a good layout in Firefox, only to be frustrated by an awful rendition in Internet Explorer. Then trying to make a compromise layout between the two that looked reasonable in both, only to have a slight change throw everything into disarray. Repeat ad nauseum.

Clearly, I my confidence was misplaced, and my CSS skills sucked. Time to actually learn something. I turned to my yet un-opened copy of “Beginning CSS Web Development – From Novice to Professional” by Simon Collison, recommended by a ThoughtWorks buddy, Warren. I read it pretty much cover to cover on Saturday. It was quite a good read, practical with useful examples and a light tone. Lots of good stuff within:

• Clear explanation of the basics
• Coverage of different browsers
• Some insight into a web designer’s mind
• A number of useful page layouts
• Different options for form layouts
• Some advanced CSS tricks
• A nice worked example of cutting up a Photoshop mock-up and turning it into image slices, CSS and HTML.

Overall, the book was pretty much exactly what I needed to get back on track and bring my misbehaving CSS under control.

Here’s a few things I learnt that solved some of the most pressing woes I was having with CSS:

• Margins collapse into each other. Ie, if you have two elements next to each other and each has a 10px margin, the total distance between the two will only be 10px. Adding 1px of padding will mean the borders of the two elements don’t touch and hence won’t collapse
• Generally avoid padding on fixed width elements. Instead, wrap them in another element such as a div, and put the padding on it. That way, you avoid needing to do any hacks for the broken box model in older versions of IE.
• You can put an ID on each pages’ BODY, and that way, you can easily target elements on individual pages using their body’s ID.
• Often a good way of doing layout with floats is to keep the document as much using the normal flow layout, and then put in appropriate margins or padding to make space for floats, rather than floating the whole document.
• The order of values in short declarations like ‘margin: 1px 2px 3px 4px;’ is top, right, bottom, left.
• It is a good idea to stick to the limited set of web-safe fonts, and also use a number of fallbacks for font family to cover all viewers.

My app’s theme is not finished yet, but CSS has now become more a pleasure than a frustration.