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?
May 10, 2007 at 9:18 am
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
May 10, 2007 at 9:24 am
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
May 10, 2007 at 9:44 am
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; }
May 10, 2007 at 1:41 pm
Nice one Stewart, I came across that before but couldn’t remember where when I needed it!
May 10, 2007 at 4:18 pm
I’ve never ever had a problem with links not being clickable in IE, what circumstances does that manifest itself?
May 10, 2007 at 4:32 pm
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.
May 29, 2007 at 10:32 pm
There’s a typo. paddding.
May 31, 2007 at 10:01 am
@engtech
Well spotted, I’ve amended the page.