Jump to content
Stef's Coding Community
Sign in to follow this  
benjaminmorgan

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

Recommended Posts

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>

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...