When you create your shiny new designs, no doubt you view it as your going along in your favourite browser. But I’m sure like myself you have encountered rendering problems between browsers. Some of the incompatibilities include:

• Padding and margin inconsistencies.
• PNG transparency problems in IE5.5/6.
• IE :hover only on anchors.
• Background image inconsistencies.

You have a few options at this point.

• Use CSS hacks for different browsers.
• Change your design to work in all browsers (possibly at the expense of your overall design).
• Detect the browser and serve a completely different stylesheet for each different browser.

(more…)

In my web browsing on the subject of CSS I came across Reinhold Weber’s list of CSS pieves. I have to say I agree with many of them. I thought I’d mention a few of the CSS-related issues I hope will be fixed in future browser releases. (more…)

Reducing file size without compromising functionality is important for forward-thinking web developers. Many modern CSS-driven websites use huge external CSS files of anything up to about 20-25kb.

By using CSS shorthand the overall file size can be reduced, increasing the speed of page loads and decreasing bandwidth usage. Another method is to use a compression utility to remove white-space, similar to JavaScript compression. A good compression utility is available at CleanCSS which has a variety of options to choose. CleanCSS can arrange your code to reduce character usage, thus decreasing the file size. As with any type of compression it is advisable to keep a backup copy of your stylesheet just in case you aren’t happy with the results. (more…)