CSS Button text centered vertically

Hello,

I want to make a button that automatically resizes according to the
text length and the font size (which can be changed in firefox pretty
easily with the browser).

The button already works for resizing horizontally, the problem is
when I enlarge the text using firefox, the text doesnt stay aligned
with the button. If the text is larger, the text is not centered
vertically in the button.

Here is my code,
http://mofstudios.com/maxime/test/test.html

I need a solution that the text will stay centered in the button
whatever size the text is.
It also needs to work in IE

Thank you for helping me
Max

Maxime wrote:

when I enlarge the text using firefox, the text doesnt stay aligned
with the button. If the text is larger, the text is not centered
vertically in the button.

http://mofstudios.com/maxime/test/test.html

It's only doing what you told it to do:
background: url(./images/btny_l.gif) no-repeat left top;

Notice the "top" vertical position.

I need a solution that the text will stay centered in the button
whatever size the text is.

I don't think you can do it with the single image you're using for both
normal and :hover states. Make 2 images, one for each state, and
vertically position it center instead of top.

--
Berg

Maxime wrote:

Hello,

I want to make a button that automatically resizes according to the
text length and the font size (which can be changed in firefox pretty
easily with the browser).

The button already works for resizing horizontally, the problem is
when I enlarge the text using firefox, the text doesnt stay aligned
with the button. If the text is larger, the text is not centered
vertically in the button.

Here is my code,
http://mofstudios.com/maxime/test/test.html

I need a solution that the text will stay centered in the button
whatever size the text is.
It also needs to work in IE

As Bergamot said, it is working as you designed it work. It's a
fixed-size graphic with text overlayed. When I increase my browser text
size all the text grows including the "Button" growing out of the
graphic. Also, I think some browsers will grow the image when
increasing text, but some won't:

SeaMonkey - no
Firefox 2.x - no
Safari - no
Opera 9 - yes

Not sure how you can get the result you want.

--
Ed Mullen
http://edmullen.net
The hilarious thing about self-important self-righteous people is that
they are so easily baited.