Question

This works on firefox and chrome:

<div id="popup" style="display: block;">
        <div id="contentWrapper">

            <div id="popHeader">
                <span id="popupQuestion">The  nature.</span>
                <a id="popupYes" href="#"> </a>
                <a id="popupNo" href="/">Leave</a>
            </div>
        </div>
    </div>


#contentWrapper {
background-image: url("http://bestcamctory.com/images/warning/warning_bg.png");
height: 100%;
position: relative;
width: 100%;
}

But on ie the background image isnt shown. Why is that?

Answer 1

If your child elements are positioned absolutely, then #contentWrapper has collapsed because there’s no elements within the normal flow of the document to tell it how tall to be. A height: 100% is relative: the element will only be as tall as its parent, which will only be as tall as its child elements by default (which are currently 0).

There are a few things you can try to work around this.

• Add a minimum height to #contentWrapper (try 1em to start with)
• Remove the absolute positioning from one or all of the child
  elements.

You could also try adding height: 100% to each of the ancestor elements.