CODEWITHSUNDEEP
javascript
Dymond
Dymond

Reputation: 2277

Add a space between ul and li element created by JavaScript

Been struggling with a problem now.

I have a list that behaves quite weird, and couldt find the problem until i firebugd it and saw that the entire file prints out in one row.

something like this.

<div class="clock-content-wrapper"><ul class="clock-digit-wrapper hour"><li class="clock-digit-one"></li><li class="clock-digit-three"></li></ul><ul class="clock-digit-wrapper minute"><li class="clock-digit-three"></li><li class="clock-digit-seven"></li></ul><ul class="clock-digit-wrapper second"><li class="clock-digit-zero"></li><li class="clock-digit-zero"></li></ul></div>

There is no spaces between the elements.

Now i didn't know that could be a problem so i started to fix the elements in firebug like this.

<div class="clock-content-wrapper">
<ul class="clock-digit-wrapper hour">
<li class="clock-digit-one"></li>
<li class="clock-digit-three"></li>
</ul>
<ul class="clock-digit-wrapper minute">
<li class="clock-digit-three"></li>
<li class="clock-digit-seven"></li>
</ul>
<ul class="clock-digit-wrapper second">
<li class="clock-digit-zero"></li>
<li class="clock-digit-zero"></li>
</ul>
</div>

And notice that if i have the </ul> element under my </li> the script actually works at it supposed to.

Is there a way to structure the file with javascript ? I have a jsFiddle, where you can se the differens between the tree created in HTML and the one with JavaScript. http://jsfiddle.net/Xk49c/

I really dont want to change anything in the css . since both html and js application is using the same css .

Upvotes: 2

Views: 1390

Answers (2)

Salman
Salman

Reputation: 9447

The problem is, when you create the elements using HTML, you indent or separate the elements with one or more spaces, or even new lines. HTML renders these spaces as ONE single space and so you see the space between those elements.

To add spaces between elements created by JavaScript, either you ll have to add a padding left to minute and second class, or insert a text node between each UL

hours = createElementWithClass('ul', 'clock-digit-wrapper hour');
clock_toolbar_wrapper_close.appendChild(hours);
clock_toolbar_wrapper_close.appendChild(document.createTextNode(' ')); // Add this


minutes = createElementWithClass('ul', 'clock-digit-wrapper minute');
clock_toolbar_wrapper_close.appendChild(minutes);
clock_toolbar_wrapper_close.appendChild(document.createTextNode(' ')); // And this

Upvotes: 1

ajp15243
ajp15243

Reputation: 7960

Your <ul> elements are displayed as inline-block in your fiddle. I suspect they are suffering from this little-known feature of inline-block.

Upvotes: 4

Related Questions