In noticed the <!> element in IE6 and 7 (haven't tested 8) developer toolbar. It appears to be an element created to hold the background image for one of my actual elements (the actual element is now a child of the <!> element according to IE)
Does anyone know what the <!> element is and why IE creates it to hold the background image (I have another virtually identical element next to the element that is now a child of the <!> element and that one does not need/gets an <!> element for the background image)
Actual Markup (simplified)
<div id='d1'>I have a background image</div>
<div id='d2'>So do I</div>
Markup as renderen by IE6 and 7
<!> <!-- now contains the background image for d1'-->
div id='d1'>I no longer have a background image</div>
</!> <!-- or whatever the closing tag for <!> is -->
<div id='d2'>SI still have mine</div>
EDIT:
The actual site can be found here. The actual markup is quite big and complex. (The element that is the problem is the #leftBar element, note that this has it's height determined by javascript)
This is all the CSS that descibes the element being wrapped in <!>
position:absolute;
left:0px;
z-index:15;
width:15em; /* on update change: #contentWrapper:padding-left, #rondleiding:left */
height:100%;
overflow:visible;
background: url("http://somewhere/img.png") repeat #a99c89;
Also there are indeed javascript manipulations on the elements of the page, but these do not deal with the background image of the #leftBar element.
According to the W3C validator, the page is pretty much valid (some errors on images having rels).
Also I'll be adding a bounty as I am now asking people to look at the actual website (which means digging into my shit).(forget a question needs to be open two days for that)