CSS : Vertical Align

Why doesn't vertical-align work in this code?

ok, here's my code body code....

Code:

---

<div style="width:100%; height:100%; text-align:center;">
    <divstyle="background:url(images/banner.png) no-repeat; width:762px; height:43px; text-align:right; vertical-align:middle;">
                  <span id="home" class="menu" onmouseover="this.className='menu2';" onmouseout="this.className='menu';">home</span>
                        <span id="stats" class="menu" onmouseover="this.className='menu2';" onmouseout="this.className='menu';">stats</span>
                        <span id="telephone" class="menu" onmouseover="this.className='menu2';" onmouseout="this.className='menu';">telephone</span>
                        <span id="email" class="menu" onmouseover="this.className='menu2';" onmouseout="this.className='menu';">email</span>
                        <span id="help" class="menu" onmouseover="this.className='menu2';" onmouseout="this.className='menu';">help</span>
                  </div>
                <div style="background-color:#FFFFFF; width:762px; height:80%;"></div>
                <div style="background-color:#949e73; width:762px; height:43px;"></div>
        </div>

---

and heres the css...

Code:

---

body,table {font-family:arial;
                                        font-size:7pt;}
                        body {background-color:#000000;
                                        color:#000000;}
                        .menu {color:#000000;
                                                width:69px;
                                                height:14px; 
                                                text-align:center;
                                                cursor:pointer;}
                        .menu2 {color:#000000;
                                                font-weight:bold;
                                                width:69px;
                                                height:14px; 
                                                text-align:center;
                                                cursor:pointer;
                                                border:1px solid #8CAE00;}

---

A couple of things:

I can't get height to work in IE. I'm not sure what browser you are using to test this, but I suggest Mozilla. It is the most compliant browser on the planet. Opera will correctly render the height attribute, but doesn't do CSS events.

You have a container that is 100% tall. Inside it you have three containers, two of which are 43px tall, the third is 80%. Sometimes that may be taller than my viewport, or shorter than.

As to the vertical-align? I don't know. It may be an IE issue. What I do in cases like yours, however, is not set the align on the container, but set the margins on the contents. If you set the top and bottom margins to auto, then it should vertically center what you want. You may need to set the containers padding to 0. I imagine you could set the contents margins to 0 and the containers padding to auto and get the same affect, but double check the rules for collapsing and such.

Hope this helps.

Thanks for your help Travis. I do use Mozilla for testing scripts (as well as Opera) but in this case the page is on our Intranet which only has to work in IE.

Further to this I've tested the page in IE 5.5 and 6. In 6 the height works but 5.5. is buggy (but, as you know, 6 is buggy too ;) ) but I still can't get it to align correctly in the Div.

I did find a way around it though. I changed the Div for a table... not Ideal, but it worked.

If anyone has gone any other ideas I'd be happy to hear them.

Cheers