CSS doesn't effect dynamically created list on Phonegap

Question

similar to my question is this one and this one

however, still haven't sorted any solution.. i have in the <body> an unordered list <ul> each element of which is added after performing a query to a database..So according to the result, i have the corresponding <li> tags created..

Ther problem is, that although i have some css to seperate <li> to "odd" and "even" so that i can apply some different styles, and i have confirmed, that the "odd" and even" attibute has passed as an attribute (classname) to <li> still the corresponding css rules, do not apply

here is some of my code.. first the html part

<div id="sqldiv">
   <ul class="test" id="attempt">
    </ul>
</div>

and the javascript part..

        for (var i=0; i<len; i++){
        var somevariable =  results.rows.item(i).dbvariable;
                if (i%2==0)
                lt='Even';
                else
                lt='Odd';
                var newLI = document.createElement("LI"); 
                newLI.className = lt;
                var htmlcontainer = ("<div>my text :" + my variables + "</div><div>my text :</div><div>" my variables + "</div>");
                newLI.innerHTML = htmlcontainer ;
                var gl = document.getElementById("attempt"); 
                gl.appendChild(newLI);
            }

and the css

li {
background: #8258FA;
list-style-type:none;
list-style-image:none;
margin: 5px 5px;
border-radius: 15px;
}
li.odd  {
border-bottom :1px dotted #ccc;
list-style-type:none;
list-style-image:none;
margin: 5px 5px;
background: #000000;
}

the li styling does apply, but the styling by class (li.odd) doesn't

Could you give an example of your code, i.e. what the list looks like and how you update it? — Ryan, Oct 10 '12 at 01:56
It's a lot more efficient to use nth-child selectors to do your zebra striping: `li:nth-child(even) { background: #CCC }` — cimmanon, Oct 10 '12 at 01:59
I would recommend to use jQuery to add classnames etc. There you have no browser specific problems etc. — strauberry, Oct 10 '12 at 13:00
can you be more specific mate..?? what would you change..??? i ve confirmed, that the class name does apply to each list element..it is just that css doesn't apply to it..perhaps due to some difference while loading..!??! — nikolas, Oct 10 '12 at 13:23

score 0 · Accepted Answer · answered Oct 10 '12 at 15:37

after spending last 24 hours searching..i tried sth that didn't cross my mind..!!!!

in javascript i name class Even and Odd..and on css i have .even and .odd rules.. and this worked great on another project..!!!

but, for some reason, in this case there seemed to be a "case sensitive" issue.. since i changed css rule to .Even and .Odd, they were applied successfully..

before reaching this, i had also tried assigning dynamic css rules using jquery..and after some attempts, i ended up to the case sensitive..

CSS doesn't effect dynamically created list on Phonegap

1 Answers1