Colm McBarron

Some useful CSS utilities, classes & hacks

When I’m creating a typical standards based design I often use a standard collection of css properties to do very common things, so I don’t have to write classes or do as many browser hacks as I would have to do normally.

To reset all margins and padding.

* {

padding: 0;

margin: 0;

}

To make sure that there are no borders on fieldsets or images.

fieldset,img {

border: 0;

}

Give Internet Explorer a tags a height, this solves a number of bugs/issues the IE has with a tags, especially when it comes to navigation and increasing their hit area.

* html a {

height: 1px;

}

An accessible way to hide text from a visual agent.

.hidden {

position: absolute;

top: -1000px;

left: -1000px;

}

Form elements tend not to resize in some browsers when a user increases the text size, so by giving them a font-size this allows them to increase in size along with the form element, also textarea’s tend to use a default font face of courier instead of the fonts you’ve specified on your page.

Personally I’m a big fan of reset everything, it sorts out a ton of issues with padding/margins that can throw off a design. But then again I also have a default set of rules for the content area of a page

Kevin – I probably should have phrased that a little better, it’s to do with when you use an a tag for a menu item or other clickable object on a page, the hit area in IE is just the word even if you use ‘display: block’ adding a height in IE forces it to fill the space it should.