Buongiorno a tutti,

ho un problema che forse voi esperti riuscite a risolvere....

Sto creando una pagina con una parte di interconnessione tra header e content del mio sito che dovrebbe permettermi di avere delle curve.

Il codice è questo :

<div id="header">...</div>

<div id="connettore">

<div id="conn-sx"></div>
<div id="curva-sx"></div>
<div id="centrale"></div>
<div id="curva-dx"></div>
<div id="conn-dx"></div>

</div>

<div id="content">...</div>

nel mio relativo css ho :

div#connettore {
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
width:100%;
height:11px;
}

div#conn-sx {
background-image:url(../images/lineaverticale.jpg);
background-repeat:repeat-y;
background-color:#173677;
width:174px;
height:11px;
float:left;
display:inline;
}

div#curva-sx {
background-image:url(../images/curva-sx.png);
background-color:#FFFFFF;
background-repeat:no-repeat;
width:11px;
height:11px;
display:inline;
float:left;
border:0;
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
}

div#centrale {
background-color:#FFFFFF;
background-repeat:repeat-y;
width:517px;
height:11px;
float:left;
display:inline;
}


div#curva-dx {

background-image:url(../images/curva-dx.png);
background-color:#FFFFFF;
background-repeat:no-repeat;
width:11px;
height:11px;
float:left;
border:0;
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
}

div#conn-dx {

background-image:url(../images/lineaverticale.jpg);
background-position:right;
background-repeat:repeat-y;
background-color:#FFFFFF;
width:189px;
height:11px;
float:right;

}

L'altezza del "connettore" è 11.
Le curve sono alte 11px e la linea verticale è alta 1px.

In pratica quello che mi succede con EXPLORER è che le due curve sono più corte per cui mi lasciano una parte sottostante con il colore del background :

linea - curva più corta - spazio - curva più corta - linea


E' possibile ??!?!?!?!

Dove sbaglio ???

Grazie a chiunque sappia aiutarmi.