Disappearing content in table cell IE7

[HazardTW]

I don't understand very much about hasLayout, but I did just run into a problem where I was using a table for tabular data, but then decided I needed an image in one of the cells and some buttons.

In order to get the image and buttons to line up the way I wanted in the cell I wrapped them in a DIV, in the CSS I set position:relative out of habit for the DIV in case I was to position something absolute inside of it.

By giving the DIV the position it caused the bug in IE7 where that DIV and it's contents would disappear, problem solved by removing the position:relative property.

Thought I would pass along this bit of info so it might help someone else out.

[ShawnCplus]

Well wrapping a td in a div is sort of like mixing sugar and salt. Table cells are used because their alignment and size will be uniform to the surrounding cells, divs are used for general content positioning, which may or may not be uniform.

[HazardTW]

Roger that, wrapping the td in a div wouldn't be good, I didn't explain in enough detail.

I put a DIV inside the TD, then put my image and buttons inside the DIV :)

My DTD is HTML 4.01 Strict and validates as such.

[ShawnCplus]

Just to see what happens set try and set the z-index of the div to something high, the div might be actually disappearing behind the table.

[HazardTW]

Attempted that before, no success, I am pretty sure the problem lies with the known hasLayout issue with IE7 regarding disappearing content.

I was under the impression that giving something a layout would fix the problem, but in this case it seemed to be the opposite.

The way I understand giving something layout is like this:(I may be mixing apples with oranges here though)
If I have a div with no position set it flows with the document and depending on elements around it and the size of the window, it can be in different locations. There is no x,y location SET for it.

If I have an element inside that div that I want to position absolutely at top:0 and left:0, that element needs a reference point so it starts at it's parent looking for an ancestor that has a position(hasLayout?) that it can use as a reference.
It will go all the way up the hierarchy to the browser window if none of it's ancestors has a position, and that element would be in the upper left corner of the browser window, no matter where it's containing div is in the window.

To make the element's absolute position relative to it's containing div, you can set position:relative for the containing div without affecting how it flows with the document, but it sets a position reference for the element inside to use, now the absolutely positioned child of the div will be in the upper left corner of the div as apposed to the browser window.

I am not sure if hasLayout is the same thing I am talking about here in regards to giving the div a position via position:relative or not.

If you look at the hasLayout page I linked in my original post you will see that a div does not 'have layout' by default, but a table does. Again I do not know if the hasLayout issue and my position issue are one and the same.

One thing I will note is that when the page first opens, the div and contained elements are visible until you move the mouse, then they would disappear.

I also did tests with the img and button elements inside the div that is inside the TD by alternately putting position:relative on those elements and found that when any of those elements had a position rule they disappeared, while the elements without a position rule did not disappear.

Crazy stuff, maybe IE8 will be standards compliant and we can pass legislation to make it a capital offense to use any prior version of IE ;)

[MidiMagic]

A div can be inside a td, but a td can't be directly inside anything except a tr.

The div contents might also disappear if they don't fit.

[HazardTW]

There is nothing outside the TD except a TR.

I tried to make a demonstration by replicating the entire TABLE and the element structure in the TD where I had the disappearing content, and the applicable CSS but I could not recreate the problem.

Depending on some variables, the image may be hidden via display:none, and in it's place a text input and button, or vice versa.

The javascript in question does work in IE so it's not a problem there, and in the original document where the problem occurs, I can 'turn' the problem on and off by toggling position:relative on the elements inside the TD.

If I have time I will try to investigate it more but for now I will just leave it at this:
If you have the disappearing content bug in IE but not FF, I can say from experience that one possibility is position:relative on the elements in question.

I was going to post some code, but posting partial code will lead to "post all the code" and that would lead to "why do you do this or that", etc. and it would get way off topic.
This is in a web application I developed for a company I work with for backend database management for their websites, and the code in total is over 12,000 lines, of course not all of it relates to the problem, but the main doc and JS represents a huge chunk since the application uses AJAX and is only loaded once per session.

If I find I can replicate the problem outside of my application I will post a demonstration, I do believe that it is not position:relative all by itself causing the problem, just one contributing factor.

EDIT: I do want to reiterate that as large as my document and css are, the CSS validates error free, the HTML DTD is "HTML 4.01 Strict" and also validates error free, I use HTML 4.01 since IE doesn't support XHTML and parses it as HTML.

[MidiMagic]

Here is a place to look: a pile-on problem.

If you are constantly putting different objects in the same div or cell, it is quite likely that something won't display because it is UNDER something else.

This is especially true if you do this:

- Display an image in a div.
- Hide the image.
- Write text in a div inside the original div.
- Hide the text.
- Try to display the image again.

The image is now under the second div, because you wrote text to the div, bringing it to the top. The background color of the div is hiding it.

[nrutman]

I'm coming up against the same thing in a web app using ajax and a lot of javascript. Take away the javascript and the problem can't be recreated (as hinted to above). It has something to do with touching the DOM. Hovering over various elements sometimes makes the DIV content reappear/disappear, but it is unpredictable. Quite an interesting bug.