appendChild appends to right of element in IE

Question

I am dynamically appending a div to another dynamically created div. In IE, it shows on the right side of the element, but in all other browsers it shows at the bottom of the element. I want it to display at the bottom, like it is in FF and Chrome. Any suggestions?

auto complete works with: [ "#Saab", "#Volvo", "#BMW", "#Mini", "#MiniMonster" ]

IE

non-IE

Solved: I was using divEl.setAttribute("style", "top:" + top + "px; left:" + left + "px; width:" + width + "px;");

IE has issues with setAttribute . So I switched to:

divEl.style.top = top + "px";
divEl.style.width = width + "px";
divEl.style.left = left + "px";

Answer 1

I would use relative positioning in your case, because absolute positioning will always be affected by the size of the window and other factors, it's clear even from your jsFiddle that it appears in the wrong place (using Chrome). So, I'd change the CSS to this:

#matches_tooltip {
    position: relative;
    top: 0;
    left: 0;
    display: none;
    background-color: #FFFFFF;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
    border-color: #E0E0E0;
    border-width: 1px;
    cursor: pointer;
    text-align: left;
}

http://jsfiddle.net/ruslans/9Hg8a/2/

I can't test in IE, but it should be OK in all browsers. Note that I've modified your javascript not to set the position attributes.

Answer 2

Try this

.options_text {
  position: relative;
  text-align: center;
}

And modify your javascript rendering to :

element.style {
  bottom: -26px;
  display: inline;
  left: 12px;
  visibility: visible;
  width: 286px;
}