[SOLVED] Form Frustration?

stublackett · July 25, 2008

Hi Guys,

I'm posting again in the CSS Bit :-[

I've got a Form Setup

But it looks god awful in Firefox and the "E-Mail" Label is appearing on 2 lines

It can be viewed at : http://www.fpwebdesign.com/test/keeper-for-a-day-order.php

How do I prevent the label for E-Mail from wrapping on to 2 lines?

The code is......

CSS Code

/* Order Form */

fieldset { float: left; clear: left; width: 100%; margin: 0 auto; padding: 0; border:thin; }

legend { color: #000000; font-weight: bold; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px; padding-bottom: 24px; float:left; } 

fieldset ol { list-style: none; } 

fieldset li { float: left; clear: left; width: 100%; padding-bottom: 1em; list-style:none;} 

fieldset.submit { float: center; border:none; }

label { float:left; width:18px; margin-right:25px; text-align:left; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:11px; font-weight:bold;}

h2 { padding-left:110px; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:13px; }

.text { border:thin; font-family:Verdana, Arial, Helvetica, sans-serif; }

.boxes { border:thin 2px; font-family:Verdana, Arial, Helvetica, sans-serif; margin-right:40px; float:left; margin-left:77px;}

HTML Code

<form method="post" action=".php" >  
<fieldset>  
<div id="php-errors">
<?php
// check for any errors and display -
if(!empty($errors))
{
foreach($errors as $key => $error)
{
	echo "<b>Please correct this error</b>: $error";
}
}
?>
</div>
<ol>  
<legend>Your Details...</legend>
<li>
<label for="title">Title :</label>
<select name="title" class="boxes" id="title">
<option selected="selected">Please Select</option>
<option>Mr</option>
<option>Mrs</option>
<option>Master</option>
<option>Rev.</option>
</select>
</li>
<li>  
<label for="forename">Forename : </label>  
<input id="forename" name="forename" class="text" type="text" size="35" />  
</li>
<li>  
<label for="surname">Surname : </label>  
<input id="forename" name="forename" class="text" type="text" size="35"/>  
</li>  
<li>  
<label for="address">Address : </label>  
<input id="address" name="address" class="text" type="text" size="35" />  
</li>
<li>  
<label for="address1"></label>  
<input id="address1" name="address1" class="text" type="text" size="35" />  
</li>
<li>  
<label for="town">Town :</label>  
<input id="forename" name="forename" class="text" type="text" size="35" />  
</li>
<li>  
<label for="county">County : </label>
<select name="county" class="boxes" id="county">
<option value="Select" selected="selected">Please   Select</option>
<option value="1">Avon</option>
<option value="2">Bedfordshire</option>
<option value="3">Berkshire</option>
<option value="65">Borders</option>
<option value="4">Buckinghamshire</option>
<option value="5">Cambridgeshire</option>
<option value="66">Central</option>
<option value="6">Cheshire</option>
<option value="7">Cleveland</option>
<option value="57">Clwyd</option>
<option value="8">Cornwall</option>
<option value="9">Cotswolds</option>
<option value="10">Cumbria</option>
<option value="11">Derbyshire</option>
<option value="12">Devon</option>
<option value="13">Dorset</option>
<option value="67">Dumfries and   Galloway</option>
<option value="14">Durham</option>
<option value="58">Dyfed</option>
<option value="15">East   Anglia</option>
<option value="16">East Midlands</option>
<option value="17">East Sussex</option>
<option value="18">Essex</option>
<option value="68">Fife</option>
<option value="19">Gloucestershire</option>
<option value="69">Grampian</option>
<option value="20">Greater London</option>
<option value="21">Greater   Manchester</option>
<option value="59">Gwent</option>
<option value="60">Gwynedd County</option>
<option value="22">Hampshire</option>
<option value="23">Herefordshire</option>
<option value="24">Hertfordshire</option>
<option value="70">Highlands and Islands</option>
<option value="25">Humberside</option>
<option value="26">Isle of Wight</option>
<option value="27">Isles of   Scilly</option>
<option value="28">Kent</option>
<option value="29">Lake District</option>
<option value="30">Lancashire</option>
<option value="31">Leicestershire</option>
<option value="32">Lincolnshire</option>
<option value="74">London</option>
<option value="71">Lothian</option>
<option value="33">Merseyside</option>
<option value="61">Mid Glamorgan</option>
<option value="78">Middlesex</option>
<option value="34">Norfolk</option>
<option value="35">North   Yorkshire</option>
<option value="36">Northamptonshire</option>
<option value="37">Northumberland</option>
<option value="38">Northumbria</option>
<option value="39">Nottinghamshire</option>
<option value="76">Orkney   Islands</option>
<option value="40">Oxfordshire</option>
<option value="62">Powys</option>
<option value="41">Rutland</option>
<option value="75">Shetland Islands</option>
<option value="42">Shropshire</option>
<option value="43">Somerset</option>
<option value="63">South   Glamorgan</option>
<option value="44">South Yorkshire</option>
<option value="45">Staffordshire</option>
<option value="72">Strathclyde</option>
<option value="46">Suffolk</option>
<option value="47">Surrey</option>
<option value="73">Tayside</option>
<option value="48">Tyne and Wear</option>
<option value="49">Warwickshire</option>
<option value="50">West Country</option>
<option value="64">West   Glamorgan</option>
<option value="51">West Midlands</option>
<option value="52">West Sussex</option>
<option value="53">West Yorkshire</option>
<option value="77">Western Isles</option>
<option value="54">Wiltshire</option>
<option value="55">Worcestershire</option>
<option value="56">Yorkshire</option>                                                                
</select>                                                              
</li>
<li>  
<label for="telephone">Telephone :</label>  
<input id="telephone" name="telephone" class="text" type="text" size="35" />  
</li>
<li>  
<label for="email">E-Mail :</label>  
<input id="email" name="email" class="text" type="text" size="35" />  
</li>
</ol>  
</fieldset> 
<fieldset>
<ol>
<legend>Gift Recipient Details...</legend>
<li>
<label for="title">Title : </label>
<select name="title" class="boxes" id="title">
<option>Please Select</option>
<option>Mr</option>
<option>Mrs</option>
<option>Master</option>
<option>Rev.</option>
</select>
</li>
<li>  
<label for="forename">Forename : </label>  
<input name="forename" type="text" class="text" id="forename" size="35" />
</li>  
<li>  
<label for="surname">Surname : </label>  
<input name="surname" type="text" class="text" id="surname" size="35" />
</li>  
<li> 
<label for="address1">Address : </label>
<input name="address" type="text" class="text" id="address" size="35" />
</li>
<li>
<label for="address2"></label>
<input name="address2" type="text" class="text" id="address1" size="35"/>
</li>
<li>
<label for="town">Town : </label>
<input name="town" type="text" class="text" id="town" size="35"/>
</li>
<li>  
<label for="county">County : </label>
<select name="county" class="boxes" id="county">
<option value="Select" selected="selected">Please   Select</option>
<option value="1">Avon</option>
<option value="2">Bedfordshire</option>
<option value="3">Berkshire</option>
<option value="65">Borders</option>
<option value="4">Buckinghamshire</option>
<option value="5">Cambridgeshire</option>
<option value="66">Central</option>
<option value="6">Cheshire</option>
<option value="7">Cleveland</option>
<option value="57">Clwyd</option>
<option value="8">Cornwall</option>
<option value="9">Cotswolds</option>
<option value="10">Cumbria</option>
<option value="11">Derbyshire</option>
<option value="12">Devon</option>
<option value="13">Dorset</option>
<option value="67">Dumfries and   Galloway</option>
<option value="14">Durham</option>
<option value="58">Dyfed</option>
<option value="15">East   Anglia</option>
<option value="16">East Midlands</option>
<option value="17">East Sussex</option>
<option value="18">Essex</option>
<option value="68">Fife</option>
<option value="19">Gloucestershire</option>
<option value="69">Grampian</option>
<option value="20">Greater London</option>
<option value="21">Greater   Manchester</option>
<option value="59">Gwent</option>
<option value="60">Gwynedd County</option>
<option value="22">Hampshire</option>
<option value="23">Herefordshire</option>
<option value="24">Hertfordshire</option>
<option value="70">Highlands and Islands</option>
<option value="25">Humberside</option>
<option value="26">Isle of Wight</option>
<option value="27">Isles of   Scilly</option>
<option value="28">Kent</option>
<option value="29">Lake District</option>
<option value="30">Lancashire</option>
<option value="31">Leicestershire</option>
<option value="32">Lincolnshire</option>
<option value="74">London</option>
<option value="71">Lothian</option>
<option value="33">Merseyside</option>
<option value="61">Mid Glamorgan</option>
<option value="78">Middlesex</option>
<option value="34">Norfolk</option>
<option value="35">North   Yorkshire</option>
<option value="36">Northamptonshire</option>
<option value="37">Northumberland</option>
<option value="38">Northumbria</option>
<option value="39">Nottinghamshire</option>
<option value="76">Orkney   Islands</option>
<option value="40">Oxfordshire</option>
<option value="62">Powys</option>
<option value="41">Rutland</option>
<option value="75">Shetland Islands</option>
<option value="42">Shropshire</option>
<option value="43">Somerset</option>
<option value="63">South Glamorgan</option>
<option value="44">South Yorkshire</option>
<option value="45">Staffordshire</option>
<option value="72">Strathclyde</option>
<option value="46">Suffolk</option>
<option value="47">Surrey</option>
<option value="73">Tayside</option>
<option value="48">Tyne and Wear</option>
<option value="49">Warwickshire</option>
<option value="50">West Country</option>
<option value="64">West Glamorgan</option>
<option value="51">West Midlands</option>
<option value="52">West Sussex</option>
<option value="53">West Yorkshire</option>
<option value="77">Western Isles</option>
<option value="54">Wiltshire</option>
<option value="55">Worcestershire</option>
<option value="56">Yorkshire</option>                                                                
</select>                                                              
</li>
<li>
<label for="telephone">Telephone : </label>
<input name="telephone" type="text" class="text" size="35" />
</li>
<li>  
<label for="email">E-Mail :</label>  
<input id="email" name="email" class="text" type="text" size="35" />  
</li>
</ol>
</fieldset>
<fieldset class="submit">  
<input class="submit" type="submit" name="submit" value="Submit" />  
<input class="reset" type="reset" />
</fieldset> 
</form>

haku · July 25, 2008

All your labels are on two lines in my browser.

Increase the width of the css declaration on your labels.

Sign In

[SOLVED] Form Frustration?

Recommended Posts

stublackett

Link to comment

Share on other sites

haku

Link to comment

Share on other sites

Archived

Browse

Activity

Important Information