Archive for the ‘Cross browser compatibility’ Category

CSS cross browser vertical align

Friday, February 22nd, 2008

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

Posted in HTML, CSS, Cross browser compatibility, ie7, Safari | No Comments »

Empty form action in safari

Wednesday, August 1st, 2007

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!

Posted in HTML, Cross browser compatibility, Safari | 1 Comment »

window.pageYOffset not working in ie7

Friday, April 6th, 2007

yet another piece of ie6 specific javascript that is no longer working in ie7.

had to use document.documentElement.scrollTop;

thanks to http://forums.asp.net/thread/1633238.aspx

Posted in Javascript, Cross browser compatibility, ie7 | No Comments »

css: position fixed in ie7

Friday, April 6th, 2007

Spent a couple of hours the other day trying to get fixed positioning to work in ie7. All the articles I could find said it was supported but it stubbornly refused to display.

The problem was no doctype in the html - added
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

to the top of the page and the css worked as expected.

Posted in CSS, Cross browser compatibility, ie7 | 1 Comment »