El borde es la solucion?

¿Cómo va gente? Quería preguntarles sobre algo raro que me está pasando con CSS.
Para empezar, tengo dos divs. La primera se llama "background" y la segunda "flash". Y ambas están centradas, el drama es que les asigné "top:0" y si no le coloco un borde, no me respetan la propiedad aplicada.

Mirenló ustedes mismos:

*Con borde
*Sin borde

Mi CSS:

Código :

@charset "utf-8";
html, body{
   margin:0;
   padding:0;
   text-align:center;
   border:solid 1px #000099;
}

#flash{
   margin:0 auto;
   padding:0;
   top:0;   
   width:1007px;
   height:960px;
   background:#006699;
}

#background{
   margin:0 auto;
   padding:0;
   top:0;
   width:1135px;
   height:960px;
   background: url('images/back_1152.jpg') no-repeat;
}

Y mi HTML:

Código :

<div id="background">
   <div id="flash">
     <p>Take me out</p>
     <p>I say take me out!!</p>
   </div>
</div>

Alguna sugerencia de como puedo evitar esos bordes y obtener el mismo resultado? Gracias.

A mí me pasó algo muy parecido, y no conseguí quitar los bordes y que funcionara el diseño...

SOLUCIÓN 1:
Así que puse los bordes "transparentes", y funcionó:

SOLUCIÓN 2:
Aún así... he dado con el motivo de porqué te sale esa especie de "margen"
(te recomiendo que te instales el FIREBUG para FireFox, que resulta muy útil para estas cosas)
Al parecer, la etiqueta "<P>" tiene unos márgenes (top y bottom) "predefinidos", que hacen que su contenedor "salte" hacia abajo.
Si haces la prueba, añadiendo: , verás como el problema se arregla "mágicamente".


SOLUCIÓN 3:
Y hay otra solución aún más mágica (y recurrente):
OVERFLOW:HIDDEN;

Hace unos post (de unos meses atrás), descubrí que con se arreglaban casi todos los problemas de "saltos" incontrolados.
Al parecer, esto es debido a que el "margin" predeterminado del <P>, del que hablaba en la solución anterior, hace que se "expanda incontroladamente" la capa contenedora.
Fijando el overflow a "hiden", se evitan estas "expansiones incontroladas", quedando el tamaño del contenedor, a los tamaños prefijados.


conclusiones:
Aunque la solución ideal a este problema, de las tres propuestas, creo que sería la segunda, hay que decir que la tercera, soluciona gran número de problemas, como en los post que mencionaba anteriormente (saltos de línea que se "aparecen mágicamente" al final de los DIV, a causa de saltos de línea del código fuente, aunque no deberían aparecer como tal en el diseño final)

[...] sólo dios sabe..
Después de todo lo dicho, sigo sin entender porqué motivo el ponerle un "borde" (aunque sea este transparente de 1px) soluciona (parcialmente) este problema. Quizá sea porque el borde, hace que el navegador ponga un "tamaño determinado" al contenedor, y eso, de alguna manera, impida su "expansión incontrolada".


PD:
aparte del FIREBUG para FireFox, casi imprescindible, hay otra herramienta utilísima, para ver en qué parte del xHTML está el problema causado por el CSS: Mouseover DOM Inspector v2.0.2 (genial, hasta el punto de que funciona online, en cualquier navegador)

(quizá tengamos suerte... y se pase por aquí algúno de los maestros del Clab, como Lunatic Lycanthrop, Aoyama o FeNtO)

solo le debes dar

#flash p{ margin:0;}

ya que el margen que te crea es debido a la caja del texto y no de las div's que la contienen.

Mariux escribió:

Usease... la Solución 2.

Woow, te debo la vida Rizome. Yo creo que esto va para un tip definitivamente.
Les agradezco a ambos la molestia. Un saludo.