tcorrigan5
asked on
Fieldset problem in Firefox and Chrome
Running the attached code in IE6/IE7 renders the textarea under the line "If yes, please explain" and the textarea is inside the fieldset boundaries, which is what I want. In Firefox and Chrome the textarea renders to the right of the "If yes" text and overshoots the right side of the fieldset box. Can anyone suggest how to make this form render properly in Firefox?
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1"><title>
Test
</title>
<style>
body
{
font-family: sans-serif;
}
.errormsg
{
font-size:1em;
font-style:italic;
}
span.comment
{
font-size: 0.8em;
font-style:italic;
}
h2
{
font-size:1.2em;
font-weight:bold;
}
input
{
background-color:#FFFF80;
}
input.checkbox
{
background-color:#FFFFFF;
}
select
{
background-color:#FFFF80;
}
fieldset
{
margin: 1.5em 0 0 0;
padding: 0.5em;
}
legend
{
margin-left: 1em;
color: #000000;
font-weight:bold;
}
fieldset ol
{
margin:0;
padding:1em 1em 0 1em;
list-style:none;
}
fieldset li
{
padding-bottom: 1em;
}
.textareatable
{
width:88%;
padding:0px;
}
td
{
padding-right:0px;
margin:0px;
}
textarea
{
width:90%;
background-color:#FFFF80;
height:84px;
padding:0px;
}
label
{
float:left;
width:12em;
margin-left:0;
margin-right:1em;
margin-bottom:1em;
}
label.checkbox
{
float:none;
width:12em;
margin-left:1em;
}
label.question
{
float:left;
width:28em;
margin-right:1em;
}
.smoking
{
width:30em;
margin-right:1em;
} </style>
</head>
<body>
<div style="width:800">
<form name="ctl00" method="post" action="Default.aspx" id="ctl00">
<div>
<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwULLTE2NzY3NjA5MjhkGAMFHl9fQ29udHJvbHNSZXF1aXJlUG9zdEJhY2tLZXlfXxYIBT9XaXphcmQxJFN0YXJ0TmF2aWdhdGlvblRlbXBsYXRlQ29udGFpbmVySUQkU3RhcnROZXh0SW1hZ2VCdXR0b24FPFdpemFyZDEkU3RhcnROYXZpZ2F0aW9uVGVtcGxhdGVDb250YWluZXJJRCRDYW5jZWxJbWFnZUJ1dHRvbgVFV2l6YXJkMSRGaW5pc2hOYXZpZ2F0aW9uVGVtcGxhdGVDb250YWluZXJJRCRGaW5pc2hQcmV2aW91c0ltYWdlQnV0dG9uBT1XaXphcmQxJEZpbmlzaE5hdmlnYXRpb25UZW1wbGF0ZUNvbnRhaW5lcklEJEZpbmlzaEltYWdlQnV0dG9uBT1XaXphcmQxJEZpbmlzaE5hdmlnYXRpb25UZW1wbGF0ZUNvbnRhaW5lcklEJENhbmNlbEltYWdlQnV0dG9uBUFXaXphcmQxJFN0ZXBOYXZpZ2F0aW9uVGVtcGxhdGVDb250YWluZXJJRCRTdGVwUHJldmlvdXNJbWFnZUJ1dHRvbgU9V2l6YXJkMSRTdGVwTmF2aWdhdGlvblRlbXBsYXRlQ29udGFpbmVySUQkU3RlcE5leHRJbWFnZUJ1dHRvbgU7V2l6YXJkMSRTdGVwTmF2aWdhdGlvblRlbXBsYXRlQ29udGFpbmVySUQkQ2FuY2VsSW1hZ2VCdXR0b24FB1dpemFyZDEPEGQUKwABZmZkBRdXaXphcmQxJFdpemFyZE11bHRpVmlldw8PZGZknOuZY7C++i/2hqqkoiZWnKhWlqA=" />
</div>
<script type="text/javascript">
//<![CDATA[
var theForm = document.forms['ctl00'];
if (!theForm) {
theForm = document.ctl00;
}
function __doPostBack(eventTarget, eventArgument) {
if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
theForm.__EVENTTARGET.value = eventTarget;
theForm.__EVENTARGUMENT.value = eventArgument;
theForm.submit();
}
}
//]]>
</script>
<div>
<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWCALn9v2xCgKxvvrJAwK9jvD+DQKv9dm5AwK1463CDwK0qZO/AwKB78HWDwLu6JTkB7cv5iOtkYuLkCki7kqL7Qc9ItrM" />
</div>
<table cellspacing="0" cellpadding="0" border="0" id="Wizard1" style="height:766px;width:800px;border-collapse:collapse;">
<tr>
<td valign="top" style="height:100%;width:200px;"><a href="#Wizard1_SkipLink"><img alt="Skip Navigation Links." height="0" width="0" src="/WebTest/WebResource.axd?d=wXOq9Zrr2_cpmQc2xHJcIQ2&t=633546544655467500" style="border-width:0px;" /></a><table id="Wizard1_SideBarContainer_SideBarList" cellspacing="0" border="0" style="border-collapse:collapse;">
<tr>
<td style="font-weight:bold;"><a id="Wizard1_SideBarContainer_SideBarList_ctl00_SideBarButton" href="javascript:__doPostBack('Wizard1$SideBarContainer$SideBarList$ctl00$SideBarButton','')">Availability</a></td>
</tr>
</table><a id="Wizard1_SkipLink"></a></td><td style="height:100%;"><table cellspacing="0" cellpadding="0" border="0" style="height:100%;width:100%;border-collapse:collapse;">
<tr style="height:100%;">
<td valign="top">
<fieldset>
<legend>Availability</legend>
<ol>
<li>
<label for="transportation" class="question">Do you have transportation available to you each day?</label>
<select name="Wizard1$transportation" id="Wizard1_transportation">
<option value=""></option>
<option value="yes">Yes</option>
<option value="no">No</option>
</select>
</li>
<li>
<label for="bus" class="question">Are you willing to meet a camp bus wherever we need you to?</label>
<select name="Wizard1$bus" id="Wizard1_bus">
<option value=""></option>
<option value="yes">Yes</option>
<option value="no">No</option>
</select>
</li>
<li>
<label for="housing" class="question">If you do not live in the Chicago area, do you have alternate housing available (i.e., friend, relative)?</label>
<select name="Wizard1$housing" id="Wizard1_housing">
<option value=""></option>
<option value="yes">Yes</option>
<option value="no">No</option>
</select>
</li>
<li>
<label for="conflict" class="question">Will you be attending Summer School, working another job, or participating in any extra-curricular activities that would conflict with the camp season? (June 15 - August 14)</label>
<select name="Wizard1$conflict" id="Wizard1_conflict">
<option value=""></option>
<option value="yes">Yes</option>
<option value="no">No</option>
</select>
</li>
<li>
<label for="conflictexp">If yes, please explain:</label>
<table class="textareatable"><tr><td>
<textarea name="Wizard1$conflictexp" id="Wizard1_conflictexp" rows="5" cols="80"></textarea>
</td></tr></table>
</li>
</ol>
</fieldset>
</td>
</tr><tr>
<td align="right"><table cellspacing="5" cellpadding="5" border="0">
<tr>
<td align="right"><input type="submit" name="Wizard1$FinishNavigationTemplateContainerID$FinishButton" value="Finish" id="Wizard1_FinishNavigationTemplateContainerID_FinishButton" /></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table>
</form>
</div>
</body>
</html>
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.