Line Break in a Button? [Answered]

[Nori]

Is it possible to create a vertical button?

Currently I have been attempting to accomplish this by putting in line breaks in a submit button's value, of which is sitting in my global footer, but all my tricks have failed.

<input class="button" type="submit" value="To be Line 1
To be Line 2"/>

Any suggestions? I do have 'white-space:normal;' set.

Have tried: (with the proper '&' before them of course...)

• #x00a;
• #10;
• <br />
• /n
• And of course a simple enter as per the code above

[Pebble]

Try this :

<input class="button" type="submit" value="To be Line 1&#10;To be Line 2"/>

EDIT: forgot this bit:


<input class="button" style="white-space:pre;" type="submit" value="To be Line 1&#10;To be Line 2"/>


[Nori]

You're magical. That did the trick! I do have another question for you (or anyone else)... is it possible to transpose a button? By that I mean flip it on its side.

This is fantastic though, many thanks.

[Pebble]

Can you try to make an example of how you want it to look? I'm not sure what end result your looking for.

[Nori]

I do have something made but it's on my home computer and I apparently removed the image from my Photobucket last night... Basically, take the 'Pebble' banner in your signature and turn it 90 degrees. The only advantage I would have for doing that over my currently line breaking text is inheriting the button styling from the forum (since the default background styles are all horizontal), so is more of a curious request.

I can post an example image later today if this isn't clear enough.

[Pebble]

Something like this?


<input class="button" style="white-space:pre; transform:rotate(90deg); -webkit-transform:rotate(90deg);" type="submit" value="To be Line 1&#10;To be Line 2"/>
This will only work in modern browsers, so you'd have to check out what happens in older ones.
Change the 90's to what ever rotation you want ( in both parts of the style values ).

[Nori]

Well isn't that snazzy. Will keep that transform bit in my back pocket.

Many thanks once again! You have a great long weekend