Drop down box issue in Firefox

[jwhite68]

I have a drop down box for country and district defined as:

 

<div class="d841"><strong>  02. Where is it located?</strong></div>
			<div class="t841" id="loc">
				<table border="0" cellspacing="0" class="formcontent">
					<tr>
						<td class="right1">Country</td>
						<td>

							<select name="country" onchange="setOptions(document.forms[2].country.options[document.forms[2].country.selectedIndex].value);">
								<option value="" selected="selected">Select country</option>
								<option value="us">United States</option><option value="ca">Canada</option><option 								</select>

						</td>
						<td class="right1">District</td>
						<td>
							<select name="district">
								<option value="" selected="selected">Select country</option>									
							</select>
						</td>
						<td class="right1">Town/Village</td>

						<td><input type="text" name="town" id="town" value="" /></td>
					</tr>
				</table>
			</div>

 

The formcontent class has the following settings in a css file:

 

table.formcontent submit,select{
width: 210px;  /* this controls the drop down boxes on advanced page and was 135 initially */
}
table.formcontent input{
width: 135px;  /* this controls the text boxes on advanced page and was initially merged with formcontent for submit and select above */
}

 

The problem is that the drop down box is the right width (210) when its selected. But when the drop down box is displayed, its at a size of 135.

 

In Internet Explorer, setting the submit and select properties of formcontent to 210, actually makes it work for both display and submit.

 

Does anyone have any ideas?  I just dont get why it works perfectly for IE and not for Firefox.

I have heard so many bad things against IE - but in my eyes its Firefox that seems to have all the problems.

[soycharliente]

table.formcontent submit, table.formcontent select

 

Give the parent for both?