En vez de moverse el recuadro, se mueve el marco. (en ie bien)

[rimon]

La verdad un poco dificil definir mi problema en pocas palabras para el titulo el post :( .

Bien, paso a explicar mi problema:

Primer muestro el codigo css:

Código:

body{
padding:0;
margin:0 10% 0 10%;
width:80%;
}
#marco {
margin:0;
width:100%;
background-color:#000;
}
#recuadro{
margin-left:2%;
margin-top:2%;
width:40%;
background-color:#006633;
}

Ahora el uso:

Código:

<div id="marco">
    <div id="recuadro">Uno<br />Dos<br />Tres</div>
</div>

Si se fijan bien.. el "recuadro" debe dejar espacio de 2% arriba e izquierda del "marco". Con el Internet Explorer, perfecto pero en Firefox.. lo que hace es arrastrar el "marco" hacia abajo dejando un espacio de 2%. Pero yo quiero que lo haga el "recuadro".

Resumiendo: En firefox en vez de dejar tranquilo el marco.. lo mueve hacia abajo en vez de mover el recuadro como bien lo hace el explorer.

A que se debe?? solucion?

Gracias :)

[chem]

Buenas rimon! En vez de dar margin al recuadro dale paddings al marco. Te tendría que quedar algo tal que asi:

Código:

body{
padding:0;
margin:0 10% 0 10%;
width:80%;
}
#marco {
margin:0;
padding-top: 2%;
padding-left: 2%;
width:100%;
background-color:#000;
}
#recuadro{
width:40%;
background-color:#006633;
}