Search code examples
csshtmlinternet-explorerinternet-explorer-8conditional-comments

Using conditional comments removes content?

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:

enter image description here

What it should look like:

enter image description here

Is there a way to ensure that using conditional comments doesn't remove content?

Solution

  • 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.