Jump to content


Photo

Problem with styling form (line-height i think)?


  • Please log in to reply
2 replies to this topic

#1 benjaminmorgan

benjaminmorgan

    Advanced Member

  • Member
  • PipPipPipPip
  • 237 posts

Posted 16 October 2011 - 04:05 PM

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>
  • 0
Things should be made as simple as possible, but not any simpler. -Albert Einstein

#2 Wickham

Wickham

    Advanced Member

  • Advanced Member
  • PipPipPipPip
  • 1,732 posts
  • LocationSalisbury UK

Posted 17 October 2011 - 02:06 AM

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 by Wickham, 17 October 2011 - 02:18 AM.

  • 0

#3 benjaminmorgan

benjaminmorgan

    Advanced Member

  • Member
  • PipPipPipPip
  • 237 posts

Posted 17 October 2011 - 07:13 AM

Thanks SOO Much!
  • 0
Things should be made as simple as possible, but not any simpler. -Albert Einstein




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users