DIV tag overlapping other elements when content is added dynamically

I have a <DIV> with a <UL> inside. When the page loads, several <LI> elements are dynamically created inside the <UL> using createElement(). The page has no trouble automatically calculating the length of div, and everything fits nicely.

However, I have a function that adds new <LI> elements to the <UL>. And while the DIV resizes appropriately, the distance between the div and the elements below it doesn't seem to adjust. So while the DIV gets longer to accommodate the new list elements, it starts to overlap the things below it.

What it should look like: http://aaronkarp.com/random/notspillingtags.png
What actually happens: See http://aaronkarp.com/random/spillingtags.png 

Does anyone have any suggestions?

Here is the CSS for the DIV:

padding-top: 8px;
padding-bottom: 6px;
padding-left: 10px;
padding-right: 10px;
margin-top: 0px;
margin-right: 10px;
line-height: 18px;
border-right: 1px solid #e0e0e0;
border-bottom: 1px solid #e0e0e0;
border-left: 1px solid #e0e0e0;
overflow-x: hidden;
overflow-y: hidden;
aaron_karpAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

TNameCommented:
Is the other element (nav-bar? "about", "contact", "bugs"...) positioned absolutely? Is there any inline formatting (position) for the div?
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
alexcohnCommented:
The following simple test works fine (in IE 6):

<head>
    <style>
#uldiv {
padding-top: 8px;
padding-bottom: 6px;
padding-left: 10px;
padding-right: 10px;
margin-top: 0px;
margin-right: 10px;
line-height: 18px;
border-right: 1px solid #e0e0e0;
border-bottom: 1px solid #e0e0e0;
border-left: 1px solid #e0e0e0;
overflow-x: hidden;
overflow-y: hidden;
background: green;
}
    </style>
</head>
<body>
<div id="uldiv"><ul id="ul"><li>book</li><li>Carrier search</li><li>abcdef</li></ul></div>
text
<a onclick="oLi=document.createElement('li'); oLi.innerText ='dynamic list item'; ul.appendChild(oLi); return false;" href="#">add li</a>
</body>
0
aaron_karpAuthor Commented:
I'm sorry I should have specified that this is only happening in Firefox (tested in 2.0.03).
0
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

fuzzboxerCommented:
Have you tried applying a clear to the div?

Add "clear:both;" to your div class.
0
alexcohnCommented:
The above code, with the obvious change:

<a onclick="oLi=document.createElement('li'); oLi.appendChild(document.createTextNode('dynamic list item')); document.getElementById('ul').appendChild(oLi); return false;" href="#">add li</a>

works fine on FireFox 1.5.0.11 - there is no reason why 2.0 should behave differently. So, there probably is someting else in your page that screws the things up... The only way I could cause the behavior you experienced, was by using a div for text with fixed top position:

<div style="position: absolute; top: 110px;">text</div>
0
aaron_karpAuthor Commented:
Ok, so this is weird. By comparing the page that has this problem, to another page without the problem, I was able to figure out that the problem is related to the presence of a dynamically generated select menu on the page. This select menu allows users to add or remove tags from checked elements on the page.

Here is the HTML generated by this javascript : http://aaronkarp.com/random/generated_select_menu_html.png

And here is the javascript, which is called onLoad();
The myTags variable is a global array holding all of the user's tags and their IDs.
If I comment out the very last line of the function, which sets the innerHTML of a container (massEditNotesDropdownContainer) to the HTML of the select menu, the original problem of the overlapping div content goes away.

function generateMassEditNotesDropdown() {
      var selectHTML = "<select id='massEditNotesDropdown' class='inlineApplyTagSelect' onChange='applyMassEdit(this.value)'><option value='0' style='color:#aca899'>Tags...</option>";
      if (myTags.length) selectHTML += "<option value='0' disabled='disabled'>Apply Tag</option>";
      myTags.sort(sortTagArrayByTagName); // to reset indicies
      // And option for each tag
      for(var i=0; i<myTags.length; i++) {
            selectHTML += "<option value='apply" + myTags[i]['TagId'] + "'>&nbsp;&nbsp;" + myTags[i]['TagName'] + "</option>";
      }
      if (myTags.length) selectHTML += "<option value='0' disabled='disabled'>Remove Tag</option>";
      for(var i=0; i<myTags.length; i++) {
            selectHTML += "<option value='remove" + myTags[i]['TagId'] + "'>&nbsp;&nbsp;" + myTags[i]['TagName'] + "</option>";
      }
      selectHTML += "<option value='0' disabled='disabled'>----</option>";
      selectHTML += "<option value='new'>New Tag &gt;&gt;</option></select>";
      $('massEditNotesDropdownContainer').innerHTML = selectHTML;
}
0
alexcohnCommented:
Generally speaking, it's unsafe to create HTML element by assigning innerHTML; but it does work. When SELECT is dynamically added to the DIV, there is no overlap. If you could make available the page, not the screenshots, it could be easier to find your problem.
0
aaron_karpAuthor Commented:
Ok, so here are some more clues.

As I mentioned earlier, the problem is somehow related to the select menu, which is automatically generated. When someone adds a new Tag to the box on the left, I call generateMassEditNotesDropdown() again, in order to refresh the select menu with the new tag.

If I comment out the call to generateMassEditNotesDropdown() when a new tag is added, the problem with the overlapping DIV goes away.

Also, if I put a simple alert('hello'); at the very top of the function, the problem goes away.

Any idea why putting an "alert" is helping? Is it stalling the refresh of the dropdown? And maybe that's giving the lower part of the page enough time to redraw?
0
aaron_karpAuthor Commented:
I've basically solved this by putting a .5 second setTimeout() on the second call to generateMassEditNotesDropdown
0
alexcohnCommented:
Oh, it was very unclear from your post what was the relationship between  generateMassEditNotesDropdown() and the screenshots you produced... setTimeout() is a very popular workaround for many Javascript glitches, that's true.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Languages and Standards

From novice to tech pro — start learning today.