Vertical alignment: height and IE7

On 10-25-2006, in Coding, CSS, JavaScript, by Alex

There is no brand new subject, really.
even 2 old articles (Vertical centering using CSS and CSS Vertical Centering again) from this blog.

2 problems:
1) Small height: if browser height is smaller than main container (for all browsers):


function adjustHeight(){
   if(document.body.offsetHeight > 450){
      document.body.style.height='100'+'%';
   }else{
      document.body.style.height='450px';
   }
}

onload and onresize, of course.

2) IE7: this rule:

#ContainerDiv {position: relative; top: -50%;}

moves the #ContainerDiv above the top browser’s border for 50%. Reasonable, huh.

The cure:

#ContainerDiv {position: relative; top: expression(document.body.offsetHeight/2-this.offsetHeight/2);}

for custom IE7 CSS file using cond. comments:

<!--[if IE 7]>
<link rel="stylesheet" href="/css/ie7.css" type="text/css" media="screen" />
<![endif]-->

If you enjoyed this article, please consider sharing it!
Facebook Twitter Delicious Digg

 

5 Responses to Vertical alignment: height and IE7

  1. photo_retoucher says:
    6-25-2007 at 12:56 am

    I have a problem: in IE in teg is not allowed style=”border: 1px solid;”.
    In it worked, but often write in – it’s problem…
    Can I do anything?

  2. Alex says:
    6-25-2007 at 11:34 pm

    1) you should define color for border. E.g. style=”border: 1px solid black;”
    2) Is your tag blocks type? Or inline? Try to make it block (eg display: block; or float: left;)

    You can contact me directly and I’ll try to help.

  3. photo_retoucher says:
    6-26-2007 at 3:39 pm

    Sorry..
    I have not noticed, that the text of my comment have corrected: I wished to tell, that works in column tag of the table (td) and does not work in lines tag of the table (tr), and to write all time in teg of column not conveniently.
    Tried all the offered variants – it is not work. The problem is in IE, is absent in FireFox

  4. German says:
    9-23-2008 at 10:02 pm

    Hi Alex,

    I have a little problem with a javascript code in the header of my blog. When I move the mouse on the red line in header it should show the categories, by expanding the height of the page.
    But it doesn’t works with IE7.

    The code is this:

    div id=”topbar” onmouseover=”scale.sizeup()” onmouseout=”scale.sizedown(30)”>var topbar = document.getElementById(‘topbar’); topbar.style.height = 30 + “px”;

    Thank you for your help!

    Germán

  5. Alex says:
    9-25-2008 at 5:25 pm

    Hey German,

    Sorry for delay – overload.

    I see your problem and know how to fix it.
    http://mauzon.com/dev/Conciencia.html – there is a solution.

    If you want me to explain where the problem is (was) feel free to contact me directly using gTalk and I’ll explain 😉
    My gTalk is mauzon at gmail.

    Best,
    A.