Espacio de 2 pixels entre capas
Hola amigos,
Recurro a vosotros como última instancia.
Tengo 2 capas, 1 capa con una imagen y seguidamente otra capa con otra imagen, que forman un cuadrado, las capas no estan posicionadas de ninguna manera, por lo cual siguen el flujo del código, pero en Firefox, me sale un espaciado entre ellas de 2 pixels mas o menos, vamos que no quedan contiguas.
Recuerdo haber solucionado esto en otra web que hice, pero no recuerdo en cual, ni como, y todo lo que encuentro en google son preguntas sin una respuesta clara de otros foros...
Ya no se como narices cargarme ese espacio, por que en IE5, IE6 y IE7 se ve perfecto! grrr
esta es la parte del código de la web que me hace esto...
<code>
<div><img src="imagenes/img-izq-background-top.png" border="0" alt=""></div>
<div><img src="imagenes/img-izq-background.png" border="0" alt=""></div>
</code>
los dos divs tienen margin 0 y nada mas...
hay mas css, lo que pasa es que es muy extenso...
Una ayuita? Mil gracias de antemano!
markshock
flandepan
apaga y enciende el router one more time xD
http://www.youtube.com/watch?v=2OBZHB5I89A
aaaaaaa...nooooo meeee vaaaa inteenneeeeeeeeeee!
http://img.melodiasmoviles.com/www.choteras.com/1010/imagenes/1247805950.jpg
luisgf
apaga y enciende el router one more time xD
markshock
Ahora si que me tiene frito, al menos ya he localizao donde puede estar el problema (localizado por llamarlo de alguna manera) jajaja es el CSS
si aislo el código sale cojonudo, sin tener ninguna hoja de estilos ni nada...
ejemplo:
http://www.newsiteworks.com/test_marc/index4.html
sugerencias? xD
markshock
He puesto una capa con la imagen de la parte superior y otra capa con la imagen inferior, entonces en medio le he colocado una tabla y le he puesto border = 1.
Mirad donde situa el firefox la tabla, por debajo de capa superior, se come el espacio, no se pone a continuación, y eso que en la capa tengo puesto su height....
http://www.newsiteworks.com/test_marc/index3.html
la capa que contiene todo esto tiene estas especificaciones...
<code>#leftcolumn {
display: inline;
width: 158px;
float: left;
}</code>
no tendrá nada que ver el float este.. no?
que raro...
markshock
Gracias por vuestra ayuda amigos, después de barajar todas las opciones me he decantado por indicar el tamaño de la imagen en la capa.
la imagen background-top.png la necesito suelta por que solo se escribe arriba, para iniciar el BOX con sombra interior.
la otra imagen la necesito como background, por que esa capa se va a repetir, estirando el BOX lo que precise el contenido, y abajo del todo le pondré otra imagen como la de background-top.png pero que sea al revés, para cerrar el BOX....
de manera que el contenido será el que marque la altura del BOX... esperad que subo los cambios y mejor lo veis...
el problema claro está en que ahora me deja el espaciado por la zona inferior... eeen fin...
http://www.newsiteworks.com/test_marc/
veis lo que quiero conseguir?
zigotica
prueba esto:
<code><div><img src="imagenes/img-izq-background-top.png" border="0" alt=""></div><div><img src="imagenes/img-izq-background.png" border="0" alt=""></div> </code>
de todos modos, igual es mejor si metes las 2 imagenes en la misma capa, ya que no hay mas contenido:
<code><div><img src="imagenes/img-izq-background-top.png" border="0" alt=""><img src="imagenes/img-izq-background.png" border="0" alt=""></div> </code>en este caso necesitarás hacer lo que decía kemie, darle display:block a las imagenes de esa capa
ya nos contarás
Usuario desconocido
Y digo yo primo, ¿porqué no le metes esa imagen (imagenes/img-izq-background-top.png) de fondo, con un repeat-x, y aparte de que mejoras un 0.05% la semántica de la página, se te quitan esos problemas?.
Creo que deberías darle un repasito bueno al código...
theCoder
Si conoces exactamente el tamaño que debe de tener el div que contiene a la imagen que es el que es mas alto de lo que toca... fuerza los valores para que nadie libremente interprete nada. Si haces la letra mas grande mediante el navegador el espacio aumenta por lo tanto firefox interpreta (pienso) que ahi debe de dejar el alto que tendria una letra
Saludos
markshock
Xarli
Sinceramente no veo el fallo se deberia ver todo perfecto.. pero bueno solucion rapida en el estilo de la capa height:5px; que es el tamaño de la imagen que vas a mostrar
Saludos
Ya lose que se debería ver bien, por eso no lo entiendo.. en fin.. voy a ver.. es que esas capas las uso para conformar un BOX con una sombra interior... y bueno... a ver como me lo monto...
markshock
HARTUM
<div class="quote">
flandepan
<blockquote>enciende y apaga el router.</blockquote>
</div>
reinicia el ordenador.
llama a tu proveedor.
no funcionaaaaaaaaaaAAAAAAAAAARGGHHHH!!!!!
:-D
gran video..
theCoder
Sinceramente no veo el fallo se deberia ver todo perfecto.. pero bueno solucion rapida en el estilo de la capa height:5px; que es el tamaño de la imagen que vas a mostrar
Saludos
hartum
flandepan
enciende y apaga el router.
reinicia el ordenador.
llama a tu proveedor.
no funcionaaaaaaaaaaAAAAAAAAAARGGHHHH!!!!!
:-D
markshock
flandepan
enciende y apaga el router.
No me seas enjuto... jajaja
Por cierto, gracias a todos por la ayuda, de veras, es que no se como solucionarlo sin usar una tabla... grrr!!
markshock
Ahí va el link:
http://www.newsiteworks.com/test_marc/
en la columna izquierda, vereis que hay como una cabecera de una caja y una separación de 2 pixels, eso ha de quedar junto.. en firefox claro, en IE ya queda...
que será.... que será...
luisgf
enciende y apaga el router.
markshock
un min... y lo subo
por cierto, el selector * con margin:0; y padding:0; ya lo tengo puesto :(
Usuario desconocido
Viendo ese código me da a mi que los píxeles blancos los ves por los DIV, no por las imágenes.
Con utilizar el selector * y meterle padding 0 y margin 0 te debería quitar todos los márgenes y los paddings.
Pero como te han dicho, lo mejor es que lo subas a algún sitio y se mira
kemie
intenta darle a esas imagenes display:block
theCoder
Sube la web y te lo miro en un second si quieres..
markshock
uso FireBug, pero no me muestra ningún comportamiento extraño...
voy a probar lo del padding... como sea eso...
Probado.. nada con padding:0, margin:0; nothing de nothing...
leñe.. que le voy a tener que meter una tabla...
theCoder
Has probado poniendo el padding a 0 ?
Te recomiendo que uses Firebug que tiene un inspector de elementos con un visor de los layouts muy bueno
Saludos