List not appearing properly in IE7/8. Images, border-radius, etc

[Mandres]

First off, the jsfiddle: http://jsfiddle.net/MhFk4/2/In IE9 everything is working fine, but IE8 & below I'm running into issues.. on the development site, only one of the buttons shows up in IE8 at all (yet on the fiddle it shows up, but the border-radius isn't working properly?.)Here's the actual development site to see what IE8 does there: http://tinyurl.com/bxy449e\[code\].view-home-cta-view {ul { list-style: none; margin: 40px 0 0; padding: 0; height: 380px; li { float:left; margin: 0 25px 0 0; position:relative; .views-field-field-cta-image { border: 10px solid #fff; @include border-radius(150px); width:270px; box-shadow:0 0 25px rgba(0, 0, 0, 0.7); -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; img { max-width:100%; height: auto; @include border-radius(140px); } } .views-field-field-regular-link { font-family: $o; font-size:22px; width:100%; position:absolute; bottom:14px; // 60px up from bottom left: 0; z-index: 3000; a { color:#fff; text-decoration: none; background: $green; display:block; text-align:center; line-height:22px; padding: 13px 0 15px; @include border-radius(5px); box-shadow:0 0 10px rgba(0, 0, 0, 0.7); @include transition(0.5s); &:hover { background: lighten($green,5%); } } } .views-field-field-attachment-link { font-family: $o; font-size:16px; width:100%; position:absolute; bottom:-20px; left:0; a { color:#fff; text-decoration: none; background: $brown; display:block; text-align:center; @include border-radius(0 0 5px 5px); margin: 0 20px; padding: 8px 0 10px; line-height:16px; box-shadow:0 0 7px rgba(0, 0, 0, 0.6); @include transition(0.5s); &:hover { background: lighten($brown,5%); } } } &.views-row-last { margin-right: 0; } }}}\[/code\]All the SCSS code is in the JSfiddle (with mixins and variables for color). If anyone could shine some light on this I'd appreciate it, thanks!