no background color (sometimes) in IE6

[shiftless]

can someone explain this strange behavior in IE? I am using a test page to illustrate:

http://www.aftermath-creative.com/test/kennedy/test.htm

Why doesn't IE6 put a background color on the top box (purple/pink) but it will on thee one further down, which is the EXACT same code. I have tried many versions of this page and it always skips the background color of the top box.

If I give the projT a width, it will give it a background color but it screws up my layout and isn't a workable solution as the same container needs to be different widths on other pages.

HTML:

<!-- Begin sister site panels buttons-->
		<div id="sisters">
			<div class="clear"></div>
			<div class="greyBorder">
				<div class="projT">
					<a href="projectT.htm" onFocus="this.blur()"><img src="images/logo_projT.gif" width="190" height="62" border="0" alt="Project T logo"/></a>
					<p><a href="projectT.htm" onFocus="this.blur()">Open to HIV-negative gay men and transgender women ages <br />18- 60. Get involved &raquo;</a></p>
				</div>
			</div>
			<div class="greyBorder">
				<div class="sfReady">
					<a href="sfisready.htm" onFocus="this.blur()"><img src="images/logo_sfready.gif" width="190" height="75" border="0" alt="SFisReady logo"/></a>
					<p><a href="sfisready.htm" onFocus="this.blur()">HIV vaccine trials are open to healthy, HIV-negative people of all sexual preferences, ages 18 - 50. Get involved &raquo;</a></p>
				</div>
			</div>
			<div class="greyBorder">
				<div class="projT">
					<a href="projectT.htm" onFocus="this.blur()"><img src="images/logo_projT.gif" width="190" height="62" border="0" alt="Project T logo"/></a>
					<p><a href="projectT.htm" onFocus="this.blur()">Open to HIV-negative gay men and transgender women ages <br />18- 60. Get involved &raquo;</a></p>
				</div>
			</div>
			<div class="greyBorder">
				<div class="sfReady">
					<a href="sfisready.htm" onFocus="this.blur()"><img src="images/logo_sfready.gif" width="190" height="75" border="0" alt="SFisReady logo"/></a>
					<p><a href="sfisready.htm" onFocus="this.blur()">HIV vaccine trials are open to healthy, HIV-negative people of all sexual preferences, ages 18 - 50. Get involved &raquo;</a></p>
				</div>
			</div>
		<div class="clear"></div></div>

CSS:

.projT {

	border: #FFFFFF solid 3px; 
	text-align: left;
	line-height: 14px;
	background-color: #B71B8B;
	color: #FFFFFF;
	font-weight: bold;
	padding-bottom: 15px;
}
html>body .sfReady {padding-bottom: 0px;}

.projT p { margin-left: 12px; margin-top: 5px; color: #FFFFFF;}
.projT a { font-family: arial, helvetica, verdana, sans-serif; font-size: 11px; color: #FFFFFF; text-decoration: none;}
.projT a:visted {color: #FFFFFF;}
.projT a:hover {text-decoration: underline;}

.sfReady {

	border: #FFFFFF solid 3px; 
	text-align: left;
	line-height: 14px;
	background-color: #51B948;
	color: #FFFFFF;
	font-weight: bold;
	padding-bottom: 15px;
}
html>body .sfReady {padding-bottom: 0px;}

.sfReady p { margin-left: 12px; margin-top: 5px; color: #FFFFFF;}
.sfReady a { font-family: arial, helvetica, verdana, sans-serif; font-size: 11px; color: #FFFFFF; text-decoration: none;}
.sfReady a:visted {color: #FFFFFF;}
.sfReady a:hover {text-decoration: underline;}

.greyBorder {border: #DCDDDD 3px solid; margin-left: 12px; margin-bottom: 15px;margin-top: 15px;}

#sisters {
	position: relative;/*ie needs this to show float */
	width: 213px;
	margin-right: 33px;
	float: right;
	text-align: center;
	border: none;
	display: inline;
}

[shiftless]

OK, giving projT a height of 1% seems to have worked, though I have no idea why. Can anyone explain this behavior?