[Design with CSS 3766] vertical-alignment of inlined elements

I have a problem of vertical alignment of inlined list items in the horizontal navigation menu of a header. I can't use floats because of the rest of the layout.

I was thinking that I could use a larger line-height for the list items, but it doesn't really help that much this time. The list items more or less just sit there, at least when I use the Google Droid font. I also tried vertical-alignment, but nothing.

The basic structure is header -> header-content ->navigation > li > a
All of the list items are set to display:inline.
There's also a list item enclosed h1 element which has an enclosed image: li > h1 >img and a submenu in there: li > ul > >li > a, of which the image complicates things as it has a fixed height of 39px.

The header div sets the height of 4 ems and also a background color. It's within these 4 ems that I need to vertically align the content of my navigation.

I need some ideas how to accomplish this kind of vertical alignment. Suggestions? :-)

You can find a full code example of the problem here: http://pastebin.com/zcLspjJz

--
--
You received this because you are subscribed to the "Design the Web with CSS" at Google groups.
To post: css-design@googlegroups.com
To unsubscribe: css-design-unsubscribe@googlegroups.com