Help
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>
Page 1 of 1
Problem with styling form (line-height i think)?
#1
- Group: Member
- Posts: 237
- Joined: 18-September 11
Posted 16 October 2011 - 04:05 PM
Things should be made as simple as possible, but not any simpler. -Albert Einstein
#2
- Group: Advanced Member
- Posts: 1,731
- Joined: 20-December 08
- LocationSalisbury UK
Posted 17 October 2011 - 02:06 AM
Add this style after the .outform li style:-
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:-
and edit the markup for the last two li tags with the textarea to add the class:-
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).
.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).
This post has been edited by Wickham: 17 October 2011 - 02:18 AM
#3
- Group: Member
- Posts: 237
- Joined: 18-September 11
Posted 17 October 2011 - 07:13 AM
Thanks SOO Much!
Things should be made as simple as possible, but not any simpler. -Albert Einstein
Share this topic:
Page 1 of 1