Renderizando uma hierarquia de “OPTION” em uma tag “SELECT”
Meu problema é relacionado a HTML e CSS. Eu tenho uma estrutura de tipo de hierarquia que quero exibir dentro de uma lista. A hierarquia contém Países, Estados e Cidades (tem três níveis de profundidade).
Eu quero exibir a lista dentro de uma lista de seleção, cada tipo de item (país, estado, cidade) deve ser selecionável. Os itens devem aparecer recuados como:
United States
- Hawaii
-- Kauai
- Washington
-- Seattle
-- Chelan
O problema é com o recuo. Eu estou tentando usar margin-left ou padding-left para indentar as tags, que aparecem corretas no FireFox, mas não no IE7. Este é um exemplo da lista de seleção gerada:
<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>
Eu quero conseguir um recuo consistente nos navegadores sem usar hacks de CSS.