Add new 'li' dynamically adds indentation in IE

Anat · May 15, 2006

Hi,
i need to add another "li" element to a list.
The "li" should be with 0 indentation.
When I statically write it (HTML/CSS), with ul/li margin/padding 0 - it
looks great.
When I dynamically add it (Javascript) - in IE (and not FF) it's ALWAYS
indented, no matter what!!

This is my javascript code:
var newLiElement = document.createElement('li');
newLiElement.style.padding = '0px';
newLiElement.style.margin = '0px';

List.appendChild(newLiElement);

newLiElement.parentNode.style.padding = '0px'; //even tried to update
the "ul" father node
newLiElement.parentNode.style.margin = '0px';

Even though - the div in IE looks like this:

List Header
first li
second li

But in FF the div looks like this (and this is the right scenario):
List Header
first li
second li

I event tried to define a new class with padding and margin 0 and use
newLiElement.className = 'no-padding-maring-class-name';
but it's still indented in IE.

How do I fix the IE to make it work???

Thanks, Anat.

Ian Collins · May 15, 2006

Anat said:
Hi,
i need to add another "li" element to a list.
The "li" should be with 0 indentation.
When I statically write it (HTML/CSS), with ul/li margin/padding 0 - it
looks great.
When I dynamically add it (Javascript) - in IE (and not FF) it's ALWAYS
indented, no matter what!!

This is my javascript code:
var newLiElement = document.createElement('li');
newLiElement.style.padding = '0px';
newLiElement.style.margin = '0px';

List.appendChild(newLiElement);

newLiElement.parentNode.style.padding = '0px'; //even tried to update
the "ul" father node
newLiElement.parentNode.style.margin = '0px';

Even though - the div in IE looks like this:

List Header
first li
second li

But in FF the div looks like this (and this is the right scenario):
List Header
first li
second li

I event tried to define a new class with padding and margin 0 and use
newLiElement.className = 'no-padding-maring-class-name';
but it's still indented in IE.

How do I fix the IE to make it work???

I don't know, I've never seen the problem and I script a lot of lists.
But I always set the styles in css, not in the script. Try a css rule
with 0 margin and padding for the parent ul, that should work.

Anat · May 16, 2006

Thanks Ian, but my CSS already contains margin and padding 0.
That's the reason that my static HTML/CSS list looks OK, whereas when I
add a list-entry dynamically it is wrongfully indentated in IE.
Any ideas?
Anat.

ASM · May 16, 2006

Anat a écrit :

Thanks Ian, but my CSS already contains margin and padding 0.
That's the reason that my static HTML/CSS list looks OK, whereas when I
add a list-entry dynamically it is wrongfully indentated in IE.
Any ideas?
Anat.

I've tried with my IE Mac and it is ok :

<html>
<script type="text/javascript">
var lix = 0;
function newli() {
where = document.getElementById('ici');
var newput = document.createElement('LI');
newput.id = 'put_'+lix;
newput.innerHTML = 'li added number = '++(1+lix*1);
where.appendChild(newput);
lix++;
}
</script>
<style type="text/css" media="all">
#ici li { margin: 0; padding: 0; color:red;}
</style>
<ol id="ici">
<li>example
<li><a href="#" onclick="newli();return false;">add li</a>
</ol>
</form>
<html>

Working on mobile css menu with plenty of frustration!	2	Dec 29, 2022
Dropdown menu in a fixed navbar	2	Apr 1, 2024
I need help fixing my website	2	Oct 15, 2023
Need help with code on website (noob)	2	Jul 18, 2022
Help with Visual Lightbox: Scripts	2	May 3, 2023
Recreating CNN.com	4	Aug 7, 2017
Justify-content not working	1	Mar 29, 2021
Is it possible an iframe can overlapp another?	3	Apr 20, 2022

Add new 'li' dynamically adds indentation in IE

Anat

Ian Collins

Anat

ASM

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads