Archive for the ‘ie7’ 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 »

dynamically changing position attribute in ie7 with javascript

Friday, April 6th, 2007

If an element started out with a style=”position:absolute” attribute then changing the style to something else (e.g. this_element.style.position = ‘fixed’) was producing screwy results in ie7. Naturally no dramas in firefox.

The solution was to declare different classes with the styles I wanted and dynamically change the className attribute instead of the style attribute.


.fixed_style { position:fixed;}
.absolute_style { position:absolute;}

my_element.className = 'fixed_style';
my_element.className = 'absolute_style';

worked like a charm

Posted in Javascript, CSS, ie7 | No Comments »

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 »