Keep all child nodes indented in unordered list

Question

I'm trying to do something similar to http://www.lukew.com/ff/content/simpletable1.gif . I created my structure like this.

<ul>
    <li>Outages:
        <ul>
            <li>1 Forced</li>
            <li>1 Planned</li>
        </ul>
    </li>
    <li>Customers:
        <ul>
            <li>N/A</li>
        </ul>
    </li>
    <li>Equipment:
        <ul>
            <li>1 Breakers</li>
            <li>1 Transformers</li>
        </ul>
    </li>
</ul>

This is my CSS.

ul li ul {
    background: #DDD;
    margin: -20px 0 0 75px;
}

I have tried using a definition list however only the first definition () would be aligned properly. The other definitions would not obey the left margin. Why don't the children ul nodes not get indented on the BB browser? I'm using the 8330 (v4.3) simulator but would preferably like a solution that works across all BB browsers.

Thank you.

Answer 1

I created jsbin example with you code http://jsbin.com/unaxu3

I think margin do not work on 3.8 to 4.5

In BlackBerry Device Software version 3.8 to 4.5, the BlackBerry Browser provides partial support for WAP CSS.

The BlackBerry Browser supports the following CSS models:

* Box model
      o Border properties (introduced in BlackBerry Device Software version 3.8)
      o Padding properties (introduced in BlackBerry Device Software version 4.3)

read here http://docs.blackberry.com/en/developers/deliverables/11844/Feature_CSS_512751_11.jsp

4.6 or later supports margin