[Javascript] The Non-Breaking Space of Doom

[Paul Novitski]

At 08:16 PM 1/9/2006, Andrew Crawford wrote:
>Item-1
> Item-1.1
> Item-1.2
>  Item-1.2.1
>Item-2
> Item-2.1

Andrew,

Without seeing more of your script I can't tell why it's outputting 
& for &.  Can you share more of it, ideally in a live demo page?

However, I would argue for an entirely different approach: instead of 
attempting to paint a particular visual appearance in HTML using 
non-breaking spaces, I recommend that you output 
semantically-meaningful HTML which you then style separately with CSS.

Here's how I'd mark up your example (probably augmented by some ids & 
class names):

<ul>
   <li>Item-1
     <ul>
       <li>Item-1.1</li>
       <li>Item-1.2
         <ul>
           <li>Item-2.1</li>
         </ul>
       </li>
     </ul>
   </li>
</ul>

In other words, a set of nested unordered lists.  Using CSS you can 
style these in an amazing variety of ways, including the simple 
indenting you're attempting now.  In contrast, your &nbsp; approach 
leaves you with little or no flexibility when it comes time to change 
the menu's appearance.   Separating structure (HTML) from 
presentation (CSS) from behavior (JavaScript) can improve work 
quality and greatly speed future modifications.

It looks like you know enough JavaScript to output a nested list 
structure, but let us know if you need a hand.

Here's a cool site about styling lists as menus:
http://css.maxdesign.com.au/

To illustrate the many ways that CSS can style a single page of HTML 
markup, check out the CSS Zen Garden:
http://csszengarden.com/

An excellent CSS listserve is CSS-D:
http://lists.css-discuss.org/mailman/listinfo/css-d

Regards,
Paul