Can't get vertical-align to work... argh!

try adding some padding-top of about 5px to .menu
.menu{padding-top:5px; position:relative;}

That did the trick in FF... might not be the answer for other browsers?

Thankyou for your quick response.

You are quite right, that does work - however, it will have to be redone if I changed the font size or anything.
Can you explain in idiots terms why the vertical-align attribute doesn't work here?

Also, what do you think of the way I've implimented this? Bodgejob or not?

Thanks.

The vertical-align property in CSS has given gray hair to many a starting css coder until they finally realized what this property is, and what it is not.

This property does not vertically align elements inside a box element. It is not the CSS equivalent for the HTML attribute valign="middle".

Vertical-align aligns the content inline. This means it is vertically aligned in comparison to the elements right before and after, and not in reference to parent/child. This means that this property can align text within a line or inside a <td>.

hard to tell without some more content on the page... to get an idea of how it's going to look

Uh oh, back again!

While it does reposition the text, it mucks up the background change on mouse-over (that comes down too, leaving some of the original image showing).

Back to the drawing board.

Any other ideas?

A common problem with vertical aligning here is the solution

For example: The height of your menu button, or lets say the height of the area where you want the text to get middle aligned is 30 px. Declare the line height so just add this line to your css section for the button.

line-height: 30px;
vertical-align: middle;

That will do the trick

Good luck...

That works perfectly in Mozilla, but...

*sigh*

Good old IE and it's broken box model screw it up.
The links get progressively lower the further right they are in IE. Damn damn damn.

If I was to redo the menu a different way is there some way around this? If so how should I try to do it?

There is nothing wrong with ie6.0 I dont know other versions but this works perfectly in ie.60, I could not just understand the issue with the background picture but you should check that there shouldnt be any values of paddings or margins. And you must be sure that all of the images are at the exact height of your box height, by the way dont forget to declare the box height (in your site it is 27px I guess)

dont forget to remove this (padding-top:5px)

The image isn't "there" in terms of layout, it's a background image for the div so doesn't actually intersect anything.
However (haha!) I think I've fixed it by trying a different approach.

I've uploaded the new files over the ones I was having trouble with, so if you want to see the old ones please refer back to the attachments in my first post.

Summary of the changes:
Decided to go with a UL/LI structure instead.
Modified it to float left.
Set required width and height, relative position from the top of the header div, and applied the line-height suggestion posted above.
Wrote the relevant CSS to convert links within the LI items to the style I want.

Success! No box-model issues at all, works fine in both browsers, and the text is where I want it.

It'll still need adjusting if I alter the font, but nothing's perfect I guess.

In the spirit of passing the fixes along, I've attached the corrected files again.
Thanks for all the help. Now I can get back to doing the bit I find more enjoyable: the graphic design.

What do you think by the way? I know it's hard to tell from one header but thats as far as I've got.
Give me a few mins and i'll upload the other headers.

Upload complete, the links now work and link to the different sections (well the headers change anyway heh).

Much better... uh... what you gonna do if you ever need more menu items? Looks like you'll have to redo your background graphics?

you give the signals of doing nice jobs after a hard working period

You're perfectly right to point this out - the first rule of web design is forward planning I find.

Everything on the header image, including the navigation section, is a single graphic except for the link text (and the link backgrounds on mouseover/selection).

All 5 headers are generated from a single PSD (photoshop file).
The file has 6 different layer sets.

Set 1 is the overlay graphics which appear on every header - that is the navigation panel, the "megla.net" in the bottom right corner, and the "V2" on the right of the image.
The navigation panel is further split down into a semi-transparent white box with a stroke style (that does the very slightly transparent black border around it), and some vector lines that are the dividers.

Sets 2 through 6 are the section specific graphics.
For each set there is simply a layer with the spot-graphic, and a text layer with an outer glow applied (that's the black haze round the text).

So, if I ever want to extend the options, it's not actually that hard.
I can extend the white box of the navipanel and shove in another divider line, or I can nudge the existing lines closer and add another, or a combination of both of these options.
Ouputting each header is simply a matter of turning on the layer set relating to the header I want to save out, and saving as JPEG.

This makes it incredibly easy to apply changes across all 5 headers at once.
Simple with a bit of planning

Just wanted to say thanks! I found this solution through a search of the archives and it worked for my problem.

I was using padding-top to position text vertically in a footer bar, which worked fine except for IE6 where it pushed out the box the amount of padding specified both at the top and bottom.

So glad to find this solution as it is much cleaner.

-Antonella :thumbsup:

Kudos for searching and finding the answer, it's always great to search and figure something out yourself. Thanks for letting us know!