With the following markup:

<div class="verticalCenteringOuter" id="moduleA">
	<div class="verticalCenteringMiddle">
		<div class="verticalCenteringInner">
			<b>Some vertical aligned content here</b>
		</div>
	</div>
</div>

Using the following CSS:

<style type="text/css">
#moduleA {
	height: 300px;
}
.verticalCenteringOuter {
	display: table;
	overflow: hidden;
}
.verticalCenteringMiddle {
	display: table-cell;
	vertical-align: middle;
}
</style>
 
<!--[if IE]>
<style type="text/css">
.verticalCenteringOuter {
	position: relative;
}
.verticalCenteringMiddle {
	position: absolute;
	top: 50%;
}
.verticalCenteringInner {
	position: relative;
	top: -50%;
}
</style>
<![endif]-->

Full credit on this to Yuhů (www.jakpsatweb.cz). Thanks for the inspiration on this one.

a { text-decoration: none; }
a:hover { text-decoration: underline; }

We could extend this to change the background and forground colour of the link to make it appear a little more “box-like” using something like this CSS code:

a {
	display: block;
	padding: 5px 10px;
	background-color: #000000;
	color: #FFFFFF;
}
a:hover {
	background-color: #CCCCCC;
	color: #000000;
}

If you wanted to have a background image on the anchor, then you could change the background-image when you hovered over the anchor. The CSS code might look like this:

a {
	display: block;
	padding: 5px 10px;
	background: #000000 url(img/anchor_off.gif) no-repeat left top;
	color: #FFFFFF;
}
a:hover {
	background: #CCCCCC url(img/anchor_hovered.gif) no-repeat left top;
	color: #000000;
}

This technique does suffer from a flaw, however. You will invariably see a flickering as you roll over the anchor for the first time due to the browser having to request the second image (assuming the file isn’t already in the browser cache).

This problem can be fixed by using the same image for both the normal and hover state of the anchor – just reposition the background image on hover. This is presented very well over at A List Apart where Dave Shea introduces the concept of CSS Sprites. The image below (195px wide, 30px high in size) shows how you might set this up:

The image above shows both states of the anchor… the initial state at the “left top” and the hovered state “100px” from the left of the image. The following CSS code shows how you can reposition the background image to show a different image on hover – without the flicker:

a {
	display: block;
	padding: 5px 10px;
	width: 95px;
	height: 30px;
	overflow: hidden;
	background: #000000 url(img/anchor_background.gif) no-repeat left top;
	color: #FFFFFF;
}
a:hover {
	background-position: 100px top;
	background-color: #CCCCCC;
	color: #000000;
}

You may have to deal with all the anchor pseudo classes to get the effect consistent in all browsers, and be sure to define them in the correct order… :link, :visited, :hover, :active.

Finally, Internet Explorer only supports pseudo classes on the anchor element. All other browsers support pseudo classes on all elements. You could use this technique on non-anchor elements, but would be forced to introduce some javascript to support Internet Explorer. A good working example of this is the popular Suckerfish dropdowns CSS menu solution that uses :hover on the list item element and attaches some javascript for Internet Explorer.

...
<div id="parent" style="background-color:#F00;">
	<div id="child" style="float: left;">Floated element</div>
</div>
...

Given the child element is floated, it doesn’t affect the height of the parent element – and so the parent element remains with no height (and the red background colour is never shown).

The W3 describe floating an element and the use of a “clearing element” (a block level element with the clear CSS property set). This is not acceptable for all layouts. It would be nicer if all this could be carried out using CSS – providing a separation of content and layout into the bargain.

Rather than attempt to merely re-word much of what is already online, you can read about how the CSS for this works in more detail at Position is Everything. Whilst their implementation is slightly different to the one presented below, their description is excellent (and they are credited with bringing together all the threads to make this solution usable).

The clearfix solution below is our current “best practise” effort to date. We have switched from using the typical “.” to using a space ” ” in the content rule due to reports of some layout issues in Firefox.

<style type="text/css">
.clearfix:after {
	clear: both;
	display: block;
	content: " ";
	height: 0px;
	visibility: hidden;
}
.clearfix {
	display: inline-block;
}
/* Hide these rules from IE-mac \*/
* html .clearfix {
	height: 1%;
}
.clearfix {
	display: block;
}
li.clearfix {
	display: list-item;
}
/* End hide from IE-mac */
</style>

We extended the normal rules to include setting the correct display (list-item) for use on list items (as a direct result of some problems with floated lists). If you don’t care about IE-mac support (don’t forget that Microsoft finally retired IE 5 for the Mac) then you can avoid using the “commented backslash hack” all together.

Going back to our original HTML code, we can place the clearfix class on the parent element to ensure that it inherits the height of it’s floating child elements (and the red background will now show):

...
<div class="clearfix" id="parent" style="background-color:#F00;">
	<div id="child" style="float: left;">Floated element</div>
</div>
...

You can read more about the clearfix solution all over the place, including:

• Position is Everything
• 456 Berea Street
• Sitepoint

Macs render text at a screen resolution of 72 pixels per inch (ppi) … Windows renders type at a notional screen resolution of 96 ppi… the difference between 96 ppi and 72 ppi (24 pixels) makes the fonts on a Web page look 33 percent larger when viewed on a Windows machine.

To compensate, there are some very simple CSS rules that you can use to essentially “reset” the text size to be consistent across both Mac and Windows.

<style type="text/css">
   html>body { font-size: 16px; }
   body { font-size: 100%; }
</style>
 
<!--[if IE 7]>
<style type="text/css">
   html>body { font-size: 100%; }
</style>
<![endif]-->

Initially the html>body definition is applied to all browsers that understand the child selector CSS. This will result in setting the font-size on Opera, Firefox, Netscape, IE7, Safari (and other “modern” browsers). It will not be applied to older versions of IE – they will ignore this definition.

Next, the body definition is set for all browsers that didn’t understand the initial definition. Because this definition has lower specificity than the initial definition, it is ignored by the likes of Opera, Firefox, Netscape, IE7 and Safari… but older versions of IE will get this font-size definition.

Finally a conditional comment (which is specific to Windows IE) delivers an override to the initial style by setting the font-size back from a fixed pixel value to a scaleable value for all “new” versions of IE… specifically IE7. It needs to be html>body to ensure it doesn’t have a lower specificity than the initial definition.

Now, whether you specify your element’s font size in pixels, points or ems, you can be confident that text will look the same across browsers on Mac and Windows.