Using conditional comments removes content? - css

Question

I've been using conditional comments as a way to ensure a background image displays correctly in Internet Explorer 8. However, when I do, some of the content (some text and an image) disappears. Furthermore, an image I wanted removed in IE8 still shows up.
EDIT: Here's the URL: http://rbk.tushausweb.com/claria/development (My issue is on the second page, so just click the navigation button on the right.)
Here's a link to what I have so far: http://pastebin.com/agHxJxb0
<div id="introduction2" class="contentContainer" data-role="page" data-prev="index" data-next="introduction3" data-title="Introduction" data-url="introduction2">
<div role="main" class="ui-content">
<!--[if IE 8]>
<link href="css/clariaIE8.css" rel="stylesheet">
<div id="bg">
<img alt="" src="image/bubble.png" />
</div>
<![endif]-->
<div class="background">
<div class="container banner">
<div class="widthContainer">
<div id="banner" class="info-banner">
<p id="smBannerTitle" class="info"></p>
<h1 id="lgBannerTitle"></h1>
</div>
</div>
</div><!-- /.container -->
</div>
<div class="widthContainer">
<div class="contentBody contentBodyWithBanner">
<div class="container media">
<div id="imgIntro2">
<img src="image/Homechoice-Claria-Unit-250-million-exchanges-and-counting-427x188.png" class="img-responsive"/>
</div>
</div>
<div id="pageContent1" class="container"></div>
</div>
</div>
</div>
</div>
A screenshot:
What it should look like:
Is there a way to ensure that using conditional comments doesn't remove content?

Answer 1

It's hard to tell without a demo, but it looks like your IE workaround is using an <img> tag to display the background. If that's the case, you may have a conflict in the z-indices and the content may be on the page but behind the background. Try setting z-index: -1 to the false background image as a first step in debugging.