Renderowanie hierarchii „OPTION” s w znaczniku „SELECT”

Moim problemem jest HTML i CSS. Mam strukturę hierarchiczną, którą chcę wyświetlić na liście. Hierarchia zawiera Kraje, Państwa i Miasta (ma trzy poziomy głębokości).

Chcę wyświetlić listę na liście wyboru, każdy typ elementu (Kraj, Stan, Miasto) musi być możliwy do wyboru. Elementy powinny wyglądać na wcięte jako:

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

Problem polega na wcięciu. Próbuję użyć marginesu w lewo lub dopełnienia w lewo do wcięcia znaczników, które wyglądają poprawnie w FireFox, ale nie w IE7. Oto przykład wygenerowanej listy wyboru:

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

Chcę osiągnąć spójne wcięcia w przeglądarkach bez używania hacków CSS.

questionAnswers(6)

yourAnswerToTheQuestion