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

rewriting css rules dynamically using javascript

Sunday, April 8th, 2007

If you have a large collection of elements on a page that you want to change the css properties of you can dynamically change the css rules instead of iterating through every element on the page.

here is an example of how you can get hold of two css rules and manipulate them


if(document.styleSheets){
var sheet = document.styleSheets[0]
}
if(sheet){
var ssRules = sheet.cssRules || sheet.rules;
}
if(ssRules)
{
var result = null;
var common_style = null;
var different_style = null;

for(var c = 0; c < ssRules.length;c++)
{
if(ssRules[c].selectorText == ".different")
{
different_style = ssRules[c];
} else if(ssRules[c].selectorText == ".common")
{
common_style = ssRules[c];
}
if (different_style && common_style) break;
}
}

You can now change their position using common_style.style.display = ‘none’ etc.

Thanks to http://www.thescripts.com/forum/thread90644.html for the snippet

Posted in Javascript, CSS | 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 »

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 »