Sinuous Technical Notes

I finally got tired of living without cross browser vertical align property in css and after a bit of searching and trying a few different methods here is the one that I went with in the end. It requires some ie only styles which isn’t ideal but it gets the job done.

In this instance I wanted to center (vertical and horizontally) an image inside a div 80px by 80px - the image was being resized by server side code and I knew that no side would be longer than 80px;

The fix revolves around using table positioning in Firefox, Safari and Opera and relative positioning voodo in Internet Explorer.

html:

<div class='thumbnail'><div class='img_wrapper'><img src='....' /></div></div>

css:

.thumbnail {width:80px;	height:80px; text-align:center;	display:table;}
.thumbnail .img_wrapper { display:table-cell; vertical-align:middle; }

ie-only css:

.thumbnail {position:relative;}
.thumbnail .img_wrapper { position:absolute; top:50%; left:0px; }
.thumbnail .img_wrapper img { position:relative; top:-50%; }

use your favourite method for applying ie only styles- I prefer ie only stylesheets

<!--[if IE]>
<link rel="StyleSheet" href="/css/ie-style.css" type="text/css" media="screen"/>
<![endif]-->

Interesting cross browser compatibility problem with safari last night. If the form action was left blank then normally the form should submit to the current page it is on - this worked fine in IE and firefox but wouldn’t work in safari. I suspect this had something to do with the base href meta tag - changing the action to the filename of the current page as a relative path fixed the problem.

Just one more thing to add to the growing list of checks we need to do when building sites for multiple browsers - don’t use empty form actions!