473,386 Members | 2,114 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,386 software developers and data experts.

Add new 'li' dynamically adds indentation in IE

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.

May 15 '06 #1
3 2268
Anat wrote:
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.

--
Ian Collins.
May 15 '06 #2
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.

May 16 '06 #3
ASM
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>

--
Stephane Moriaux et son [moins] vieux Mac
May 16 '06 #4

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

7
by: Jeff Thies | last post by:
I'm trying to do a nav list using list items. Roughly this is putting links styled display: block and with a background color. In IE5 (windows, haven't tried Mac yet), adding the display:...
8
by: Udo Marx | last post by:
Hello to ciwas! Is there a way to change the bullet form, color, etc, of the element <li> under<ul> via css? Any reply will be appreciated. -- Freundliche Gruesse, Netzteil - Udo Marx...
5
by: Joakim Braun | last post by:
I'd like to show tree structures using collapsible multi-level nested <ul> lists (with open/closed "disclosure triangles" as list-style-images). Something like this: <ul> <li...
13
by: windandwaves | last post by:
Hi Folk Just a bit of help here for newbies who want their menus to look nicer. I am sure that many of you make menus like this <ul id="menu"> <li><a href="page1.html">option 1</a></li>...
6
by: Steve Booth | last post by:
I have a web form with a button and a placeholder, the button adds a user control to the placeholder (and removes any existing controls). The user control contains a single button. I have done all...
6
by: mno | last post by:
Hi all, I have a problem that I've been stuck with for the last couple of days that's driving me a bit more than crazy at this point. Sorry if this message is not very clear. I have a design...
21
by: Leena P | last post by:
i want to basically take some information for the product and let the user enter the the material required to make this product 1.first page test.php which takes product code and displays...
3
by: MLD | last post by:
PLEASE HELP! I would like to include a UL as a menu, styled by an included CSS Style Sheet. The problem I am having is how do I dynamically set the "active" page class using JavaScript to...
5
omerbutt
by: omerbutt | last post by:
hi all, i have a menu based on <ul> and <li> it is working fine on mozilla all versions IE 6 and 7 all versions and google chrome ver 2.0.172.31 , the only problem is occuring is with the IE8 here...
0
by: taylorcarr | last post by:
A Canon printer is a smart device known for being advanced, efficient, and reliable. It is designed for home, office, and hybrid workspace use and can also be used for a variety of purposes. However,...
0
by: ryjfgjl | last post by:
If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...
0
by: ryjfgjl | last post by:
In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...
0
by: emmanuelkatto | last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel
0
BarryA
by: BarryA | last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
1
by: nemocccc | last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
0
by: Hystou | last post by:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
0
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...
0
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.