Question

I have a div :

<div class="ContainerBG">
    Special Ad
</div>

and a css :

    .ContainerBG
{
    background-repeat: repeat-x;
    text-align: center;
    vertical-align: middle;
    font-size: 16px;
    font-family: Arial;
    color: #000000;
    width: 100%;
    line-height: 28px;
    font-weight: bold;
    background-image: url('Resources/images/ContainerBG.gif');
}

In all browsers and in IE9 the background is showing correctly, but in IE8 or less the background isn’t showing at all, however the other properties in ‘ContainerBG’ are working! and i a can see the background rendered correctly in IE Developer Tool!

I also tried :

 background: url('Resources/images/ContainerBG.gif') repeat-x;

i also tried to pass the style inline and it didn’t work!

If we replaced the div with a span for the same CSS it will work!
A test page is here please note that the left pane is the div i am talking about, and the right pane have the same code but using a span, as you can see the span is working but the div Not!!

Does anybody face same problem? Any suggestions?

Answer 1

Ala, if I remove content: ' '; from .QAZ-layout-cell QAZ-sidebar1, I can see the background of the div. IE8 only supports the content property if a !DOCTYPE is specified.