Below is the HTML code that I am working with:
<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>
This is the type of CSS that is being applied:
.first-content-middle
{
background: url("images/bg-black.png") repeat;
margin: 0 0 0 37px;
padding: 0 20px;
width: 595px;
}
However, in IE8 I am not able to see the background image as expected in IE9 or Firefox:
Here's a screenshot from IE8:
And here is a screenshot from Firefox showing how it should look:
I have tried the following solutions:
To address the issue, I included the html5shiv code in the page's head section specifically for Internet Explorer:
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
Additionally, I verified in Firebug that the section element has the display:block; property set.
Edit: Applying the height css property to the section resolves the background problem. However, the height of the section varies. How can I address this?
Any recommendations?