PNG background image not showing in IE 8< using html5?

Question

I have the following html code:

<section class="first-content-top">
    <img src="images/img-diner.png" />
    <h1>Menu</h1>
</section>
<section class="first-content-middle">
         <article class="menu">
     </article>
</section>
<section class="first-content-bottom"></section>

With the following type of css:

.first-content-middle 
{
    background: url("images/bg-black.png") repeat;
    margin: 0 0 0 37px;
    padding: 0 20px;
    width: 595px;
}

But in IE8 i still can't see a background image, like i see in IE9 or firefox:

Here's a picture of IE8:

And here is a picture of firefox, how it should be:

I tried the follwing solutions:

To prevent the problem i added the following html5shiv code to the head of the page:

<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

And in firebug i checked to make sure that the section element has the display:block; property set.

Edit: Adding the height css property to the section fixes the background problem. But the section height is variable. So how do i fix that?

Any suggestions?

Solution 1

Your png background image needs to be at least 4x4px.

Solution 2

.first-content-middle { background: url("images/bg-black.png") repeat scroll 0 0; margin: 0 0 0 37px; padding: 0 20px; width: 595px; }

remove transparent from background

Comments

[RTB]

That code will only work on img elements and not background images. Which is exactly the problem. Any suggestions for that?

[RTB]

i'm sorry it doesn't really say transparent. That's firebug code. I'll change my anwser to the right css source code.

[RTB]

There is no css opacity. Thats already into the background image which is causing the problem.

[RTB]

Still doenst work, sorry. Here's a link to the developer enviroment: dev.webrtb.com/zinn/cafe

[CodeCore]

This link is broken - this seems to be a good solution: dillerdesign.com/experiment/DD_belatedPNG