LO CONSEGUIIIIIII!!!!!
Al final probando y probando, y probando, y probando... Esto
Código HTML:
.archives .desc H3 {position:relative; padding-left:20px; padding-top:5px; padding-bottom:5px; margin:0px; font-size:12px; font-weight:normal; border-bottom:1px solid #fc3; background:#ffffcc;}
.archives .desc H3 A {position:relative;}
.archives .desc H3 SPAN {display:block; position:absolute; left:0px; top:0px; width:18px; height:18px; padding:0px; margin:0px; background:url(wii-araoff.gif) no-repeat center; cursor:pointer; z-index:10;}
.archives .desc DIV {display:none; padding:5px; border-bottom:1px solid #fc3;}
.archives .open DIV {display:block;}
.archives .open H3 SPAN {background:url(wii-araon.gif) no-repeat center;}
acabó en esto:
Código HTML:
.archives .desc H3 {position:relative; padding-left:5px; padding-top:5px; padding-bottom:5px; margin:0px; font-size:12px; font-weight:normal; border-bottom:1px solid #fc3; background:url(http://photos1.blogger.com/blogger/875/3245/400/wii-araoff.gif) no-repeat #ffc;}
.archives .desc A {padding-left:12px; position:relative;}
.archives .desc SPAN A {display:block; position:relative; left:0px; top:0px; padding:0px; margin:0px; cursor:pointer; z-index:10;}
.archives .desc DIV {display:none; padding:5px; border-bottom:1px solid #fc3;}
.archives .open DIV {display:block;}
.archives .open H3 {background:url(http://photos1.blogger.com/blogger/875/3245/400/wii-araon.gif) no-repeat #ffc;}
La clave estaba en cambiar un absolute por un relative y a partir de ahí a experimentar, gracias aroka por la sugerencia, y ediworks por ese enlace tan bueno y todos los demás muhísimas gracias también por vuestro tiempo.
ah! lo de las listas y div se me olvidó decir que ya lo había probado pero el código que mete Blogger en la página para mostrar la barra de arriba y otras cosas lo hacía imposible y ese código como es lógico no puedo tocarlo (se pone sólo), así que por eso la opción de las tablas.