Foros del Web - espacio blanco entre capas

Foros del Web (http://www.forosdelweb.com/)

- CSS (http://www.forosdelweb.com/f53/)

- - espacio blanco entre capas (http://www.forosdelweb.com/f53/espacio-blanco-entre-capas-373836/)

espacio blanco entre capas

Hola amigos,

tengo un problema, estoy maquetando con css y tanto en Firefox como en IE crea espacios en blanco entre capas adyacentes sinmotivo aparente, espero que me podais ayudar.
Os dejo el codigo HTML y el CSS

Codigo html:

Código HTML:

<html>
 <head>

 <link rel="STYLESHEET" type="text/css" href="./css/estilo.css">
 </head>
 <body>
 
 <div id="contenedor">

  <div id="cabecera">CABECERA</div>

 <div id="cuerpo">

        <div id="menu">

         <div class="barraMenu">

          <a class="botonMenu" href="">Opción 1</a>

             <a class="botonMenu" href="">Opción 2</a>

          <a class="botonMenu" href="">Opción 3</a>

          <a class="botonMenu" href="">Opción 4</a>

         </div>

        </div>
 <!-- aqui es donde obtengo un espacio en blanco: en Firefox y IE -->

        <div id="principal">

             AQUI IRIA TODO EL TEXTO

             <div id="derecha"><img src=".\fotos\DSCN2621.JPG"/></div>

        </div>

  </div>
 <!-- aqui es donde obtengo un espacio en blanco: solo en Firefox -->

  <div id="pie">pIE</div>
 </div>
 </center>
 </body>
 </html>

Codigo css:

body {background: #CCFFCC;}
#contenedor { background: #FFFFFF;
margin:auto;
width: 770px;
}
#izquierda { float: left;
padding-right: 10px;
}
#cuerpo {}
#principal { text-align: justify;
font-family: arial;
font-size: 11px;
padding-left: 10px;
padding-right: 10px;
background: #CCCCCC;
}
#cabecera { text-align: center;
background: #0000FF;
}
#pie { text-align: center;
background: #00FF00;
}
a { text-decoration: none; }
#derecha {float: right;
margin-left: 10px;
}
/* estilos para el menu */
#menu {
height: 20px;
background: #EEFFEE;
}
#menu div.barraMenu,
#menu div.barraMenu a.botonMenu {
font-family: sans-serif, Verdana, Arial;
font-size: 8pt;
color: white;
}

#menu div.barraMenu {
text-align: left;
}

#menu div.barraMenu a.botonMenu {
background-color: #556975;
color: white;
cursor: pointer;
padding: 4px 6px 2px 5px;
text-decoration: none;
}

#menu div.barraMenu a.botonMenu:hover {
background-color: #637D4D;
}

#menu div.barraMenu a.botonMenu:active {
background-color: #637D4D;
color: black;
}

gracias de antemano y saludos

Hola!..

A mi parece vi varias cosas algo extrañas en tu código CSS, aproveché de ordenar un poco y eliminar código de sobra, y me quedó algo así:

Código:

body {background: #CCFFCC;}

#contenedor { background: #FFFFFF;

margin:auto;

width: 770px;

}

#izquierda { float: left;

padding-right: 10px; 

}

#cuerpo {}

#principal { text-align: justify;

font-family: arial;

font-size: 11px;

padding-left: 10px;

padding-right: 10px;

background: #CCCCCC;

}

#cabecera { text-align: center;

background: #0000FF;

}

#pie { text-align: center;

background: #00FF00;

}

a { text-decoration: none; }

#derecha {float: right;

margin-left: 10px;

}

/* estilos para el menu */

#menu {

height: 20px;

background: #EEFFEE;

}

.barraMenu, .botonMenu a {

font-family: sans-serif, Verdana, Arial;

font-size: 8pt;

color: white;

background-color: #556975;

color: white;

cursor: pointer;

padding: 4px 6px 2px 5px;

text-decoration: none;

}
 

.barraMenu {

text-align: left;

}
 

.botonMenu a:hover {

background-color: #637D4D;

}
 

.botonMenu a:active {

background-color: #637D4D;

color: black;

}

Y ya no sale el dichoso espacio.

Saludos!

Hola,
Gracias por contetar tan rapido, pero he de decirte que sigo con el mismo problema y ademas el efecto de iluminacion del menu al seleccionar una opcion lo he perdido, asi que lo siento, pero de momento no hec onseguido solucionar el problema.

Aprovecho para aclarar, que cuando digo espacio en blanco me refiero a como un salto de linea (que no deberia aparecer) y deja un espacio entre las dos capas adyacentes ...

alguna sugerencia mas?

saludos

Hola,

Mira, se me pasó un estilo en el link, pero eso lo corriges fácilmente en la hoja de estilos, a mi no me aparece el espacio que mencionas, con el nuevo código, solamente te hace falta modificar el estilo.

Saludos.

Hola de nuevo, y perdona otra vez,

pero, donde esta el nuevo codigo?, quizas se te olvidó ponerlo?

saludos

¿? en el mensaje Nº2!, no es el CSS original ni una cita a tu mensaje, es el código que modifiqué y probé en mi navegador.

Saludos!