Моя проблема связана с HTML и CSS. У меня есть структура типа иерархии, которую я хочу отобразить в списке. Иерархия содержит страны, государства и города (это три уровня).

Я хочу отобразить список внутри списка выбора, каждый тип элемента (Страна, Штат, Город) должен быть доступен для выбора. Элементы должны иметь отступы:

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

Проблема с отступом. Я пытаюсь использовать margin-left или padding-left для отступа тегов, которые отображаются правильно в FireFox, но не в IE7. Это пример сгенерированного списка выбора:

<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>

Я хочу добиться единообразного отступа в разных браузерах без использования CSS-хаков.