brainshitting - Luis Alves's Website - CSS and XHTML Expert. Portuguese Wordpress Designer. Info, hints and help for webdesigners. Loose toughts and ideas.

This is a brief tutorial to explain how you can force the footer to stay in the bottom of the page with just CSS.

I have tested it in Firefox Mac / PC, Safari Mac / PC,  IE7 and IE8. Does not work for IE6 and bellow.

First – In your CSS you have to set the html and Body to 100%

html, body {
height: 100%;
}

Second – Wrap all the content of your website except the footer div in a div with the following code:

#wrapper {
height:auto !important;
margin:0 auto -50px; /*this value is the footer height)*/
min-height:100%;
}

Third – create the CSS of your footer

#footer {
height: 50px;
}

Place your div #footer after the wrapper and that’s it.

In wp-includes you’ll find the file bookmark-template.php.This will be done with the tag $cat->description. go to line 227 and change this line:

$output .= "$title_before$catname$title_after\n\t<ul class='xoxo blogroll'>\n";

to:

$output .= "$title_before$catname$title_after\n\t<p>$cat->description</p>\n\t<ul class='xoxo blogroll'>\n";

You can change the place where the description will appear and the html tag that wraps it, for instance:

$output .= "$title_before$catname$title_after\n\t<ul class='xoxo blogroll'>\n\t<h3>$cat->description</h3>\n";

Reading text on the web is a bit harder than doing it on some paper publication. A correct line-height set to paragraphs in CSS is a major help we can give to website readers.

So what line-height should I use?

A good line-height is a value from 150% to 160%. Serifs may require the higher value on this range since visually they occupy a little more space.
Cheers!

I found this great tool at Snook.ca to test if a certain font color when placed in a color background is compliant with the W3C rules.

Colour Contrast Checker

24 bit PNG’s don’t have transparency. A 24 bit PNG has 3 channels – Red, Green, and Blue. In a 32 bit PNG you have 4 channels – Red, Green, Blue and Alpha, so the way to save a transparent PNG with high quality anti aliasing in Fireworks is to save it in 32 Bit mode.

But Photoshop doest it!
That’s because Photoshop says it saves in 24 bit when it’s actually saving as 32 bit.