Internet Explorer 6 (IE6) has extra white space gap after a empty, fixed size div with a background-image

I was trying to fix a small display issue with one of our pages in IE6. I had an unordered list that we set the background color on and wanted to add rounded images to the top and bottom to give it a nice look.

The rounded top image

The HTML

<div class="container">
   <div style="height: 6px; width: 190px; background-image: url(../images/top.gif); background-repeat: no-repeat;">
   </div>
   <ul style="background-color:#763000;">
       <li><a href="#">Item 1</a></li>
       <li><a href="#">Item 2</a></li>
       <li><a href="#">Item 3</a></li>
   </ul>
   <div style="height: 6px; width: 190px; background-image: url(../images/bottom.gif); background-repeat: no-repeat;">
   </div>
</div>

Simple enough. Everything works great in IE7, Firefox, Chrome, etc... I get a report of extra white space after the top rounded image. I track down a system running Windows XP with IE6 and I fire it up. Sure enough, a bit of white space after the top div. But why....

The Problem

I tried everything that seemed to make sense. Checked margins, padding, etc... Everything was either good or changing it did nothing. Unfortunately in IE6 I didn't have access to my favorite tools like Firebug, so it was even more frustrating. Eventually I figured it out and I think I know what's going on.

IE6 assumes a font-size of 20px. Since my background-image was only 6px in height, when I set the height on the div it was ignored. The div would try to shrink to my set height, but would end up limited by the assumed font-size of 20px. By setting the font-size to something smaller in height than my desired 6px, it would solve the problem. Remember this when dealing with empty divs IE6. Hope it helps someone.

The HTML that works

By setting the font-size style in the "empty" div, IE6 allows the div to shrink to my desired height of 6px.

<div class="container">
   <div style="height: 6px; font-size:0em; width: 190px; background-image: url(../images/top.gif); background-repeat: no-repeat;">
   </div>
   <ul style="background-color:#763000;">
       <li><a href="#">Item 1</a></li>
       <li><a href="#">Item 2</a></li>
       <li><a href="#">Item 3</a></li>
   </ul>
   <div style="height: 6px; font-size:0em; width: 190px; background-image: url(../images/bottom.gif); background-repeat: no-repeat;">
   </div>
</div>