Hello guys and gals! Greetings from God's own county, Yorkshire - England

I'm working on a layout: http://www.ukrocketry.co.uk/orbital/

I'm trying to add some padding to the bottom of each menu button to vertically align the text, but for some reason it's not working. At the moment each div is 15px high, so I changed it to 13px and added 2px of bottom padding. Instead of pushing the text up, it seems a 2 px space is added on to the vertical height of the div! (In stupid IE 6).

In the other browsers the padding does not appear to take effect. Could a CSS guru help end my woes?

Each menu button is an absolutely positioned div inside a common relative container, and each has it's background set to the button image.

Sample:

div#m1 {

position: absolute;
top: 140px;
left: 5px;
height: 15px;
width: 89px;
text-align: center;
background: #EBEBEB url(http://www.ukrocketry.co.uk/orbital/...enu_button.gif) no-repeat;
}

How can I add the padding to each of these div's in a way that will work as I want it to? I've never come across this problem before.

Thanks for your suggestion, but I think I may not have explained correctly. I don't want to change the height of the menu div's themselves, I just want to vertically align the text in each of them into a middle position, so the layout looks better.

At the moment you will notice that the text within each menu button appears to be resting on the bottom line. I tried to change this using padding, to push the text up slightly away from the bottom edge of the background image. I have also tried setting the line height to the same as the div height, and in any case I could not get it to work.

Can anyone help?

Your problem lies in the height set for container div. Because of the height you can't extend the menu div's. You have the bgcolor of the menu links set to the gray.

Here are some steps to make it work for you:

1. Change the height of the container div to 165px.
2. Change the gif file with a transparent corner to a solid gif file with the corner the grey bg color.
3. Change the background color you have set for the menus (#m1, #m2, etc) to the RGB code for the red in the button.
4. On each menu definition add padding-bottom: 5px; This will add the space on the bottom of the div that you want.


I tested it here and it worked fine.

You may want to try using margin-bottom instead of padding.

margin-bottom: 2px;

will add a 2px margin inside the div.

That doesn't work either I think I have found a bug, because padding or margins just do not work on those div's!