Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations strongm on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Wrap text on button

Status
Not open for further replies.
MikePalm

MikePalm

Programmer
Feb 6, 2002
34
US
I have the following button:

Code: 
<input type="button" value="Change Order Logs" title="Change Order Logs"  src="../graphics/file_drawer_handle.gif" onclick="window.location='../forms/multi_select.cfm?form_name=change_order_log'" style="font-size:10px; font-weight:700; width: 89px; height: 90px; border-color: #FFFFFF; border-style: outset; border-width: thin; border: 1px none #000000; background-image: url(../Graphics/file_drawer_handle.gif); background-position: 50% 30%; background-repeat: no-repeat; background-color: #D2D3AD; layer-background-color: #D2D3AD; overflow: auto;">

The button displays as "change Order Log" I would like to display as
Change Order
Log
 
Sort by date Sort by votes
I've never tried it, but try putting "\n" in the string where you want it to break.


Tracy Dryden

Meddle not in the affairs of dragons,
For you are crunchy, and good with mustard. [dragon]
 
Upvote 0 Downvote
\n might work in IE, not in other browsers though. The problem is that [tt]<input>[/tt] is an inline element and as such cannot span text over more than one line.
 
Upvote 0 Downvote
Thanks for all of your help is figured it out. I changed the tag to a button tag type = submit and it worked see code below
Code: 
<button type="submit" title="Change Order Log" onclick="window.location='../forms/multi_select.cfm?form_name=change_order_log'" style="font-size:10px; font-weight:700; width: 89px; height: 90px; border-color: ##FFFFFF; border-style: outset; border-width: thin; border: 1px none ##000000; background-image: url(../Graphics/file_drawer_handle.gif); background-position: 50% 30%; background-repeat: no-repeat; background-color: ##e7dec0;">#Change Order#<br>Logs</button>
 
Upvote 0 Downvote
cLFlaVA,

Aye, that works however sometimes one of the buttons (random) will have an 'artifact' on it during a mouseover. It appears to be a 1px line across the text from one of the other buttons that shows on the top or bottom of the button you're hovering over:

Code: 
<html>
<head>
    <style type="text/css">
    a {
        text-decoration: none;
    }
        a input {
            background-color: #0033ff;
            border-color : #4f6bdc #0f2375 #0f2375 #4f6bdc;
            text-decoration: none;
            cursor: pointer;
            border-style : solid;
            border-width : 2px;
            color : #fff;
            padding : 1px;
            font-weight: bold;
            width: 193px;
            text-align: left;
	    font-size: 16px;
        }
        a:hover input {
            background-color: #4169E1;
            border-color : #455ea7 #2d417c #2d417c #455ea7;
            text-decoration: none;
	    cursor: pointer;
            border-style : solid;
            border-width : 1px;
            color : #fff;
            padding : 1px;
            color : #fff;
            font-weight: bold;
    	    width: 193px;
            text-align: left;
        }
    </style>
</head>
<body>
    <a href=""><input type="button" value="Button 1" Onclick="window.location='#'"/></a><br>
<a href=""><input type="button" value="Button 2" Onclick="window.location='#'"/></a><br>
<a href=""><input type="button" value="Button 3" Onclick="window.location='#'"/></a><br>
<a href=""><input type="button" value="Button 4
     With extra line" Onclick="window.location='#M'"/></a><br>
<a href=""><input type="button" value="Button 5
     With extra line" Onclick="window.location='#'"/></a><br>
<a href=""><input type="button" value="Button 6" Onclick="window.location='#'"/></a><br>
<a href=""><input type="button" value="Button 7" Onclick="window.location='#'"/></a><br>
<a href=""><input type="button" value="Button 8" Onclick="window.location='#'"/></a><br>
<a href=""><input type="button" value="Button 9" Onclick="window.location='#'"/></a><br>
<a href=""><input type="button" value="Button 10" Onclick="window.location='#'"/></a><br>
</body>
</html>
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

cae154
  • Locked
  • Question
Body of email not appearing in correct font on iPhone and iPad
Replies
1
Views
413
spamjim
spamjim
lmcate
  • Locked
  • Question
From HTML Page open an MDB files on the server and work
Replies
0
Views
114
lmcate
lmcate
waubain
  • Locked
  • Question
Prevent user from getting a 404 error if click on a hover text displaying a hidden image. 1
Replies
5
Views
146
jjgupta915
jjgupta915
lmcate
  • Locked
  • Question
Create a Expand/Collapse FAQ Accordion, Collapse other on Click 1
Replies
2
Views
358
Mike Lewis
Mike Lewis
PeDa
  • Locked
  • Question
Display table td's as block element on mobile phone 1
Replies
3
Views
493
spamjim
spamjim

Part and Inventory Search

Sponsor

Back
Top