Button & text problem

HTML & CSS
1

My web page reads fine in Chrome, but on one of the buttons in IE half of text disappears and in Firefox it shows out of the box

The page is http://www.c5d.co.uk/descriptioned51891.php

Is the real answer to increase the button size, or reduce the text size in the button ?

I hope not because I want to keep the button & text all the same on all my pages

Thanks for any help

Antony

2

Hi,

It’s probably because the default padding on the button is different in various browsers. You could try:


button{padding:0}

However the text in the “Return to the 1981 Homepage” button is almost at full width and some browsers may render the text longer than will fit on one line so you could lengthen the button a little more.

Or perhaps use a min-width (IE7+) e.g.


button{width:auto!important;min-width:200px}

The !important is needed because you have used inline styles and only !important will over-ride them.

3

Thanks, it almost worked as suggested !

Having done what you suggested it rendered in one straight line, but shrank the height of the button.

I added in (height:auto!important;min-height:30px) and it worked a treat !

Thanks for the prompt reply

Antony

4

You could have just added some padding top and bottom back into the rule as it was the horizontal padding extending the button:) However the min-width should do what you want anyway without changing the default padding.