Top distance between divs issue IE8

HTML & CSS
1

Hi all,
I have created 3 divs:
a top one with a background image,
a middle one with some text it
and a third one with another background image.
My issue is that the bottom div has a gap between it and the middle one although there’s no margin or padding set for any of them.
The top and middle are correct but the middle and bottom one have this gap and it’s only like this in IE8

The address is: http://mihaiil.eu/test/index.html and this is the css code:
#top {
margin:auto;
height:74px;
background:url(images/bg_01.png);
background-repeat:no-repeat;
width:900px;
}
#middle
{
margin:auto;
background:url(images/bg_02.png);
background-repeat:repeat-y;
min-height:300px;
width:900px;
margin-bottom:0px;
word-wrap:break-word;
}
#down
{
margin:auto;
height:113px;
width:900px;
background:url(images/bg_04.png);
background-repeat:no-repeat;
margin-top:0px;
}

and the HTML one:
<div id=“top”></div>

<div id=“middle”>
<div id=“txt”>
some text
<ul>
<li><a href=“#” class=“fade”>some text</a></li>
<li><a href=“#” class=“fade” target=“_blank”>some text</a></li>
<li><a href=“#” class=“fade” target=“_blank”><del>some text</del></a></li>
</ul>
some text
<ul>
<li><a href=“#” class=“fade” target=“_blank”>some text</a></li>
<li><a href=“#” class=“fade” target=“_blank”>some text</a></li>
</ul>
</div>
</div>
<div id=“down”></div>
<div class=“clear”></div>

Can you please help me?

Thanks,
Mihai

2

Thanks so much, that solved the issue yeey:)

3

I don’t have IE8 in front of me now, and IE6 and 7 are fine, but I do see in my browser there is some default top-bottom margin on the ul’s inside. Possibly IE8 is seeing those and doing something funky with them?

To test,
ul {
margin: 0;
}

This may screw up your bullets in some browsers, because some use left margin to show bullets while others use left-padding.

For this reason I remove both from all lists all the time and then manually put in the one I want (usually padding) for all of them.