0

As the title says here's whats basically going on: 

<div id='container' style='display:block; position:absolute; width:auto; height:533px;overflow:hidden;white-space:nowrap;'>
  </div>

Upon user interaction - I do some work: request some JSON, build elements, then append said elements to the "container" div. The result is something like: 

<div id='container' style='display:block; position:absolute; width:auto; height:533px;overflow:hidden;'>
   <img src="A REAL, VALID URL" border='0'/>
   <img src="A REAL, VALID URL" border='0'/>
   <img src="A REAL, VALID URL" border='0'/>
   <img src="A REAL, VALID URL" border='0'/>
   <img src="A REAL, VALID URL" border='0'/>
 </div>

Now here's whats happens. If children are appended to this and they exceed the height of the parent. The parent disappears.

I've pursued "hasLayout" and all that jazz - nothing works.

What does work is if the children are of the same size or smaller - but due to the nature of what I am trying to accomplish, this is not desired - nor can it be guaranteed they will be smaller.

height:auto doesn't work but setting a value larger than the largest child fixes this - but skews my layout

Thanks in advance.

edit: The images are loaded via a combo of JSON and a deferred queue. They are guaranteed to be loaded prior to appending them to container element.

basically : 

var img = new Image();
img.onload = function () { theContainer.appendChild(this);};
img.src = someURL;

works fine in all chrome and FF

edit2: I have tried to append the images both to the "container" object before and after it itself is appended to the body. Neither produces the expected result.

edit 3: *IE7 and IE9 are not behaving as described above. This is exclusive to IE 8 *

Brandt Solovij
  • 2,124
  • 13
  • 24
  • Is this happening only on IE8? I could not reproduce this on IE Tester or IE8 Mode on IE 9. – Ricardo Souza May 03 '12 at 21:48
  • IE 8 it seems. If I run the appending process through a "setInterval" queue - the appending process runs swimmingly until an image that is larger than the "container" parent is appended, then the div "disappears" -- it appears to perhaps still be a "hasLayout" issue, as when you use the clunky IE 8 web developer tool to inspect the DOM, the container & all images are "traced" but not rendered. The div is rendered and visible UNTIL a child larger than itself is appended. – Brandt Solovij May 03 '12 at 21:52
  • If you could reproduce the problem in a test page, or as a http://jsfiddle.net/ or http://jsbin.com/ test case, you'd have a much better chance of getting this solved. – thirtydot May 03 '12 at 21:54
  • noted. I'll see what I can do. – Brandt Solovij May 03 '12 at 21:57

2 Answers2

0

I've seen this before, but I don't remember exactly how I solved it. You might try putting another div inside of your container and appending your images into that div, wrapper divs often get around IE issues.

kroehre
  • 1,104
  • 5
  • 15
  • I actually tried that. The old
    < div overflow:scroll>
    -- approach does not seem to help - I appreciate the suggestion tho!     – Brandt Solovij May 03 '12 at 21:55
  • 1
    Hm, do the images have a max-width set? You might try setting max-width:none – kroehre May 03 '12 at 21:55
  • I'll give that a shot - presently its simply : `img {display:inlne-block; top:0px; left:0px; position:relative; margin:0px; padding:0px; }` – Brandt Solovij May 03 '12 at 21:56
  • Are the images displayed in a grid? Consider using "float:left" instead of "display:inline-block". I also wonder if the relative positioning with top / left position could be jacking things up. – kroehre May 03 '12 at 22:28
  • @ Kroehre - I missed something in the original post - the container element has "`white-space:nowrap`" set - updating now. Also with `width:auto` - float doesn't perform ideally - Thats why I'm not using float. I suppose I could commute the aggregate child.width values... and then just set width before I display it.... Really appreciate the discussion. Thanks for the suggestions, will keep this updated as it progresses and deal points to all where applicable. – Brandt Solovij May 03 '12 at 22:57
0

So the issue was the "hasLayout" IE 8 bug. By setting the width of the container div to "something other than auto" - it is now visible and and working / displaying as intended.

Fun times, thanks all for the assistance.

Brandt Solovij
  • 2,124
  • 13
  • 24