Archive for September, 2008

Recently, I had a client request 2 versions of his website: one normal, and one for mobiles. Given that it was a “social” site that teenagers would probably access on their phone, it made sense. He wanted the content to be the same, just styled differently. While adding style=”handheld.css” came to mind, some phones help themselves to the screen media type (does anyone know what standards mean anymore?) so the owner requested a combination of both browser sniffing (which by the way isn’t the best way of doing things, don’t get me wrong) and media types.

Here’s how I did it.

(more…)

There are two main ways of formatting a stylesheet: vertically and horizontally. One can argue that vertically is easier to read, because it is spaced nicely down the page. Conversely, horizontally is just as easy (I format horizontally, and yes it is easy to read – for all those who say it’s hard to read across the page – in what direction are you reading right now? Exactly )

Does it really matter though, or is it simply personal preference? The answer depends on the amount of content in the stylesheet. However, there are 3 formatting issues that matter more than whether it’s horizontal and vertical.

(more…)

Naturally, the faster your page loads the better. Not getting into CSS sprites or any of the more complex techniques, I will show you the way to optimize your images so your site loads that quick it makes dialup users look like they are on cable!

(more…)

Something every CSS developer should know about is a “feature” in a certain browser called hasLayout that often gives developers grief – need I say the name of the browser? Every developer will have come across it in their time, whether they know it or not. Heard of the height:1%; or zoom:1; hack? That’s what these are all about – triggering hasLayout.

The best way to beat your enemy is to understand how they work. A very detailed explanation can be found here: http://msdn.microsoft.com/en-us/library/bb250481(VS.85).aspx and a great site to bookmark for reference when the time comes is here. That’s the end of this post folks – those articles are so comprehensive I’m not going to reinvent the wheel.

A common practice nowadays is to clear using a div, br or hr. I am going to Jackie Chan the next person who uses one, serious. Not only does it violate the fundamental rule (HTML is for content, CSS is for presentation) but it is both ugly and unnecessary. I am going to show you how using just CSS, you can produce the same effect, without all the mess!