No replies
thompsb
Offline
newbie
Last seen: 13 years 48 weeks ago
Joined: 2008-10-24
Posts: 1
Points: 0

Hi all,

I've looked around for a while for an answer to this seemingly simple question but I've yet to find the solution.
I have a hierarchy of geographical regions that I offer in a select drop down. The data I receive is indented with white space to make the hierarchy more 'obvious' to the end user but when I view this in Firefox and Midori (WebKit) on Ubuntu all the white space is stripped out from the drop down (it is present in the code - see below). The posts I could find around the web said to specify the white-space preserve class in css but it doesn't seem to work (or I've made a mistake of course Wink )

So, in a nutshell... how do I preserve the whitespace to be displayed in the drop down?

Many thanks for any help.
- Ben

From the css file.
.preserve_ws {
	white-space: pre;
}
 
<select name="regionSelect" id="regionSelect" onchange="this.form.submit()">
<option value="0" selected="selected">Select a region to restrict on</option>
<option value="ALL REGIONS" class="preserve_ws">ALL REGIONS</option>
<option value="AFRICA" class="preserve_ws">  AFRICA</option>
<option value="EASTERN AFRICA" class="preserve_ws">    EASTERN AFRICA</option>
<option value="MIDDLE AFRICA" class="preserve_ws">    MIDDLE AFRICA</option>
<option value="NORTHERN AFRICA" class="preserve_ws">    NORTHERN AFRICA</option>
<option value="SOUTHERN AFRICA" class="preserve_ws">    SOUTHERN AFRICA</option>
<option value="WESTERN AFRICA" class="preserve_ws">    WESTERN AFRICA</option>
<option value="AMERICAS" class="preserve_ws">  AMERICAS</option>
<option value="NORTHERN AMERICA" class="preserve_ws">    NORTHERN AMERICA</option>
<option value="LATIN AMERICA AND CARIBBEAN" class="preserve_ws">    LATIN AMERICA AND CARIBBEAN</option>
<option value="CARIBBEAN" class="preserve_ws">      CARIBBEAN</option>
<option value="CENTRAL AMERICA" class="preserve_ws">      CENTRAL AMERICA</option>
<option value="SOUTH AMERICA" class="preserve_ws">      SOUTH AMERICA</option>
<option value="EUROPE" class="preserve_ws">  EUROPE</option>
<option value="EASTERN EUROPE" class="preserve_ws">    EASTERN EUROPE</option>
<option value="NORTHERN EUROPE" class="preserve_ws">    NORTHERN EUROPE</option>
<option value="SOUTHERN EUROPE" class="preserve_ws">    SOUTHERN EUROPE</option>
<option value="WESTERN EUROPE" class="preserve_ws">    WESTERN EUROPE</option>
<option value="ASIA" class="preserve_ws">  ASIA</option>
<option value="CENTRAL ASIA" class="preserve_ws">    CENTRAL ASIA</option>
<option value="EASTERN ASIA" class="preserve_ws">    EASTERN ASIA</option>
<option value="SOUTHERN ASIA" class="preserve_ws">    SOUTHERN ASIA</option>
<option value="SOUTH-EASTERN ASIA" class="preserve_ws">    SOUTH-EASTERN ASIA</option>
<option value="WESTERN ASIA" class="preserve_ws">    WESTERN ASIA</option>
<option value="OCEANIA" class="preserve_ws">  OCEANIA</option>
<option value="AUSTRALIA AND NEW ZEALAND" class="preserve_ws">    AUSTRALIA AND NEW ZEALAND</option>
<option value="MELANESIA" class="preserve_ws">    MELANESIA</option>
<option value="MICRONESIA" class="preserve_ws">    MICRONESIA</option>
<option value="POLYNESIA" class="preserve_ws">    POLYNESIA</option>
</select>