Maybe it's something simple but I have extra space after a div in IE and I cannot figure out why. Here is the general idea. I have a box that I split into three parts. I have a top, a bottom, and a middle that repeats for content. The problem is, IE is putting space a gap at the bottom of the top div before the middle div shows. Here is the html and css
.bubbleTop{
background-image: url('images/buttons/boxTop.png');
width: 315px;
height: 13px;
margin-left: auto;
margin-right: auto;
background-repeat: no-repeat;
}
.bubbleMiddle{
background-image: url('images/buttons/boxMiddle.png');
background-repeat: repeat-y;
width: 315px;
margin-left: auto;
margin-right: auto;
}
.bubbleContent{
background-repeat: repeat-y;
text-align: left;
width: 285px;
margin-left: auto;
margin-right: auto;
padding-left: 10px;
padding-right: 10px;
padding-top: 0;
padding-bottom: 0;
margin-top: 0;
}
<div id="asdf" class="bubbleMiddle">
<div id="Div1" class="bubbleContent">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad
minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip
ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate
velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero
eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit
augue duis dolore te feugait nulla facilisi. Nam liber tempor cum .</div>
</div>
<div id="Div2" class="bubbleBottom">
</div>
.bubbleBottom{
background-image: url('images/buttons/boxBottom.png');
width: 315px;
height: 13px;
margin-left: auto;
margin-right: auto;
background-repeat: no-repeat;
}
