Hard to Find CSS Tips

2Darren • 23rd May 2009 • Web Development • css, tips

Over the last few weeks I’ve picked up a few excellent css tips I felt I should share.

1. Firefox scroll jump – there are a number of techniques for enforcing the scroll bar space to appear in Firefox so users don’t see a jump as they navigate from content light to content heavy pages. My preferred option is to set the document height to 101% so Firefox always thinks there’s more, therefore shows an empty scroll bar:

html { height: 101% }

2. Equal table column widths - this is particularly useful on a content managed site where you have many users adding various data tables but you want a one style fits all. To ensure colum widths are always equal just set the following declaration:

table { table-layout: fixed }

3. Style selected text – if a user selects text on your webpage to copy and paste elsewhere, do you know you can style it so it’s not the default navy background, white text?


::selection { background: red; color: white /* Safari and Opera */ }
::-moz-selection { background: red; color: white; /* Firefox */ }