ie6 not displaying my layout

Hi all. I developed a site in safari using css positioning. This is my first real attempt at css development and I've discovered the wonders of ie.

http://www.i4cevents.com/new/pages/index.htm

is the page I developed. Viewed in ff, opera and safari, looks fine (with one or two minor glitches)

In ie, things went wrong. I've managed to iron out some major bugs but the box area bottom borders are meant to line up with the box area side borders (which are rounded edge images).

The style sheet is at http://www.i4cevents.com/new/styles/mainStyle8.css and this is the main sheet. Inside that sheet, I've imported a ie hack sheet which is at
http://www.i4cevents.com/new/styles/ie-win.css

Aside from the png problem (which I'm gonna have to work round), why won't the bottom of the boxes align with the side borders? If I try to shrink the length of the boxes from the ie hack sheet nothing happens. WHY???!

okay. I've figured out that the box areas (which are list items) are displaying wrong. In firefox and ie the list items width and height are set the same but in ie the list items are rendered taller than in ff. I can't figure out why. Is it something to do with the margins or padding? The styling for the list items is:

ul li{
float:left;
list-style-type:none;
background:url('../images/indexRallyGrey.jpg') top left repeat-x fixed;
height:298px;
width:34%;
margin:0 4% 0 0;
border-bottom:2px solid #646464;
}

and in ie the code is slightly changed to:

* html body #foreground ul li{
position:relative;
background:#dddddd;
width:30%;
padding:0 0 0 20px;
}