Drop down issue in Firefox (works fine in IE)

[jwhite68]

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

<div class="d841"><strong>&nbsp;&nbsp;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.

 

[monksnake]

The problem is right here:

table.formcontent submit, [!]table.formcontent[/!] select{
    width: 210px;  /* this controls the drop down boxes on advanced page and was 135 initially */
}

Add what is in red.

<.

 

[feherke]

Hi

Before blaming a standard compliant browser, let us see what you have. Because I see problems.

[gray]// What is that empty space ?[/gray]
<option value="us">United States</option><option value="ca">Canada</option><option[highlight red]                                 [/highlight]</select>

[gray]// What is "submit" ?[/gray]
table.formcontent [red]submit[/red],select{
    width: 210px;  /* this controls the drop down boxes on advanced page and was 135 initially */
}

Feherke.

http://rootshell.be/~feherke/

 

[monksnake]

oh man oh man, I completely missed that

table.formcontent [!]submit[/!]

<.

 

[jwhite68]

The empty space is deliberate as I didnt paste all the countries in the listing, to avoid having too large a code section in this forum.

I am not so clear on what the 'submit' is for, as this was added in the css by another programmer - but its not specifically relevant to this problem anyway.

The advice worked, so thanks to all.