title: Rendering a hierarchy of "OPTION"s in a "SELECT" tag
body: <p>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).</p>
  
  <p>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:</p>
  
  <pre><code>United States
  - Hawaii
  -- Kauai
  - Washington
  -- Seattle
  -- Chelan
  </code></pre>
  
  <p>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:</p>
  
  <pre><code>&lt;select name="Something"&gt;
  &lt;option style="padding-left: 0"&gt;United States&lt;/option&gt;
  &lt;option style="padding-left: 20px"&gt;Hawaii&lt;/option&gt;
  &lt;option style="padding-left: 40px"&gt;Kauai&lt;/option&gt;
  &lt;option style="padding-left: 20px"&gt;Washington&lt;/option&gt;
  &lt;option style="padding-left: 40px"&gt;Seattle&lt;/option&gt;
  &lt;option style="padding-left: 40px"&gt;Chelan&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p>I want to achieve consistent indentation across browsers without using CSS hacks.</p>