Problemas redondeo de DIV con internet explorer

Tengo un problema con el codigo para redondear las esquinas de un "DIV":

Se ve perfecto en todos los navegadores, pero para Internet Explorer deberia funcionar con el archivo border.htc. Y no consigo verlo

Me podeis ayudar?

Mando el código:

Código HTML:

1.<div id="ppal">texto de ejemplo </div>

El codigo final CSS para todos los navegadores, en este caso es asi:

#ppal {
02.background-color: #F00;
03.height: 200px;
04.width: 200px;
05.padding: 10px;
06./*para Firefox*/
07.-moz-border-radius: 15px 15px 15px 15px;
08./*para Safari y Chrome*/
09.-webkit-border-radius: 15px 15px 15px 15px;
10./*para IE */
11.behavior:url(border.htc);
12./* para Opera */
13.border-radius: 15px 15px 15px 15px;<strong></strong>
14.}

Archivo border.htc

<public:attach event="oncontentready" onevent="oncontentready('v08vnSVo78t4JfjH')" />
<script type="text/javascript">

// findPos() borrowed from http://www.quirksmode.org/js/findpos.html
function findPos(obj) {
var curleft = curtop = 0;

if (obj.offsetParent) {
do {
curleft += obj.offsetLeft;
curtop += obj.offsetTop;
} while (obj = obj.offsetParent);
}

return({
'x': curleft,
'y': curtop
});
}

function oncontentready(classID) {
if (this.className.match(classID)) { return(false); }

if (!document.namespaces.v) { document.namespaces.add("v", "urn:schemas-microsoft-com:vml"); }

this.className = this.className.concat(' ', classID);
var arcSize = Math.min(parseInt(this.currentStyle['-moz-border-radius'] ||
this.currentStyle['-webkit-border-radius'] ||
this.currentStyle['border-radius'] ||
this.currentStyle['-khtml-border-radius']) /
Math.min(this.offsetWidth, this.offsetHeight), 1);
var fillColor = this.currentStyle.backgroundColor;
var fillSrc = this.currentStyle.backgroundImage.replace(/^url\("(.+)"\)$/, '$1');
var strokeColor = this.currentStyle.borderColor;
var strokeWeight = parseInt(this.currentStyle.borderWidth);
var stroked = 'true';
if (isNaN(strokeWeight)) {
strokeWeight = 0;
strokeColor = fillColor;
stroked = 'false';
}

this.style.background = 'transparent';
this.style.borderColor = 'transparent';

// Find which element provides position:relative for the target element (default to BODY)
var el = this;
var limit = 100, i = 0;
while ((typeof(el) != 'unknown') && (el.currentStyle.position != 'relative') && (el.tagName != 'BODY')) {
el = el.parentElement;
i++;
if (i >= limit) { return(false); }
}
var el_zindex = parseInt(el.currentStyle.zIndex);
if (isNaN(el_zindex)) { el_zindex = 0; }
//alert('got tag '+ el.tagName +' with pos '+ el.currentStyle.position);

var rect_size = {
'width': this.offsetWidth - strokeWeight,
'height': this.offsetHeight - strokeWeight
};
var el_pos = findPos(el);
var this_pos = findPos(this);
this_pos.y = this_pos.y + (0.5 * strokeWeight) - el_pos.y;
this_pos.x = this_pos.x + (0.5 * strokeWeight) - el_pos.x;

var rect = document.createElement('v:roundrect');
rect.arcsize = arcSize +'px';
rect.strokecolor = strokeColor;
rect.strokeWeight = strokeWeight +'px';
rect.stroked = stroked;
rect.style.display = 'block';
rect.style.position = 'absolute';
rect.style.top = this_pos.y +'px';
rect.style.left = this_pos.x +'px';
rect.style.width = rect_size.width +'px';
rect.style.height = rect_size.height +'px';
rect.style.antialias = true;
rect.style.zIndex = el_zindex - 1;

var fill = document.createElement('v:fill');
fill.color = fillColor;
fill.src = fillSrc;
fill.type = 'tile';

rect.appendChild(fill);
el.appendChild(rect);

var css = el.document.createStyleSheet();
css.addRule("v\\:roundrect", "behavior: url(#default#VML)");
css.addRule("v\\:fill", "behavior: url(#default#VML)");

isIE6 = /msie|MSIE 6/.test(navigator.userAgent);
// IE6 doesn't support transparent borders, use padding to offset original element
if (isIE6 && (strokeWeight > 0)) {
this.style.borderStyle = 'none';
this.style.paddingTop = parseInt(this.currentStyle.paddingTop || 0) + strokeWeight;
this.style.paddingBottom = parseInt(this.currentStyle.paddingBottom || 0) + strokeWeight;
}

if (typeof(window.rounded_elements) == 'undefined') {
window.rounded_elements = new Array();

if (typeof(window.onresize) == 'function') { window.previous_onresize = window.onresize; }
window.onresize = window_resize;
}
this.element.vml = rect;
window.rounded_elements.push(this.element);
}

