Buenas de nuevo Dacho, al final he encontrado una solución que me vale, no es la mejor pero al menos consigo lo que quiero sin violar el tratado W3C ;) te cuento por si te sirve de algo...en definitiva lo que he hecho es meterle laterales, top y bottom por encima y un overflow al mapa, el css queda así
Código:
<style type="text/css">
<!--
* {padding:0px; margin:0px;}
html {
height: 100%;
width:100%;
}
body {
height: 100%;
width:100%;
}
.mapa{
height:100%;
width:100%;
overflow:hidden;
}
#cabecera{
position:absolute;
background-color:#fff;
height:32px;
top:0;
width:100%;
}
#pie{
position:absolute;
background-color:#fff;
height:32px;
bottom:0;
width:100%;
}
#izquierda{
position:absolute;
background-color:#fff;
width:32px;
left:0;
top:0;
height:100%;
}
#derecha{
position:absolute;
background-color:#fff;
width:32px;
right:0;
top:0;
height:100%;
}
-->
</style>
Y después lo monto de la siguiente manera:
Código:
<div class="mapa" id="map"></div>
<div id="pie"></div>
<div id="cabecera"></div>
<div id="derecha"></div>
<div id="izquierda"></div>
Al final lo que queda es el mapa API de google (Que usa un id por lo que en CSS le he puesto las propiedades como clase) y después me dedico a ocultar por encima con pie, cabecera, etc. Como está al 100% sin margin no me sale ningún scroll, y a su vez se mantiene las proporciones de margenes indiferenctemente de la resolución.
Bueno, pues nada más, darte las gracias de nuevo y hasta la próxima por aquí
