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

The above example sets all anchors to have no underline text decoration, and the hover pseudo-class sets all anchors to have an underline on them. When the user hovers their mouse over a link, an underline will show under the link. When they move their mouse away, the hover pseudo-class stops taking effect and the underline is removed.

Pseudo-classes are supported with all modern browsers, but this support is only for the anchor element. Any attempt to use a pseudo-class on any other element will not work in Internet Explorer 6.

There are other pseudo-classes that can be used to provide a more usable experience for those that primarily use a keyboard to navigation through a page. The first of these is the focus pseudo-class (which take affect when the element gains focus – such as tabbing to the element). This pseudo-class can be used to style elements when they receive focus.

Building on the initial example, the addition of a focus pseudo-class will ensure that the same hover effects (in this case some underline text decoration) are applied when the user tabs focus to the anchor.

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

This would be fine, except that Internet Explorer 6 doesn’t understand the focus pseudo-class at all! The solution is to use the active pseudo-class to extend the CSS rule.

a { text-decoration:none; }
a:hover, a:focus, a:active { text-decoration:underline; }

The order of the pseudo-class rules is important (and if you get the order wrong, you may experience some of the CSS rules displaying inconsistently across browsers). As a general rule, always put pseudo-classes in the following order:

link, visited, hover, focus, active

So, whenever you define a hover pseudo-class CSS rule, consider adding in a focus and then an active pseudo-class at the same time – it will help users that choose to use the keyboard to navigate your site.

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.

Consider the following CSS and HTML code snippets that set up the problem with a link contained within a div that has an alpha transparency filter applied to it:

<style type="text/css">
.opaque { background: url(images/alphaTransparent.png) transparent no-repeat left top; }
</style>
<!--[if IE 6]>
<style type="text/css">
.opaque {
	background-image: none;
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,sizingMethod=crop,src=images/alphaTransparent.png);
}
</style>
<![endif]-->

...
<div id="parent" class="opaque">
    <span id="child">Lorem <a href="http://www.codecouch.com">ipsum</a> dolor.</span>
</div>
...

The parent element has a class opaque applied to it which puts an image on the background of the element. In Internet Explorer 6 only, the background image is removed and the proprietary filter property is used. The link inside the child span is no longer clickable in Internet Explorer 6.

Make sure the parent element (the element with the filter applied to it) doesn’t have the position property set on it, and the child element (the element with the link in it) has to have relative position.

The following addition to the above code will make the link clickable:

<!--[if IE 6]>
<style type="text/css">
#child { position: relative; }
</style>
<![endif]-->

Since it only has to apply for Internet Explorer 6, the “fix” can be enclosed within the conditional comment that targets just that browser. This doesn’t require any javascript to work (unlike other solutions that have been posted) and degrades properly.

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

The examples below rely on the following CSS code (described below):

<style type="text/css">
  #demo1 {
    width: 250px;
    height: 100px;
    background: url(images/logo.png) transparent 0 0 no-repeat;
  }
</style>
<!––[if lt IE 7]>
<style type="text/css">
  #demo1 {
    background-image: none;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader
        (enabled=true,sizingMethod=scale,src=/images/logo.png);
  }
</style>
<![endif]––>

The first block of CSS sets a background image on an element with the id “demo1″ (typically a div, span or img) for all browsers. This works fine for everything else, but doesn’t work with IE prior to version 7.

The second block targets just these “broken” browsers through use of a conditional comment. This second block uses the filter property to set up a proper alpha transparent version of the png. Read more about this here at the MSDN site.

In the following example the CSS above would show the logo.png with alpha transparency as the background to a div:

<div id="demo1"></div>

This next example shows that you can display a png with alpha transparency by targetting a transparent image:

<img src="transparent.gif" id="demo1" alt=""/>

There are plenty of variations of this technique. All the examples above are considered “standards friendly”. This final example shows the same CSS simplified (but not passing validation):

<style type="text/css">
  #demo1 {
    width: 250px;
    height: 100px;
    background: url(images/logo.png) transparent 0 0 no-repeat;
    _background-image: none;
    _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader
        (enabled=true,sizingMethod=scale,src=/images/logo.png);
  }
</style>

If you are putting the CSS above into an external stylesheet, then be aware that the path to the logo.png when used as the background image is relative to the CSS file, but the path to logo.png when used in the filter is relative to the enclosing HTML file. This can cause some confusion.

On a related note… you should always ensure your alpha transparent PNGs are 32-bit to ensure that they always display the same colour across all browsers (specifically Firefox and IE displayed a 24-bit alpha transparent PNG differently using the technique described here – changing it to 32-bit confirmed this was the case).

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.