In CHADIS, we had a requirement to indent certain <option> elements within a <select> dropdown list. Until recently, only team administrators had to use these pages, so we just made it work in Mozilla Firefox and left the other browsers out in the cold. Now that we have some new features that need this capability, I decided to write-up a quick page to demonstrate each technique we tried and how each browser renders them. You can see the investigation and results below. Enjoy.
Update (2009-06-29): Andreas Stieger points out that <optgroup> is an possibility, here. Unfortunately, for our purposes, we needed multiple levels of indentation and the options must be selectable. <optgroup>, while easy to implement and relatively consistent rendering across browsers, fails to meet these criteria.
This first dropdown uses only CSS to attempt to indent the select options. Also, CSS bold property is being used to style the top-level items while italics are used to style the second-level items. This ideal rendering was produced by Mozilla Firefox 3.0.6 with no alterations.
This is how your browser renders the HTML for this technique. View the source to see exactly how it’s done.
Top-level item First-level item First-level item Second-level item Top-level item First-level item First-level item Second-level item
This next dropdown uses nonbreaking space ( ) characters to indent the sub-items. The bold and italic items from the previous attempt are being left in place. Three characters for each level of indentation seem to look the best on most browsers. This ideal rendering was produced by Mozilla Firefox 3.0.6 with no alterations.
This is how your browser renders the HTML for this technique. View the source to see exactly how it’s done.
Top-level item First-level item First-level item Second-level item Top-level item First-level item First-level item Second-level item
Now, em dashes (—) are used for indentation instead of nonbreaking spaces, along with a trailing standard space. Bold and italics are still in place. This ideal rendering was produced by Mozilla Firefox 3.0.6 with no alterations.
This is how your browser renders the HTML for this technique. View the source to see exactly how it’s done.
Top-level item — First-level item — First-level item —— Second-level item Top-level item — First-level item — First-level item —— Second-level item
Now, the em dashes (—) used for indentation are being styled as white-on-white, so they should disappear. Bold and italics are done using <i> and <b> tags. This ideal rendering was produced by rendering the previous strategy in Mozilla Firefox 3.0.6 and removing the dashes by hand.
This is how your browser renders the HTML for this technique. View the source to see exactly how it’s done.
Top-level item — First-level item — First-level item —— Second-level item Top-level item — First-level item — First-level item —— Second-level item
After trying these techniques on the major web browsers, here’s what I found:
| Browser | CSS | nbsp | mdash | white mdash (<style>) | CSS bold/italic | <b>/<i> |
|---|---|---|---|---|---|---|
| Microsoft Internet Explorer | no | yes | yes | no | no | no |
| Mozilla Firefox | yes | yes | yes | no | yes | no |
| Opera | no | yes | yes | no | no | no |
| Apple Safari | no | yes | yes | no | no | no |
| Google Chrome | no | yes | yes | no | yes | no |
| Konqueror | no | no | no | no | no |
Looks like using &nbsp; is the best solution for all browsers, and using CSS styling will enhance the display for certain browsers but not interfere with others.
Updated 2009-02-13: Added Konqueror info.
Your Catchphrase Here 