Five CSS tricks that repeatedly saved my a**e, why need more?
Getting a lot of hits from the 53 CSS-Techniques You Couldn’t Live Without post on Smashingmagazine I realised I don’t really need a lot of those (although a lot are cool). Instead let me share with you CSS techniques that saved my a*** whenever I had to create a layout using CSS or proving those wrong that claimed layout tables cannot be replaced.
None of these are new, and many will be the comment that people knew about this, but I can safely say that knowing about the following and some scripting allows me to create almost any of the fancy 53 techniques mentioned.
Tabula Rasa – the global whitespace reset
In October 2004 I found Andrew Krespanis’ global whitespace reset on his still (to me ) beautiful site leftjustified. The idea behind it is so simple, it is ingenious: as every browser out there has an own mind when it comes to rendering styles with a built-in stylesheet, you can overcome all the differences with a simple * selector that undoes everything the browser did. You reset margins and paddings to zero, remove list-type and even set a standard font size. After using global whitespace reset you have a clean slate to start from.
Making the absolute relative
Absolute positioning can be dead handy when you need to align different elements horizontally. You just position one to right and give the other a right padding of the width of the first one, voila – columns. It gets problematic when you need to have other content above the multi column one and you don’t know how high that one will be. The trick is to have both in a parent element and position this element relative – the absolute element will be positioned in relation to this one and not the browser window. Douglas Bowman is the man to thank for this one and that it doesn’t work on MSIE 5.02/Mac is not really causing me any headache.
Containing the float
The problem with the second trick is that if the absolutely positioned column is not the longer one of the two it’ll spill out of the containing element, which is why it is better in a case where you have no clue about the column length to float both of them. The problem when you float them is that the containing element has no height whatsoever. The workaround is to set 100% width on the container and float it to the left, too. Make sure to put a clear:both on the following element on the page
Sliding doors of CSS
Another Bowman trick was Sliding doors or in short using a large background image and clever positioning to allow for expandable navigation elements. As I am not caring much for browsers that should not be supported any longer, I normally tend to use one massive background image and position it in the different elements accordingly as shown in the flexible CSS menu tutorial.
Using background-position to cut down on images and avoid caching issues
Another permutation of this solution is using one background image for several page elements and use dimensions and background-position to only show the relevant part of the image. This technique, christened CSS Sprites (rubbish, they aren’t 24×21 pixels like real sprites) by Dave Shea allows you to cut down load time (as you don’t need to resolve the URL and load lots and lots of images) and avoids nasty flickering on rollovers that MSIE had.
Out of the screen, out of the mind with off-left
Sometimes you need to show and hide content or you need to have content that is only available to visitors that have CSS disabled (the latter should never become a habit, it is a dirty hack and you know it). This is where the off-left technique comes in handy. Instead of using display:none you position the element far off the screen with a negative horizontal and vertical value. Screenreaders will still read them out, but CSS enabled browsers don’t show them at all.
I love CSS, I like most browsers, I just don’t think that we need to overcomplicate matters.
January 23rd, 2007 at 8:52 pm
January 25th, 2007 at 10:32 pm
February 19th, 2007 at 11:20 am
January 27th, 2007 at 9:27 pm
ASP.NET AJAX 1.0 Released!
Firefox Cheat Sheet
The Big Questions
Five CSS tricks that repeatedly saved my arse, why need more?
Book it: del.i [...]
February 8th, 2007 at 6:11 am
February 8th, 2007 at 6:10 am
February 8th, 2007 at 1:34 am
February 6th, 2007 at 11:48 pm
September 11th, 2007 at 3:16 am
January 23rd, 2007 at 2:02 am
Ad “global whitespace reset”: I have run into problems with the * selector when resetting padding, borders and font sizes because they also work on the browser’s default styles on form elements. I have used it, but for some time now dropped in favour of a more specific reset on element selectors (in XHTML there aren’t too many elements used anyway):
/* Clean slate */
body, h1, h2, h3, h4, h5, h6, p, blockquote, ul, ol, li, table, tr, th, td, form {
margin: 0; padding: 0; border: 0; list-style: none; font-size: 100%; font-weight: normal;
}
January 23rd, 2007 at 3:44 am
Great list. I’d add position: fixed, which isn’t really a trick but it’s really useful and seems like a trick to a lot of people because a lot of people don’t even know about it yet (being IE didn’t support it before version 7).
January 23rd, 2007 at 1:08 pm
Good tips!:-)
I use 4 of these 5 (everything except “global reset”, I usually don’t need it).
January 23rd, 2007 at 1:47 pm
Great 5!
When containing the float, instead of floating the container, I tend to give it value of overflow:hidden, which seems to work too. This has one major downside though: if you want elements to ‘protrude’ from the container, they won’t be visible.
January 23rd, 2007 at 3:54 pm
funnily enough, that’s pretty much the extent of my CSS armoury. it’s rare that i have to resort to anything more complex…
January 23rd, 2007 at 3:58 pm
totally agree with ‘Making the absolute relative’, a real time saver.
also theres a great section on ‘using multiple background images’ in the book Transcending CSS - which i wish i’d known sooner!
understood function for screenreader for off left technique, still yet to find conclusive information on whether off left technique/text indent is good or evil seo.. regards to spamming.. suppose it depends what the nature and amount of text copy..
January 24th, 2007 at 11:08 am
“Out of the screen, out of the mind with off-left”
This technique does NOT work on Windows Pocket PC Internet Explorer.
The text is rendered on top of the graphic which is an illegible mess.
January 25th, 2007 at 12:05 am
I feel like the contain floats tip is not as robust as the others. Surely
overflow: hidden;andzoom:1;provide more robust layout thanfloating the same element?This avoids worrying about the following element.
January 30th, 2007 at 12:45 pm
Great post … regularly use 3 of 5 CSS tricks.
February 3rd, 2007 at 1:46 am
This is a great shortlist of useful CSS techniques. Another one I can’t do without is Malarkey’s “Z’s not dead” (from the 2005 edition of 24ways.org).
It’s basically the “relatively absolute” trick, minus float containment, plus a high
z-index. I’ve used it on an in-progress site for a veterinary clinic to good effect. Their logo features an abstract cat outline; I have the kitty “sitting” on the navigation toolbar, with its tail drooping lazily over the top of the toolbar. It’s a neat visual flourish, and I didn’t have to resort to image slicing.November 13th, 2008 at 12:54 pm
Cascading Style Sheets (CSS) web design lessons
Css link Properties Attributes – examles
http://css-lessons.ucoz.com/link-css-examples-1.htm
http://css-lessons.ucoz.com/link-css-examples-2.htm