Web Standards Tips

Practical advice for building websites with web standards

The empty div clearfix anti-pattern

By Isofarro on March 8th, 2010 - No comments

The common approach to laying out a page is through the use of float. A container floated left becomes a left-hand sidebar. And even within components of a page, the float is used to create columnar layouts. The symptom of float-based layouts One of the side-effects of using floats for layout is that the element [...]

Filed in CSS Tagged with , , , , , ,

CSS shorthands for margin and paddings

By Isofarro on June 14th, 2009 - No comments

The typical way of setting margins and paddings involve specifiying a value for each of the top, right, bottom and left in sequence. Depending on the situation, we can use shorthand values for both optimisation and clarity, but sometimes it isn’t always clear. Note: Using file size optimisation as a basis for a styleguide for [...]

CSS hacks for IE-only style rules

By Isofarro on November 18th, 2008 - 8 comments

The bane of CSS is IE6 and IE7 support, and most of the times they need a few extra styles to make things work. But those additional styles can mess up other browsers. Ideally we would want to have those styles only given to Internet Explorer. There are two hacks I typically use to filter [...]

Easy clearing of floats

By Isofarro on November 18th, 2008 - 2 comments

One of the main methods of creating stable layouts is to ensure that elements that contain floated elements clear these floats. Given an element with an id of wrapper, the styles needed to easy clear any contained floats is: #wrapper:after { content: “.”; display: block; height: 0; clear: both; visibility: hidden; } #wrapper { zoom: [...]

Copyright © 2007 - 2009, isolani