odd formatting when appending elements with both jQuery and javascript

Question

I don't understand why my <li> within my <ol> are displaying in this peculiar way. It is happening in both firefox and chrome. Somehow they are not aligning properly. This is happening when I create the elements with both jQuery and JavaScript.

var limit = 10000, wrapper = document.getElementById("vanilla_wrapper"), el;

for (var i = 0; i <= limit; i++){

    jq_wrapper.append("<li></li>");

}

for (var i = 0; i <= limit; i++){

    el = document.createElement("li");
    wrapper.appendChild(el);

}

odd formatting with <li>

Edit JSBIN

Edit 2

Adjusting the padding as suggested still has very odd formatting:

After adjusted padding JSBIN

Try adding `list-style-position: inside;` to your `ol` style. — sbeliv01, Nov 18 '13 at 17:00
Can you replicate in jsfiddle? I ran your code there and it seemed to format fine. — km6zla, Nov 18 '13 at 17:00

score 0 · Answer 1 · answered Nov 18 '13 at 17:03

0

That is because the ol element has a left-padding automatically applied which create the space for the numbering..

It has a default value of 40px so if your numbering text exceeds this, you get that problem..

You can increase it with

ol{
   padding-left: 60px;
}

answered Nov 18 '13 at 17:03

Gabriele Petrioli

191,379
34
261
317

I've adjusted the padding and the formatting is still odd. I made an edit and attached a screenshot. Can you take a look. Thank you. – 1252748 Nov 18 '13 at 17:12
@thomas, If you are talking about the top space and the fact that the red column has less items, then that happens as a protection of JSBIN.. it cuts off long loops that it considers might hang.. add `// noprotect` at the top (http://jsbin.com/uLabiHiY/14) – Gabriele Petrioli Nov 18 '13 at 17:20

score 0 · Answer 2 · answered Nov 18 '13 at 17:03

0

I think you need this

ol {margin: 0; list-style-position: inside; padding: 0;}

answered Nov 18 '13 at 17:03

Michael Aguilar

766
8
16

I've adjusted the padding and the formatting is still bizarre. can you take a look at the edit and attached screenshot and fiddle? Thanks! – 1252748 Nov 18 '13 at 17:11

score 0 · Answer 3 · answered Nov 18 '13 at 17:47

0

Try using this. Add your margin, then make sure it's vertically aligned to the top:

.jq { vertical-align: top }

ol li{
margin-left:20px;
}

answered Nov 18 '13 at 17:47

Xarcell

2,011
6
33
65

score 0 · Answer 4 · edited May 23 '17 at 12:12

Each browser dictates the formatting of the list marker, so you'll have to use browser specific properties to accomplish this. I'm looking into other browsers right now, but in the meantime, this is what I've found for Chrome (webkit):

td {
  padding: 0px; /*Or just remove it...*/
}
ol {
  list-style-position: inside;
  -webkit-padding-start: 0px;
}

The default for -webkit-padding-start is 40px, which is what was throwing off your numbers above 1000. While others have suggested increasing the padding value, this will indent your numbers below 1000 too far and make them look odd. Using the -padding-start property will help keep the numbers in line. Stay tuned for more info on other browsers.

jsbin that works in chrome (I cut your limit down to 1500 just to reduce jsbin's lag): http://jsbin.com/uLabiHiY/18

Edit:

Here is the property for Firefox: -moz-padding-start

and Opera: -o-padding-start

It doesn't appear that IE has one (go figure...) but this link might provide a little insight on how to fix that: -webkit-padding-start: 40px; What it should be for IE and Firefox?

odd formatting when appending elements with both jQuery and javascript

4 Answers4