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]-->

Earlier this week I was testing a site and noticed some weird extra characters being displayed in the page, I checked the html source to see where they were coming from. the characters being displayed were:

-->

ah! easy that’s just an end html comment, I must have left in by accident, but when i checked the source it was not the case, there were no end comment tags that had not been opened by the appropriate begin comment tag. On closer inspection I did notice something funny:

<!--
<tr>
<td>Phone:</td>
<td>--</td>
</tr>
<tr>
<td>Email:</td>
<td> </td>

</tr>
-->


it turns out that the two minus characters were actually ending the html comment, and so the actual end comment tag was seen as extraneous. I thought that was pretty odd, so i checked how things rendered in opera 9.5 - looked fine, IE 7 - looked fine, so then I tried the w3c validator to see if there was anything invalid about having two minus characters inside of an html comment. The validator complained about them - bitterly, so who’s right here? is this merely a parsing bug in the w3c’s validator and the firefox renderer, or are Microsoft and Opera wrong for hiding my mistake?

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!