Jump to content
Killersites Forums

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


benjaminmorgan
 Share

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>

Link to comment
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
Link to comment
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...
 Share

×
×
  • Create New...