FF text on submitbutton 1

[1DMF]

Hi,

I don't seem to be able to vertical align the text on a submit button in FF.

it is auto aligned in IE, but I have to apply 5px bottom padding to the button to get it to center in FF.

is there a way round this? why is FF putting the text aligned to the base of the input button?

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!

 

[1DMF]

I ended up putting the padding on and then using a conditional comment in the HTML for IE removing it.

Unless someone has a better suggestion?

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!

 

[BabyJeffy]

Try setting the line-height to be the same as the height of the button (assuming both are specified in ems).

Another suggestion is to use vertical-align set to something like 25%.

Cheers,
Jeff

[tt]Jeff's Blog [!]@[/!] CodeRambler

http://www.coderambler.com/

http://www.coedit.co.uk/

[/tt]

Make sure your web page and css validates properly against the doctype you have chosen - before you attempt to debug a problem!

FAQ216-6094

 

[1DMF]

I did try line-height but that didn't work.

I didn't think vertical-align affected text, only images, but I tried it and no joy :-(

I guess the padding/IE condition will have to do, it works and the page validates so hey ho!

wish I knoew why it was doing it though, the page is here

[URL unfurl="true"]http://www.independentmortgagenetwork.co.uk/affiliates.html[/URL]

it's the sign up button @ the bottom.

i've commented out the padding so you can see the problem in FF.





"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!

 

[Vragabond]

I would remove the height and all the other things that are not necessary, use the background-repeat: no-repeat; to make sure the background is not repeating itself and see what happens. In my FF, the thing jumped up a pixel or so and all in all, I would say there was not a serious difference between the IE and FF rendering.

___________________________________________________________
[small]Do something about world cancer today: PACT[/small]

 

[1DMF]

yup you were right as always vragabond!

It was the height attribute, I had made it the same as the image being used, made sense to me.

I've removed all the extra CSS and although not exactly the same in IE & FF , it is acceptable now without the padding and IE conditional formating.

many thanks.

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!