function window_resize() {
if (typeof(window.rounded_elements) == 'undefined') { return(false); }

for (var i in window.rounded_elements) {
var el = window.rounded_elements;

var strokeWeight = parseInt(el.currentStyle.borderWidth);
if (isNaN(strokeWeight)) { strokeWeight = 0; }

var parent_pos = findPos(el.vml.parentNode);
var pos = findPos(el);
pos.y = pos.y + (0.5 * strokeWeight) - parent_pos.y;
pos.x = pos.x + (0.5 * strokeWeight) - parent_pos.x;

el.vml.style.top = pos.y +'px';
el.vml.style.left = pos.x +'px';
}

if (typeof(window.previous_onresize) == 'function') { window.previous_onresize(); }
}
</script>

Joder que lío!
Mira, yo no me dedico a internet explorer, pero te puedo brindar un código para hacer "más fácil" el redondeo de las cosas, se que no es lo que buscas, pero puede que achiques un poco el código!!

Para firefox:

-moz-border-radius:5px 5px 80px 80px;
<!-- (POR DEFECTO RADIO DE: ABAJO-IZQUIERDA, ABAJO-DERECHA, ARRIBA-IZQUIERDA, ARRIBA-DERECHA) -->

Para chrome:

-webkit-border-radius: 15px 55px 5px 15px;

Lo que quieras redondeado en css sería así:

.demo {
-moz-border-radius:5px 5px 80px 80px;
-webkit-border-radius: 15px 55px 5px;
background-color:gray;
font-weight:bold;
font-family: Arial;
padding:15px;
display:inline;
}

Y en html:

<div class="demo">Aló aló</div>

No responde a tu duda pero puede que te sirva!! :)

Saludos!

---Update---

Me equivoqué en el css, arreglado :)

Yo siempre he preferido colocar una imagen de fondo y ahorrame todo ese jaleo de código. Vago que es uno ;=)

Gracias _St, pero lo tengo solucionado: En definitiva lo que me has mandado es excatamente lo mismo que lo mio, pero que con la diferencia que lo mio funciona con internet explorer.

Codigo correcto para TODOS LOS NAVEGADORES

Código HTML:

1.<div id="ppal">texto de ejemplo </div>

El codigo final CSS para todos los navegadores, en este caso es asi:

#ppal {
02.background-color: #F00;
03.height: 200px;
04.width: 200px;
05.padding: 10px;
06./*para Firefox*/
07.-moz-border-radius: 15px 15px 15px 15px;
08./*para Safari y Chrome*/
09.-webkit-border-radius: 15px 15px 15px 15px;
10./*para IE */
11.behavior:url(border.htc);
12./* para Opera */
13.border-radius: 15px 15px 15px 15px;<strong></strong>
14.}


Únicamente teneis que pegar el archivo "border.htc" en el directorio donde esta el archivo CSS. (codigo rosado)

ES UNA SOLUCIÓN PERFECTA !!!

SALUDOS.

amigo deja de preocuparte por internet explorer. yo me preocupo porque se vea bien en Chrome y en firefox y ya, por internet explorer no voy con la intencion de que mi web se vea bonita voy con la interncion de que solo cuadre y las personas puedan navegar... de todos modos si ves las estdisticas a Internet explorer no le queda mucho tiempo de vida