Internet Explorer's behavior with CSS is different than other browsers. CSS's vertical align : center doesn't work in IE7 and here is the expression to make it work perfectly.
Normal html developer :
1- in your folders, go to styles folder and create a new file called "style.ie7.css" .
2- in your page <head> tag insert the following code :
<!--[if IE 7]><link rel="stylesheet" href="[your style path]/style.ie7.css" type="text/css" media="screen" /><![endif]-->
3- Open "style.ie7.css" file and write the following expression inside the component ( div, a, li, ul ... etc ) that you want to vertically align center :
{
margin-top: expression(this.offsetHeight < this.parentNode.offsetHeight ? parseInt((this.parentNode.offsetHeight - this.offsetHeight) / 2) + "px" : "0");
}
Drupal Developer :
1- go to sites/all/themes/[YOUR_THEME] ... or where ever you put your themes folder, go inside it.
2- open the file called "style.ie7.css".
3- at the end of the code, add your components css class ( div, a, li, ul, .... etc ) and then add the following code inside it:
{
margin-top: expression(this.offsetHeight < this.parentNode.offsetHeight ? parseInt((this.parentNode.offsetHeight - this.offsetHeight) / 2) + "px" : "0");
}
this expression will calculate the height of every container and divide it by 2 to get the middle of the container, then it will put margin-top that puts your component vertically in the middle of its container.
YOU ARE DA MAN! That worked/works perfectly.
ReplyDelete