CODEWITHSUNDEEP
htmlbuttoninternet-explorer-7multiline
dsas
dsas

Reputation: 1660

Multi-line buttons in HTML

If the width of a button element isn't wide enough to contain the button text Firefox and Chrome give the button more height, IE (v7 at least) will just cut off. How can I make IE expand the height to contain the text? Ideally just using CSS.

I've tried explicitly giving IE7 a height that makes the button bigger but it still just displays one line of cut off text.

<button style="width:40px;">Some really long text that is more than 20px</button>

In the real version I'm using the ButtonGroup YUI control so can't use <input> elements.

Upvotes: 2

Views: 8066

Answers (2)

Gert Grenander
Gert Grenander

Reputation: 17084

I don't have IE7 installed, but adding a DIV inside the button works in IE6:

<button style="width:40px;"><div style="height: 100%">Some really long text that is more than 20px</div></button>

Example in action.

Upvotes: 7

Greg McNulty
Greg McNulty

Reputation: 1466

CSS Only Button – Redux

http://www.binarymoon.co.uk/2010/06/css-button-redux/

Upvotes: -1

Related Questions