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.

input, select, textarea {

   font-size: 100%;

   font-family: inherit;

}

Download the css file with all these in it.

This is by no means a comprehensive list but these are pretty invaluable to me for most projects.

Can you add any more?

8 Comments

  1. Thats very useful, cheers for that. I see a lot of people using the Yahoo! “reset css”[1], which whilst useful tends to leave the web developer with a lot to do.

    For example many forget that when you apply padding 0px; to all elements , you then have to go and specify your paragraph and ul margins/padding, otherwise paragraphs are difficult to read etc.

    [1]http://developer.yahoo.com/yui/reset/#code

  2. 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 :)

  3. Conditional comments for IE only stylesheets eg:

    Also, this one when you have a fixed-width, centred page, to force Safari & Firefox to always show a scrollbar and stop the page shifting when you go from page to page:

    html { height: 100%; margin-bottom: 1px; }

  4. Nice one Stewart, I came across that before but couldn’t remember where when I needed it!

  5. I’ve never ever had a problem with links not being clickable in IE, what circumstances does that manifest itself?

  6. 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.

  7. @engtech

    Well spotted, I’ve amended the page.