Andrea's Blogger Templates

Unfortunately, older versions of Internet Explorer, along with IE 6 in quirks mode, use their own, nonstandard box model. Instead of measuring just the width of the content, these browsers take the width property as the sum of the width of the content, padding, and borders. This actually makes a lot of sense, because in the real-world boxes have a fixed size, and the padding goes on the inside. The more padding you add, the less room there will be for the content. However, despite the logic, the fact that these versions of IE disregard the specification can cause significant problems. For instance, in the previous example the total width of the box would only be 90 pixels in IE 5.x. This is because IE 5.x will consider the 5 pixels of padding on each side as part of the 70-pixel width, rather than in addition to it (see Figure 3-3).

The box model is one of the cornerstones of CSS and dictates how elements are displayed and, to a certain extent, how they interact with each other. Every element on the page is considered to be a rectangular box made up of the element’s content, padding, border, and margin (see Figure 3-1).

Three of the most important CSS concepts to grasp are floating, positioning, and the box model. These concepts control the way elements are arranged and displayed on a page, forming the basis of CSS layout. If you are used to controlling layout with tables, these concepts may seem strange at first. In fact, most people will have been developing sites using CSS for some time before they fully grasp the intricacies of the  box model, the difference between absolute and relative positioning, and how floating and clearing actually work. Once you have a firm grasp of these concepts, developing sites using CSS becomes that much easier.

Comments can increase the size of your CSS files quite considerably. Therefore, you may want to strip comments from your live style sheets. Many HTML/CSS and text editors have a search-and-replace option, making it pretty easy to remove comments from your code. Alternatively, you could use one of several online CSS optimizers such as the one found at www.cssoptimiser.com Not only does an optimizer remove comments, but it also strips out whitespace, helping to shave off a few extra bytes from your code. If you do choose to strip comments from your live style sheets, remember to retain a commented version for your production environment. The best way of managing this process is to create a deployment script that strips comments automatically when you make your changes go live. However, as this is an advanced technique, it’s probably best left to fairly large, sophisticated sites.

Instead, the best way of reducing file size would be to enable server-side compression. If you are using an Apache server, talk to your hosts about installing mod_gzip or mod_deflate. All modern browsers can handle files compressed with GZIP, and decompress them on the fly. These Apache modules will detect whether your browser  can handle such files, and if it can, send a compressed version. Server-side compression can reduce your HTML and CSS files by around 80 percent, reducing your bandwidth and making your pages much faster to download. If you don’t have access to these Apache modules, you still may be able to compress your files by following the tutorial found at http://tinyurl.com/8w9rp.

With large, complicated projects, it is often useful to annotate your CSS files with temporary comments to aid development. These could be reminders of things you need to do before launch or look-up tables for common values such as column widths.

It is a good idea to break your style sheets down into sensible chucks for ease of maintenance. At Clearleft, we usually start with the most general styles first. These include styles that are applied to the body tag and should be inherited by everything on the site. Next are any global resets we may need, followed by links, headings, and other elements.