Some XHMTL & CSS techniques, tricks and errors

This technique found a while ago at www.cssplay.co.uk showed a neat trick on how to vertically center something for the ie6. Basically the technique works with a span having a height of 100% and vertical-align:middle. Anyway this method worked only in ie6. For modern browser I had to trick them by adding serval additional css, which i will explain further: The xhtml code needed:

<div class="thumb">
    <a title="" href="">
      <span class="thumb_span"></span>
      <img src="http://my.opera.com/community/graphics/smilies/thumbsup.gif" alt=""/>
    </a>
</div>

the css

.thumb
{
	background: #FFF;
	border: 1px solid #CCC;
	font-size: 0;
	height: 88px;
	line-height: 0;
	padding: 1px;
	text-align: center;
	width: 88px;
}

.thumb a
{
	display: inline-block;
	display: table-cell;
	height: inherit;
	position: relative;
	text-align: center;
	vertical-align: middle;
	width: inherit;
}

.thumb_span
{
	display: inline-block;
	font-size: 0;
	height: 100%;
	line-height: 0;
	vertical-align: middle;
	width: 0;
}

.thumb img
{
	font-size: 0;
	line-height: 0;
	vertical-align: middle;
}

Explanation:

.thumb a
{
	display: inline-block;
	display: table-cell;
	height: inherit;
	position: relative;
	text-align: center;
	vertical-align: middle;
	width: inherit;
}

For this trick to work in all modern browser as well (especially in FF2 and IE7) you have to set display twice. display: inline-block would have worked in all browsers but FF2. FF2 lacks this css property. To adjust this display: table-cell has to be set. This display property is known to FF2,FF3, Safari3, Opera 9x. IE6 and IE7 wont recognize it. So the important part is that display:inline-block is set at first for the IEs, and display:table-cell is set afterwards to make it work in FF2. For my example i let the element inherited the width and height of the parent element. If you dont need a link element a substitution with a div works

.thumb_span
{
	display: inline-block;
	font-size: 0;
	height: 100%;
	line-height: 0;
	vertical-align: middle;
	width: 0;
}

The important thing for the span is, that it has no width but a 100% height. Since display:inline-block works only on natural inline elements in ie6 the span has dimensions but will not be shown. Through vertical-align any following html code will be aligned middle. The 100% height only works, if the parent element has a height (the 100% height technique from FooterStickAlt should/might work as well.

.thumb img
{
	font-size: 0;
	line-height: 0;
	vertical-align: middle;
}

This code gets rid of the 3px space at the bottom of the image. It aligns the image relatively middle to the 100% span. Important for this case is, that the image is not display:block (the otherway to get rid of the 3px), since span is an inline element too. It might work with display:table-cell followed by display:inline-block for the span and other content (in this case the image) which i haven't tested yet. You can see this technique in the galery @ www.europolitan.de or @ the community portal www.demandr.de (any thumbs in posts) Technique is tested so far in: IE6, IE7, Firefox 2, Firefox 3 Beta, Safari 3, Opera 9.x and 9.5 Beta