Dude, wheres my content? (IE Probs)

I'm having some problems in IE, something I haven't encountered before - flickering text. What I mean is this: there appears to be no text under the news titles until you "Ctrl + A" to select all of the text (or just selecting the sections of missing text reveals it). But, once you deselect the text either disappears, or leaves behind blotches of text.

Here is the page: http://hosted.sector7-halo.com/new/p...iew/index.html

(Open in IE, thats the only thing thats giving me problems at the moment) I don't know what is causing this, I am completely stumped. At first I had thought it was just my browser, but I asked more people and they had similar problems with IE as well.

I need some suggestions as to what it could be. Has anyone encountered a similar problem? How did you fix it?

I also have it documented on what exactly I am seeing, and what it is supposed to look like (in Firefox) here:
http://hosted.sector7-halo.com/IE%20BUG/

That is a bloody wierd bug, and I can't see any obvious fix. (googling didn't help either)

Is there anyway you can not use tables? Perhaps that might help.

The only tables that are used it to make the category icon, and the postbit info align perfectly. Its pretty impossible to vertically align using DIVs, so tables are my only option. But they definately should not be affecting the text that is lying under it, at least I don't suppose.

I'll try getting rid of the tables and see if the text changes in any way.

EDIT: I just did the above, and nothing has changed. The problem persists.

http://www.positioniseverything.net/explorer.html

I don't know if you have checked this site, but it has a nice comprehensive list of Internet Explorer bugs and workarounds.

Just tested files in IE for PC and about 60% of it loaded.
In your code you have tables then <div>

<table> <tr> <td></td> </tr> <tr> <td></td> </tr> </table> <div></div>

Why not make another <tr> and insert the div with the content.
Also using the <br/> after sections. XHTML is not friendly to
loose sections as they will overlap.

<table></table> <br/> <div></div> <br/> <table></table> <br/> <div></div>

Option

<table> <tr> <td></td> </tr> <tr> <td></td> </tr> <tr> <td><div></div></td> </tr> </table>

_|

The <br />'s didn't seem to work, but having the content in a row in the table did seem to work. However, I don't particularly like this option because of the use of tables, but I will take it. If anyone has any better option, please post it.

I never noticed how much crap IE was until I started making more complex layouts with CSS. It really is ****.

Thanks again guys!

Add the CSS line 'position: relative' to the element where the dissapearing content is in.
That will fix it.

The bug is called the peekaboo bug read more here: http://www.positioniseverything.net/.../peekaboo.html


I hope that helps

Thanks Bas, that fixed the problem. Sysblnk, I don't think its the peekaboo bug, that happens under very specific conditions, and has to do with the use of <a> elements. I think what Isurfr said was more towards the money:

XHTML is not friendly to loose sections as they will overlap.

Both solutions worked, tables, and position:relative. In case anyone has any similar problems.

Thanks guys! I'll post the finished product when I can.