<FORM> width misbehaves; there's something here I don't understand

11 views
Skip to first unread message

John L.

unread,
Jun 13, 2012, 11:17:45 AM6/13/12
to css-d...@googlegroups.com
I'm trying to create a simple form, and the width default takes up the entire page width. I seem to recall having this problem before; however, previous posts aren't retained long enough that I can locate the answer.
 
Rather than hard-code a width to fit, which CSS attribute(s) can I use to "trim" the width of the form?
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="
http://www.w3.org/1999/xhtml">
<body>
<style>
.dataEntryForm { padding-right : 0px; background-color : grey; border-style : groove; border-color : #98bf21; border-width : medium; }
option { padding-right : 0px; }
</style>
<form name="setValues" action="." class="dataEntryForm">
<table>
<tr><td>Start Month:</td><td><select name="month">
<option value=" ">
<option value="Jan">Jan
</select></td></tr>
</table>
</form>
</body>
</html>
 
Thanks in advance for any help you can provide.

MiB

unread,
Jun 13, 2012, 6:25:42 PM6/13/12
to css-d...@googlegroups.com

13 jun 2012 17.17 John L.:

Rather than hard-code a width to fit, which CSS attribute(s) can I use to "trim" the width of the form?

A classic is to put percentage margins on the outmost element of the section. like 

.dataEntryForm {margin-left:25%;, margin-right:25%;}

The same value will center the element which may not have a specific width.
Reply all
Reply to author
Forward
0 new messages