Question

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)

Answer 1

It’s being caused by a bug in the ie7/ie8.js script. I haven’t worked out how yet… not much fun to debug as that library is such a maze of twisty little features. Do you really need to include it? If there is one specific behaviour you want to fix it may be better to just address that separately. I’ve never really trusted these enormous attempt-to-fix-everything-at-once scripts.

So instead I’ll point out that you seem to be loading jQuery twice (once from Google, once from your own site with the wrong MIME type), and you’ve got this validation problem (the rest of the doc seems OK):

<![if gte IE 8]>
    ...
<![endif]>

It is unfortunate that MSDN is still handing out this invalid conditional comment syntax, since it’s easy to have a downlevel-revealed conditional comment that’s also valid:

<!--[if gte IE 8]><!-->
    ...
<!--<![endif]-->