Assistance needed with HTML forms

HTML & CSS
1

the CSS somehow causing the form input text boxes and submit to be truncated

See here newsletter in top right

the CSS is quite extensive but some partial code

/* Box Styles */

.box .box-body .box-side .box-content {  margin:0px 1px 0px 1px; background:#fff url(./images/box_middle_content.gif) repeat 0px 0px;  padding: 1em; text-align: left; }
.box .box-footer { background:transparent url(./images/box_bottom_left.gif) no-repeat 0px 0px; }
.box .box-footer .box-side { font-size:1px; height:2px; background:transparent url(./images/box_bottom_right.gif) no-repeat right 0px; }
.box .box-header h1 { font-size: 12px; margin:0px; padding-top: 0px; /*color: #314774;*/ color: #fff; border: 0; }
.box p { margin:0.5em 0px 0px 0px; padding:0px; }
.box ul.box_list li.box_list { font-size: 12px; list-style-image: none; list-style-position: outside; list-style-type: none; margin: 0pt; background:transparent url(images/arrow.gif) no-repeat scroll 0px 2px; padding-left: 18px; padding-bottom: 5px;}
.box ul.box_list { font-size: 12px; list-style-image: none; list-style-position: outside; list-style-type: none; margin: 0pt; padding: 0pt; }

div.box2 { width: 100%; margin-bottom:0px auto; padding: 0;  background-color: #6283DB; }
.box2 .box-header2 {background-color: #6283DB; padding-top: 4px; margin-top:10px;}

.box2 .box-body2 { padding-top: 0px; background-color: #6283DB;}
.box2 .box-body2 .box-side2 {background-color: #6283DB; padding: 0px; }
.box2 .box-body2 .box-side2 .box-content2 {  margin:0px 1px 0px 1px; background-color:#6283DB; padding: 1em;  text-align: left; }
2

Thank for the replies to c2uk and deathshadow60
I was focused on looking elsewhere

@deathshadow
Thanks for the code suggestion

Looking at editing some

thanks

3

this is actually html, not CSS:

<input type="text" style="background-color: rgb(235, 221, 226);" maxlength="25" size="5" name="email">

see the size 5, that’s what makes it so short. And maxlength limits the input to 25 characters, an email may be longer than that.

4

c2uk has it right that the CSS isn’t even targeting the form and it’s the attributes in the markup that are screwing with you.

That said, MEIN GOTT that markup needs to be thrown away completely - endless tables for NOTHING (here’s a tip, if there’s only ONE TD, it shouldn’t be a table), complete and miserable /FAIL/ at building a form, outdated attributes and tags that have no place in modern markup (FONT, CENTER, etc), abuse of semantic tags on the WRONG elements (STRONG for what should be LABEL), etc, etc, etc… We’re talking 89k of markup for 4.2k of plaintext content - there’s something REALLY rotten there as that’s easily four or five times as much HTML as should be used on such a layout.

Take the horizontal form for example:


    <div class="form-container">
        <form action="http://econsumersearch.com/search_results.php" method="get">
            <table align="center">
                <tr>
                    <td><strong><font style="color:white";>Find:</font></strong></td>
                    <td><strong><font style="color:white";>Category:</font></strong></td>
                    <td><strong><font style="color:white";>Location:</font></strong></td>
                    <td><strong><font style="color:white";>Within:</font></strong></td>
                    <td></td>
                </tr>
                <tr>
                    <td><input type="text" value="" id="keyword" name="keyword" class="text" /></td>
                    <td><select id="category" name="category" class="select"><option value=""></option><option value="2">Automotive</option><option value="3">Arts</option><option value="4">Business</option><option value="245">Books and Magazines</option><option value="5">Classifieds</option><option value="6">Computers</option><option value="7">Communities</option><option value="234">Financial Services</option><option value="8">Internet</option><option value="9">News and Media</option><option value="10">Shopping</option><option value="237">Telecommunications</option><option value="11">Lifestyle</option><option value="12">Business to Business</option><option value="13">Real estate</option><option value="14">Education</option><option value="15">Entertainment</option><option value="16">Food</option><option value="17">Health and Medical</option><option value="18">Sports</option><option value="19">Home and Garden</option><option value="20">Pets</option><option value="21">Science</option><option value="22">Travel</option><option value="23">Software Downloads</option><option value="239">Credit Reporting</option><option value="244">Charities</option></select></td>
                    <td>
                        <input type="text" value="" id="location" name="location" class="text" />                        <!-- <select id="location_id" name="location_id" class="select"><option value=""></option><option value="54">CANADA</option><option value="173">OTHER</option><option value="174">AUSTRALIA</option><option value="3">USA</option></select> -->
                    </td>
                    <td><select id="zip_miles" name="zip_miles" class="select"><option value="" selected="selected">-</option><option value="5">5</option><option value="10">10</option><option value="25">25</option><option value="50">50</option><option value="100">100</option></select></td>
                    <td><input type="submit" id="submit" name="submit" class="submit" value="Search" /></td>
                </tr>
                <tr>
                    <td valign="top" style="padding-bottom: 15px"><p class="note">Keyword</p></td>
                    <td valign="top" style="padding-bottom: 15px"><p class="note">Specific Category</p></td>
                    <td valign="top" style="padding-bottom: 15px"><p class="note">City and State, or Zipcode</p></td>
                    <td valign="top" style="padding-bottom: 15px"><p class="note">Miles</p></td>
                    <td></td>
                </tr> 
            </table>
        </form>
    </div>

Outer wrapping div completely unneccessary as FORM is a perfectly good container all by itself, inner table non-semantic and just plain the wrong way of building a form, no labels, no fieldsets, no caption, even IF you were to use a table TD STRONG FONT is not only a decade out of date on methodology, it would be incorrect given what the content is and those should just be TH. (again, NOT that it should be a table in the first place). The subtext in the final TR are additional info and barely fragments, as such paragraph is a total waste on them, if they all get the same class you should be styling off the parent element, VALIGN and STYLE again have no place in the markup, neither does the ALIGN attribute…

That’s one giant train wreck of code for what should probably be:


<form action="http://econsumersearch.com/search_results.php" method="get" class="findForm">
	<fieldset>
		<div>
			<label for="keyword">Find:</label>
			<input type="text" value="" id="keyword" name="keyword" class="text" />
			Keyword
		</div><div>
			<label for="category">Category:</label>
			<select id="category" name="category" class="select">
				<option value=""></option><option value="2">Automotive</option><option value="3">Arts</option><option value="4">Business</option><option value="245">Books and Magazines</option><option value="5">Classifieds</option><option value="6">Computers</option><option value="7">Communities</option><option value="234">Financial Services</option><option value="8">Internet</option><option value="9">News and Media</option><option value="10">Shopping</option><option value="237">Telecommunications</option><option value="11">Lifestyle</option><option value="12">Business to Business</option><option value="13">Real estate</option><option value="14">Education</option><option value="15">Entertainment</option><option value="16">Food</option><option value="17">Health and Medical</option><option value="18">Sports</option><option value="19">Home and Garden</option><option value="20">Pets</option><option value="21">Science</option><option value="22">Travel</option><option value="23">Software Downloads</option><option value="239">Credit Reporting</option><option value="244">Charities</option>
			</select>
			Specific Category
		</div><div>
			<label for="location">Location:</label>
			<input type="text" value="" id="location" name="location" class="text" />
			City and State, or Zip Code
		</div><div>
			<label for="zip_miles">Within:</label>
			<select id="zip_miles" name="zip_miles" class="select">
				<option value="" selected="selected">-</option><option value="5">5</option><option value="10">10</option><option value="25">25</option><option value="50">50</option><option value="100">100</option>
			</select>
			Miles
		</div><div class="submit">
			<input type="submit" id="submit" name="submit" class="submit" value="Search" />
		</div>
	</fieldset>
</form>

Float the div’s, MORE than enough hooks to apply all the styling from the CSS, etc, etc… takes that one bit of code from 3.2k to 2.1k, and provides the semantic and accessible tags.