CSS text-align middle thing:

[dpaanlka]

I cannot for the life of me get the navigation and searchbox to center themselves vertically inside their little box:

http://www.info-mac.org/test

what am I missing here? i'm new to CSS

 

[angelwatt]

Essentially, it's harder than it should be. Check this site for details, http://phrogz.net/CSS/vertical-align/index.html

As a semi-solution you can mess with line-height. It fails though when the user starts messing with the text size (zooming).

.headerimage #form1 a {
color: #FFFFFF;
line-height: 40px;
}

 

[angelwatt]

I messed with the CSS a little bit and found a way to do it with what you have.

.headerimage {
// add
display: table-cell;
vertical-align: middle;
...
}

.headerimage #form1 {
...
// remove
height: 85px;
...
}

This'll at least work in Firefox where i was testing it with the Web Developer Toolbar extension, but I'm pretty sure it works in most browser (though you never know with IE).