IE7 and display block on HTML strict

I'm having difficulties with an image taking extra space although it is set to display:block in css. This is only happening on IE7. The problem is solved when I remove all spaces between the tags in the HTML code, but this is not a suitable solution.

I have heard of some IE7 hacks like setting a fixed width/height and the following css:

display:inline-block;
zoom:1;
*display:inline;

But this didn't work for me (maybe because I am using XHTML strict).

The page I am working on is the following: http://www.morgana.nl/slaaptest/afspraak.html

The top image is an image that is set as display: block and a div with blue background follows.

Link to image: http://www.morgana.nl/temp/ie7-display-block.png

Hoping for some useful help...

Solution

Since you're using XHTML, I'm assuming you want your markup to be semantic. So technically /siteimages/forms/bottom.jpg and /siteimages/forms/top.jpg aren't images that have any meaning, compared to say the photo of the people. Since it's just a decoration, so why not style them using background CSS property and apply them to your <div> containers to achieve the same effect?

Eg.

.roundedTopBar {
    padding-top: 10px;
    background: transparent url('/siteimages/forms/top.jpg') 0 0 no-repeat;
}
.roundedBottomBar {
    padding-bottom: 10px;
    background: transparent url('/siteimages/forms/bottom.jpg') 0 100% no-repeat;
}

<div class="half2 roundedTopBar">
   <div class="roundedBottomBar">
      <div class="formsContainer">
        ...
      </div>
   </div>
</div>

Added: If you did want to know how accomplish what your question originally asked for, the solution is to not use display: inline-block because IE 7 mucks it up. Use float: left; clear: both; display: block; and make sure you clear your floats in the parent container.

Eg. This is the snippet from your website, I added newCSS to namespace the new stuff I added, you can use whatever selector names you'd think suitable

CSS:

.newCSS .clearFloat{
    overflow: hidden;
    width: auto;
}
.newCSS .inlineBlock {
    clear: both;
    display: block;
    float: left;
}

Markup:

<div class="half2 clearFloat newCSS">
    <img src="http://www.morgana.nl/siteimages/forms/top.jpg" width="441"
    height="12" class="block inlineBlock" alt=""/>
    <div class="formsContainer block inlineBlock">
        <div class="formsInnerContainer" style="height:474px">
        form was here
        </div>
    </div>
    <img src="http://www.morgana.nl/siteimages/forms/bottom.jpg" class="block inlineBlock" alt=""/>
</div>

See fiddle: http://jsfiddle.net/amyamy86/c34ny/

If you're viewing on IE7 (it doesn't like jsFiddle): http://jsfiddle.net/amyamy86/c34ny/embedded/result/