I don’t know what the problem is, but I’m building a pretty big form and using fieldsets, legends and labels for the first time. Let me just say that they are a freakin’ nightmare! I have 2 fieldsets on one page and the first one is fine in IE but the second one keeps stretching too far wide. It’s disasterous in Firefox as well, but completely different, almost opposite than IE.
The page is http://www.tsiezreg.com/meetingmanagerdev/mm/mm.cfm. Click on “start meeting” to see what I’m talking about. Below is my CSS:
#container {padding:35px 35px 35px 35px; background-color:white;}
fieldset {float:left; clear: both; width: 100%; margin: 0 0 1.5em 0; padding: 0; border: 1px solid #BFBAB0; background-color:transparent; position:relative; background-image: url(images/fieldset_bkgrnd.jpg); background-repeat: repeat-x; background-position:bottom;}
fieldset ol {padding: 1em 1em 0 1em; list-style-type:none;}
fieldset li {float: left; clear: left; width: 100%; padding-bottom: 1em;}
fieldset.submit {float: none; width: auto; border-style: none; padding-left: 0px; text-align:center; background-color: transparent; background-image: none;}
legend {position:relative; left:-7px; top:-0.75em; margin-left:1em; padding:0px; color:#5c5e5e; font-weight:bold;}
label {float: left; width: 15em; margin: 0 1em 0 1em; text-align: right; font-family:Arial, Helvetica, sans-serif; color:#5c5e5e; font-size:12px;}
If you have any ideas on how to fix this I’d appreciate it. Thanks!
