Look at the difference between these two 50px headers that use the Georgia font:

Windows/Ubuntu font comparison - Georgia

The top one is from IE8 on Windows Vista, whereas the bottom one is from Firefox 3.0.15 on Ubuntu 9.04. On Windows, the text is clearly less pleasant on the eye? It is has jagged edges, has a pixel or two cut off the end of the ‘s’ and is 17 pixels less wide.

This is the styling code:

#logo h1 {
font-family:Georgia, Arial, sans-serif;
font-size:50px;
font-weight:normal;
letter-spacing:-0.05em;
line-height:normal;
}

Read on…

In this tutorial we are going to create a very basic “blank canvas” webpage which has a central white cut-out with a drop shadow effect. Our “page” will be 960px wide, floated in the center of the browser window:

Tutorial end product

aBlankCanvas
Click to enlarge

Real-world example

a non-blank Canvas
Click to enlarge

Read on…

If you are making a WordPress theme you owe it to the user of your theme to make sure image alignment works as expected. Most of the Visual Editor formatting buttons use inline CSS which won’t be affected by the theme but this is not the case with the alignment buttons in pages/posts when applied to images.

The red labels show what Visual Editor buttons I’m talking about:

Wordpress visual editor image alignment buttons

Read on…

Do you ever use <br style='clear:both' /> or <div style='clear:both'></div> in your webdesign? If you do, stop now, there is a better way to prevent subsequent page elements being affected by the previous floating sections:

Bad:

<div style="float:left;width:300px">left text block</div>
<div style="float:right;width:300px">right text block<br> (which takes more vertical space than the left)</div>
<br style='clear:both' />
Text that you need to appear below the previous text blocks

Why is it bad?

  • <br style='clear:both' /> is bad because it introduces a blank line when you actually only want a newline. It adds vertical spacing when you don’t necessarily want it. It is using a HTML element for more than it’s specific purpose.
  • <div style='clear:both'></div> is bad because you shouldn’t use empty HTML elements.

Better:

<div class='clearAfter'>
    <div style="float:left;width:300px">left text block</div>
    <div style="float:right;width:300px">right text block<br>which takes more vertical space than the left</div>
</div>
Text that you need to appear below the previous text blocks

where the clearAfter css class is defined by:

.clearAfter:after {
clear: both;
content: ".";
display: block;
height: 0;
visibility: hidden
}
.clearAfter {zoom:1}   /*IE necessary workaround*/

I got this trick from the Yahoo! grids CSS framework – so it is a rock solid enterprise tested technique: “No matter which column is longer, the footer stays at the bottom“. Also, see http://snipplr.com/view/86/clear-floats-without-structural-markup/

What is the zoom:1 for? This is a hack needed for IE to force the element to be given a position component.