If this is your first visit, be sure to
check out the FAQ by clicking the
link above. You may have to register
before you can post: click the register link above to proceed. To start viewing messages,
select the forum that you want to visit from the selection below.

Problem Nesting elements with same class name

When the code below is loaded into a browser, the DOM gets built incorrectly. Specifically, the final }); text node does not appear inside the code element it belongs to, but rather as a sibling within the p element. I can fix it by simply changing the class name of the innermost code elements from "new" to "new2", or by removing them altogether. This indicates to me that there must be some kind of limit on nesting tags of the same class, but I can`t find a reference to this phenomenon anywhere else.

It appears you are setting your divs and ending them all at the end of the page so they are divs with in divs. if one of them is supersceding a parent div class this could be because its choosing to default to one loaded to the DOM first. go in to the class which is not getting rendered properly and add !important to the specific attribute of the div that is not functioning properly and see if that helps. something like this

p { color: #ff0000 !important; }

Sorry if that does not help maybe I am misunderstanding your problem.

Also if the point of these divs is to render each link in to the same div could you not close each section off and start the next one so they are not all children of the first?

Thanks for the response, but I don't think you are understanding the problem. The problem is not that style properties are not being applied. The problem is that the DOM tree is not being created in the browser properly. The final text node with contents "});" should be a child of the first <code> element, but it is not. Rather it appears as a child of the <p> element and a sibling of the <code> element. This can be fixed simply by changing the class of the innermost <code> elements to something other than "new". This happens on both firefox and chrome (haven't checked other browsers).

This does not happen with <div> elements, which behave as you would expect.

This behavior seems odd to me, and wrong, so I'm asking for any info that would shed some light on why this is happening.

Thanks,
Sam.

Originally Posted by Nicholas Diaz

It appears you are setting your divs and ending them all at the end of the page so they are divs with in divs. if one of them is supersceding a parent div class this could be because its choosing to default to one loaded to the DOM first. go in to the class which is not getting rendered properly and add !important to the specific attribute of the div that is not functioning properly and see if that helps. something like this

p { color: #ff0000 !important; }

Sorry if that does not help maybe I am misunderstanding your problem.

Also if the point of these divs is to render each link in to the same div could you not close each section off and start the next one so they are not all children of the first?

Update: Opera, Firefox, Internet Explorer, and Chrome get it wrong. Safari gets it right. To see the difference, try the code below. The alert box says "undefined" on all browsers except Safary, which reports "});", which I believe is the correct answer.

ahhh I am sorry for misunderstanding. and the worst thing is I have built two sites using ajax and I was very displeased with my self on both of them. I gather since you have found a fix for this problem you just want to understand why its behaving the way it is. You have my curiosity as well. I hope someone comes along with an answer because this is my weakest area and I really need to learn more about it.