Javascript Simple Tree Menu Question

[DynamicTextDante]

1) Script Title:
Simple Tree Menu

2) Script URL (on DD):
http://www.dynamicdrive.com/dynamicindex1/navigate1.htm

3) Describe problem:

Hello,
First off, let me just say I love this example. I've been using it on a daily basis for over eight months. But I've always had one problem with it: I can't get the first item in the list to flush left.

A quick look at the example and you'll see what I mean. The options to "expand all" and "contract all" are flushed left. Yet the first item in the list is not. I really need it flushed left to make room for the primary content on my page.

I've tried to change the CSS padding-left and margin-left settings to 0px but to no avail... :(

Does anyone know how to move the list so that its first item is flush against the left margin?

Thanks in advance for any and all help!

[djr33]

From a quick glance at the code, I think you should be able to change the following line in the CSS file:
padding-left: 22px;
Just change 22 to anything you want, such as 0.

[DynamicTextDante]

I've already tried that actually, but thanks for the suggestion.


padding-left: 22px refers to the amount of space each item of the list is indented. Thus item 2 is indented 22px more than item 1, and item 3 is indented 22px more than item 2, etc.

Thus setting the padding to 0 makes each item's beginning position equal to that of item 1's. But that change doesn't affect item 1's beginning position, so the first item still begins where it always began, and that's not at the left margin but several spaces to the right of it.

In other words, while your suggestion makes all the items begin where item 1 currently begins, item 1 doesn't change position and still begins in the wrong place.

Any other ideas?

[djr33]

I'm not sure. But here's something else to try. It may be a default style for the <li>. So just add the following two lines from the <ul> style:
margin: 0;
padding: 0;

to the <li> style in the CSS. Specifically, see if the margin:0 style helps. (Basically this is not part of the script; it's default styling for lists that is set by the browser.)