The SitePoint Forums have moved.

You can now find them here.
This forum is now closed to new posts, but you can browse existing content.
You can find out more information about the move and how to open a new account (if necessary) here.
If you get stuck you can get support by emailing forums@sitepoint.com

If this is your first visit, be sure to
check out the FAQ by clicking the
link above. You may have to register
before you can post: click the register link above to proceed. To start viewing messages,
select the forum that you want to visit from the selection below.

However in Firefox I want to get the text hyperlink to sit in the middle of the green band rather than at the top as it does now. I guess what Im trying to do is independently add top padding to the text "Rent coffee machines get pause point".

At the mo everything I do with the CSS in terms of top padding is moving both graphic and the text hyperlink.

I just want to manipulate the top padding of the Rent coff machines so it doesnt look odd.

Hi,
Since your image is 50px height and you are showing 3px borders on a:hover you should set the anchor heights to at least 50px so the borders surround the entire image on hover. Then by setting that 50px height you can then center the text with line-height of the same value.

Your ul is set to 60px height and now your anchors are 50px so center the anchors by setting 5px margins on the li. The text needs some side padding as you currently have it but that makes the image look strange with gaps on just the left and right. You can fix that by setting a negative margin on the image equal to your side paddings. Also, you can loose the min-width:100&#37; on the ul since it is doing nothing with width:100% set.

I want to get the text hyperlink to sit in the middle of the green band rather than at the top as it does now.

This will get what you are wanting to do plus the extra details I mentioned -