padding erases border of outer box.

This is apparently an ie display bug, I can't seem to figure out which
ie bug this is.

a 3 sided border is created by wrapping the 'inner' box in the 'middle'
box and padding the 'middle' box 1px on 3 sides. It looks the same in
firefox and ie.

Then the same box is wrapped in yet another box with a red border on the
bottom. In Firefox the 'middle' box still has padding on only 3 sides,
and the red border is showing on the bottom. In ie the 'middle' box now
has padding on all four sides. Not only that, the padding on the bottom
of the 'middle' box is now hiding the bottom border of the 'outer' box

What happened to the red border ?


here is the link: http://reenie.org/test7.php

here is the stylesheet:

..red { background-color:#C80080;}
..white { background-color:white;}


..inner{
background-color: #FFFFFF;
text-align:center;
padding:5px;
}

..middle{
margin-left:15px;
margin-right:15px;
background-image:url(images/background.jpg);
padding-top:1px;
padding-left:1px;
padding-right:1px;
padding-bottom:0px;


}

..outer{
padding-top:1px;
padding-right:1px;
padding-left:1px;
padding-bottom:0;
border-color: #C80080;
border-style: solid;
border-top-width: 0px;
border-bottom-width: 1px;
border-left-width: 0px;
border-right-width: 0px;
margin-top:15px;

}