Definition list won't wrap floated image in IE6/7

[RyanP13]

I am having some discrepanices between what is displaying in Firefox and IE6/7. Basically there is an image that i was to float right and then have a definition list wrap around said image. It is behaving in Firefox but not IE6/7.

Any help would be greatfully received as this has been bugging me all day long :)

I am using a Transitional DOCTYPE.

Here is the HTML:

<div class="equalRow">
<div class="primaryPanel">
<h2><a href="#">Health and life cover</a></h2>
<div>
<p>Additional services for 50 employees or more.</p>
<dl>
<dt><a href="">Vestibulum sed risus. Nulla odio sapien lobortis ultr.</a></dt>
<dd>Vestibulum sed risus. Nulla odio sapien lobortis ultr. Praesent eu. Praesent placerat tellus nec velit. Proin mauris.</dd>
</dl>
<img src="./images/panels/stopWatch.gif" width="111" height="54" alt="" />
<dl>
<dt><a href="">Vestibulum sed risus. Nulla odio sapien lobortis ultr.</a></dt>
<dd>Vestibulum sed risus. Nulla odio sapien lobortis ultr. Praesent eu. Praesent placerat tellus nec velit. Proin mauris.</dd>
<dt><a href="">Health Insurance</a></dt>
<dd>Vestibulum sed risus. Nulla odio sapien lobortis ultr. Praesent eu. Praesent placerat tellus nec velit. Proin mauris.</dd>
<dt><a href="">Health cash plan</a></dt>
<dd>Nulla odio sapien lobortis ultr.</dd>
<dt><a href="">Critical illness cover</a></dt>
<dd>Vestibulum sed risus. Nulla odio sapien lobortis ultr. Praesent eu. Praesent placerat tellus nec velit. Proin mauris.</dd>
</dl>
</div>
</div>

And this is the CSS:

.equalRow {
overflow:hidden;
position:relative;
clear:both;
}

.equalRow div.primaryPanel,
.equalRow div.secondaryPanel {
padding:0 0 32767px 0;
margin:0 0 -32752px 0;
float:left;
}

.equalRow div.primaryPanel {
width:345px;
background:url(../images/panels/primHomeBg.png) repeat-y;
}

.equalRow div.primaryPanel h2 {
width:328px;
padding:15px 0 0 17px;
font-size:1.8em;
font-weight:bold;
color:#11477d;
background:url(../images/panels/primHomeTop.gif) no-repeat top center;
}

.equalRow div.primaryPanel h2 a {
color:#1e4c79;
text-decoration:none;
display:block;
background:url(../images/panels/bullitBlueLarge.png) no-repeat 296px 2px;
padding:0 30px .4em 0;
}

.equalRow div.primaryPanel h2 a:hover {color:#1ea2fa;}

.equalRow div.primaryPanel div {
width:331px;
margin:0 0 10px 6px;
padding:10px 0 0 0;
background:url(../images/panels/primHomeGrad.png) no-repeat top center;
}

.equalRow div.primaryPanel p {
padding:0 0 10px 13px;
margin:0 0 0 0;
}

.equalRow div.primaryPanel img {
width:111px;
display:block;
float:right;
padding:0;
margin:0 16px 0 0;
}

.equalRow div.primaryPanel dl {
}

.equalRow div.primaryPanel dl dt,
.equalRow div.primaryPanel dl dd {
margin:0 0 10px 13px;
padding:0 0 0 10px;
font-weight:bold;
color:#1e4c79;
background:url(../images/panels/bullitBlueSmall.png) no-repeat 0px 1px;
}

.homepage div#bupaMainContent .equalRow div.primaryPanel dl dd {
margin:-7px 0 10px 13px;
background:none;
font-weight:normal;
color:#333;
}

.equalRow div.primaryPanel dl dt a,
.equalRow div.primaryPanel dl dd a {
text-decoration:none;
color:#1e4c79;
}

.equalRow div.primaryPanel dl dt a:hover,
.equalRow div.primaryPanel dl dd a:hover {
color:#1ea2fa;
}

Cheers.

[swa66]

Why are you usign things like

padding:0 0 32767px 0;
margin:0 0 -32752px 0;

?