Question

I’ve been making a button of sorts.

However, I’ve come into a spot of trouble.

When making it smaller it pushes the text out of the box, and I can’t seem to to put it back in.

Here’s a link: http://jsfiddle.net/MichaelT/ByxRh/1/

Any help would be appreciated.

Thanks!

Answer 1

It looks like the line-height was set to twice the height of the p.

p.speech {
     height:50px;
     line-height:100px;
}

If you simply set the line-height of the p to exactly the height that you want the p to appear, and don’t give it any explicit height, it should look fine: http://jsfiddle.net/ByxRh/16/

p.speech {
     line-height:50px;
}