Rendering a hierarchy of “OPTION”s in a “SELECT” t

Question

My problem is HTML and CSS related. I have a hierarchy type structure that I want to display inside a list. The hierarchy contains Countries, States and Cities (it is three levels deep).

I want to display the list inside a select list, each item type (Country, State, City) must be selectable. The items should appear indented as:

United States
- Hawaii
-- Kauai
- Washington
-- Seattle
-- Chelan

The problem is with the indentation. I am trying to use either margin-left or padding-left to indent the tags, which appear correct in FireFox but not in IE7. This is an example of the generated select list:

<select name="Something">
<option style="padding-left: 0">United States</option>
<option style="padding-left: 20px">Hawaii</option>
<option style="padding-left: 40px">Kauai</option>
<option style="padding-left: 20px">Washington</option>
<option style="padding-left: 40px">Seattle</option>
<option style="padding-left: 40px">Chelan</option>
</select>

I want to achieve consistent indentation across browsers without using CSS hacks.

Answer 1

Isn't this method of grouping creating more problems than it solves? As a user, which of those am I supposed to choose? Is there any benefit to choosing something more specific than country?

If the issue is that you only have one database field to store them in, why not have three separate select boxes (making 2 or 3 optional) and just store the most specific?:

<select name="country">
    <option>Choose a country</option>
    <option>United States</option>
</select>
<select name="state">
    <option>Choose a state</option>
    <option>Hawaii</option>
</select>
<select name="city">
    <option>Choose a city</option>
    <option>Kauai</option>
</select>