benjaminmorgan Posted October 16, 2011 Report Share Posted October 16, 2011 I am trying to style this form and I ran into a problem when the label ran into 2 lines . I am not using this form for real but I need to know how to do this. Here is my code <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml… <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Title of document</title> <style type="text/css"> .outform { list-style:none; padding:10px; padding-top:0px; padding-bottom:0px; width:80%; margin:0; background-color:black; } .outform li{ height:40px; line-height:40px; background-color:green; padding:5px; clear:both; list-style:none; border-bottom:2px solid black; } .outform input { float:left; height:100%; } .outform label { width:140px; float:left; height:30px; } </style> </head> <body> <form method="post" action="quote.php"> <ul class="outform"> <li> <label> Name </label> <input type="text" value="" /> </li> <li> <label>Last Name</label> <input type="text" value="" /> </li> <li> <label>Email * </label> <input type="text" value="" /> </li> <li> <label>Multi Line Label is here</label> <textarea rows="4" cols="30"></textarea> </li> <li> <label>yet another Multi Line Label is here</label> <textarea rows="4" cols="30"></textarea> </li> </ul> </form> </body> </html> Quote Link to comment Share on other sites More sharing options...
Wickham Posted October 17, 2011 Report Share Posted October 17, 2011 (edited) Add this style after the .outform li style:- .outform li.multiline { height: 85px; } and delete the height from .outform label which isn't needed as it will be contained by whatever height is given to the li tag. I would also suggest removing the line-height a sthis makes the two lines in the label text far apart:- <style type="text/css"> .outform { list-style:none; padding:10px; padding-top:0px; padding-bottom:0px; width:80%; margin:0; background-color:black; } .outform li{ height:40px; /*line-height:40px; edited*/ background-color:green; padding:5px; clear:both; list-style:none; border-bottom:2px solid black; } .outform li.multiline { height: 85px; } /* added */ .outform input { float:left; height:100%; } .outform label { width:140px; float:left; /*height:30px; edited */ } </style> and edit the markup for the last two li tags with the textarea to add the class:- <body> <form method="post" action="quote.php"> <ul class="outform"> <li> <label> Name </label> <input type="text" value="" /> </li> <li> <label>Last Name</label> <input type="text" value="" /> </li> <li> <label>Email * </label> <input type="text" value="" /> </li> <li class="multiline"> <label>Multi Line Label is here</label> <textarea rows="4" cols="30"></textarea> </li> <li class="multiline"> <label>yet another Multi Line Label is here</label> <textarea rows="4" cols="30"></textarea> </li> </ul> </form> </body> The claas with an increased height allows the label text to be on two lines but I found that the class needed to be 85px height to allow the four rows of textarea to be within the li height in Firefox (IE uses slightly less height for the four rows). Edited October 17, 2011 by Wickham Quote Link to comment Share on other sites More sharing options...
benjaminmorgan Posted October 17, 2011 Author Report Share Posted October 17, 2011 Thanks SOO Much! Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.