Solved

Fieldset problem in Firefox and Chrome

Posted on 2008-10-05
1
3,936 Views
Last Modified: 2013-12-08
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&amp;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>

Open in new window

0
Comment
Question by:tcorrigan5
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
1 Comment
 

Accepted Solution

by:
tcorrigan5 earned 0 total points
ID: 22659951
I've answered my own question.

The solution is to add "clear:left;" to the style sheet definition for the class "textareatable".

Explanation: The one cell table containing the textarea solves a known problem in Internet Explorer where textareas embedded in fieldsets expand in width as soon as something is typed into them. Unfortunately Firefox/Chrome don't understand this construct and allow the textarea to overlap the boundary of the fieldset. (Without the table Firefox/Chrome do the right thing.) Adding the "clear:left;" element to the stylesheet entry "textareatable" forces the table to be rendered starting from the fieldset's left margin in all the browsers considered.
0

Featured Post

SuperAntiSpyware Licenses Discounted by 25% !

Exclusive offer to Experts Exchange Members!
Buy SuperAntiSpyware License(s) from us and save 25% on the regular purchase price.
- Includes Full SuperAntiSpyware Vendor Support Entitlements
- Your Subscription does not begin until you activate your license
- Buy for your friends

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Bada platform is becoming more and more famous this days and people talking about same. Some friends included those who have bada OS mobile asked me "what is bada?"and "what its features?". That encouraged me to research and write this article. [st…
I recently found myself in a Corporate Situation where the client had requested blocking access to any and all websites except his own Domain? Easy? I am sure this would be your answer but their requirement was, this has to be done without using…
This Micro Tutorial will demonstrate how to add subdomains to your content reports. This can be very importing in having a site with multiple subdomains.
How to create a custom search shortcut to site-search Experts Exchange using Google in the Firefox browser. This eliminates the need to type out site:experts-exchange.com whenever you want to search the site. Launch your Bookmark Menu: Press 'Ctrl +…

734 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question