Home/ Questions/Q 309913
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-12T07:47:07+00:00

My problem is HTML and CSS related. I have a hierarchy type structure that

  • 0

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.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    deceze way is much better and was my first idea. As an alternative if that doesn’t work is that you can use non-breaking spaces in the tag value:

    <select>
    <option>select me</option>
    <option>&nbsp;me indented</option>
    <option>&nbsp;&nbsp;even more indentation</option>
</select>

    It’s far from pretty but it might work for you if the optgroup doesn’t.

    • 0