Imagen se solapa con borde superior en Firefox... ¿por qué?

JBRS · #1 (**permalink**) 27/03/2008, 04:30

Hola, tengo una imagen puesta así

<span class="estiloimg"><img src=imagen.jpg border=0>

y en estilo img pongo border-top: 1px solid #c0c0c0;

El caso es que en explorer se ve bien... pero en firefox se me monta... ¿por qué?

PatomaS · #2 (**permalink**) 27/03/2008, 07:36

Hola

Cuando dices "se monta", supongo que te refieres a la imagen sobre el borde gris, con lo que este no se ve.

Con los datos que pones, no hay ningún error. el borde superior de la imagen debe ser una línea gris clara.

Pero claro, no sabemos qué otras cosas hay en la página, o si algún otro estilo está interfiriendo.

Por cierto, recuerda poner entrecomillados los atributos html, por ejemplo

Código HTML:

<img src="imagen.jpg" border="0">

Felicidad

JBRS · #3 (**permalink**) 27/03/2008, 08:35

Nada, no hay manera, ahora lo tengo así para probar, y en firefox el de arriba lo chafa la imagen (aparece como movida)

<span id="caberotuloseccionb"><img src="logo-cuadrados-sb.gif"></span>

Y estilo

#caberotuloseccionb {
border-right: 5px solid #c0c0c0;
border-left: 5px solid #c0c0c0;
border-top: 5px solid #c0c0c0;
border-bottom: 5px solid #c0c0c0;
}

Mikmoro · #4 (**permalink**) 27/03/2008, 10:41

Pruébalo así:

#caberotuloseccionb {
border: 5px solid #c0c0c0;
display: block;
}

Mikel.

PatomaS · #5 (**permalink**) 27/03/2008, 10:44

Hola

Tomé la información que nos das, la pegué en un archivo vacío e hice la prueba.

todo se ve bien, un borde gris de 5 pixels de ancho y dentro una imagen con un borde superior rojo que se sobremonta al gris:

Aquí te dejo el código de ejemplo que usé:

Código HTML:

<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es">
<head>
	<style type="text/css">
		html,body { width: 100%; height: 100%; background-color: #fff; color: #000;}
		#caberotuloseccionb {border-right: 5px solid #c0c0c0; border-left: 5px solid #c0c0c0; border-top: 5px solid #c0c0c0; border-bottom: 5px solid #c0c0c0;}
		img {border-top: 1px solid #f00;}
	</style>
	<title>Pruebilla</title>
</head>
<body>
<div id="Base">
	<span id="caberotuloseccionb"><img src="imagen.gif" border="0" /></span>
</div>
</body>
</html>

Por cierto, como te comenta Mikmoro, deberías optimizar y reducir tu código, entre otras cosas, te ayudará a encontrar y resolver problemas.

Felicidad

JBRS · #6 (**permalink**) 28/03/2008, 04:56

Arghh, ¡con el display:block funciona... pero lo que tengo al lado me lo baja!

(pongo lo que tengo al lado)

<span class="menunombre">SECCION A </span>
<span class="menunombre">SECCION B </span>
<span class="menunombre">SECCION C </span>

y su css...

.menunombre{font: 8px Verdana;
color: #A0A0A0;
border-right: 1px solid #c0c0c0;
border-left: 1px solid #000000;
margin-bottom : 0px;
line-height:16px;padding: 5px 0 5px 18px;
margin-top:0px;margin-left:0px;
background-image: url('fondomenudegrcab2.gif');
}

¿Qué hace el display block exactamente? ¿por qué sin él la img tapaba la raya?

Y sí, he de optimizar MUCHO código.

Mikmoro · #7 (**permalink**) 28/03/2008, 05:01

El display: block; lo trata como un bloque, que crece para albergar lo que tenga dentro y ocupa todo el ancho.
¿Tiene un ancho determinado la imagen? Pues dale un ancho al bloque (width).

Mikel.

JBRS · #8 (**permalink**) 31/03/2008, 03:46

No hay forma. Con el ejemplo de PatomaS, también en Firefox la imagen me chafa el borde de arriba.

Luego, si pongo el display: block (con ancho y todo Mikmoro) se ve bien, pero entonces la línea que iba a su derecha (he copiado el código en mi mensaje anterior) la tira a abajo sin ton ni son.

¿Alguna idea?

arriaka · #9 (**permalink**) 31/03/2008, 05:43

Hola JBRS

Para empezar, te recomendaria que nos pusieras el codigo que quieres solucionar todo junto, porque sino nos hacemos un lio y no lo entendemos bien.

Para poder poner el texto al lado de la imagen tienes que añadir float a caberotuloseccionb:

Código:

#caberotuloseccionb {
	border: 5px solid #c0c0c0;
	display:block;
	width: ANCHODEIMAGENpx;
	float:left;
}

Asi, lo unico que te quedara es ajustar la altura a la que quieres que se coloque el texto. Puede que para ello tengas que crear un nuevo div.

Espero haberte entendido y que ese sea la solucion. Saludos

PD: No olvides hacer un clear cuando sea necesario.

JBRS · #10 (**permalink**) 01/04/2008, 10:59

Arriaka, estoy en lo que me dices de ajustar la altura. He creado un nuevo div, pero en este segundo no logro que se ponga abajo del todo respecto al float (se alinea a la misma altura).

No me va ni con margin-top:10px (sí, va pero con explorer... en firefox pasa del tema) ni con vertical-align:text-bottom; ni con vertical-align:bottom;

¿Alguna idea?

Mikmoro · #11 (**permalink**) 01/04/2008, 11:16

Cita:

Iniciado por JBRS

No hay forma. Con el ejemplo de PatomaS, también en Firefox la imagen me chafa el borde de arriba.

Luego, si pongo el display: block (con ancho y todo Mikmoro) se ve bien, pero entonces la línea que iba a su derecha (he copiado el código en mi mensaje anterior) la tira a abajo sin ton ni son.

¿Alguna idea?

No, no lo tira abajo sin ton ni son. Perdona pero te lo debería haber puesto: si le pones display: block; para que permita más contenido a su lado lo debes flotar, es decir, poner float: left;

Sin el código completo a la vista tampoco puedo estar seguro de si es la solución definitiva.

Mikel.

JBRS · #12 (**permalink**) 01/04/2008, 12:18

Gracias Mikmoro, pero ya estoy en el siguiente paso: al flotarlo no logro que la DIV de la derecha se ponga abajo...

Me cito a mi mismo:

Cita:

Arriaka, estoy en lo que me dices de ajustar la altura. He creado un nuevo div, pero en este segundo no logro que se ponga abajo del todo respecto al float (se alinea a la misma altura).

No me va ni con margin-top:10px (sí, va pero con explorer... en firefox pasa del tema) ni con vertical-align:text-bottom; ni con vertical-align:bottom;

¿Alguna idea?

Mikmoro · #13 (**permalink**) 01/04/2008, 15:03

Ah, pues lo siento. Yo ya me he perdido. Si quieres que intente echarte un cable vuelve a poner el código que estás usando y qué es lo que quieres conseguir. Si ya no es necesario, pues siento no haberte ayudado a tiempo.

Mikel.

JBRS · #14 (**permalink**) 02/04/2008, 00:55

Hola Mikel, muchas gracias por tu atención. Te explico cómo está el tema:

Finalmente pongo la imagen de la izquierda en un DIV con un display:block y un float:left. El problema es que la capa de la derecha, es de menor altura y quiero ponerlo abajo, de tal forma que quede así:

CAPA A
CAPA A
CAPA A CAPA B CAPA B CAPA B

Y sólo lo logro en explorer, en firefox pasa (o me lo muestra a otra altura, o abajo... incluso a veces deja un molesto espacio con el float ya que gráficamente debe ir todo unido).

Te puedo poner código, pero ahora estoy liado a empastres y chapuzas para ver si se soluciona a base de añadir capas, y entre eso y las que tengo puestas para otras cosas arriba es muy farragoso:

Cita:

#caberotsec {
width:95%;
border-bottom: 1px solid #c0c0c0;
height:25px;
margin-top:20px;
text-align: left;
margin-left:10px;clear:both;
}

#imgrotsec{margin-right:-5px;margin-bottom:-6px;
border-right: 1px solid #c0c0c0;
border-left: 1px solid #c0c0c0;
border-top: 1px solid #c0c0c0;
border-bottom: 8px solid white;
vertical-align:text-bottom;
height:26px;
width:96px;
display:block;float:left;
}

#menucaberotsec {margin-top:15px;vertical-align:text-bottom;vertical-align:bottom;
clear:right;
}

<div id="caberotsec">
<div id="imgrotsec">
<a href="http://"><img src="logo-cuadrados.gif" width=95 height="26" border="0"></a></div>
<div id="menucaberotsec">
<span class="cabemenunombre">SECCION 1</span><span class="cabemenunombre">SECCION 2</span><span class="cabemenunombre">SECCION 3</span>
</div></div>

Mikmoro · #15 (**permalink**) 02/04/2008, 03:42

Bueno, no estoy seguro del todo de que esto sea lo que buscas, pero por lo que he entendido, creo que bastaría con que cambiaras el clear right que tienes por clear both:

#menucaberotsec {margin-top:15px;vertical-align:text-bottom;vertical-align:bottom;
clear:right;
}

por

#menucaberotsec {margin-top:15px;vertical-align:text-bottom;vertical-align:bottom;
clear:both;
}

Mikel.

JBRS · #16 (**permalink**) 02/04/2008, 04:58

Mmm nop Mikmoro, creo que nos hemos pasado a otro tema. Los clear, si los toco, se descuanjeringa.

Esto va más de lo siguiente (recapitulo). Tengo una imagen X con bordes y un menu de texto Y. Tienen que aparecer así:

XXX
XXX
XXX YYYYYYYYYYYYYYYYY

(la imagen X es mucho más grande, Y es un texto pequeño que aparece abajo).

Inicialmente el problema es que al poner borde a la imagen X en firefox, me tapa el borde de arriba (él sabrá por qué). ¿Solución?: ponerle un display:block. ¿Problema de la solución? YYY me lo pasa entonces abajo. Solución: ponerle un float:left a la capa con display ¿Problema entonces? Las YYY me las pone a media altura y no puedo bajarlas.

Me queda así.

XXX
XXX YYYYYYYYYYYYYYYYY
XXX

Realmente lo que necesito es algún sistema para poder poner 2 DIV, uno X y uno Y, juntos, y que el Y esté alineado verticalmente abajo.

Supongo que es algo "normal" que cada medida que le dé explorer la muestre de una manera y firefox de otra (por aquello de que cuentan los bordes y otras historias... ¿eso se soluciona con hacks?)

Aprovecho para decir que odio profundamente al CSS, ideado sin duda por el mismísimo diablo. Quisiera algún nombre de uno de sus creadores para saber a quién tengo que maldecir cada vez.

Mikmoro · #17 (**permalink**) 02/04/2008, 06:38

Debo estar un poco tonto, pero me lio.

¿Puedes poner una imgen con lo que quieres conseguir? o bien, ¿el código que has puesto hace que se vea tal y como quieres en explorer 6? Si es así, veré fácilmente lo que hay que intentar.

EDITO: ah, vale, ahora creo que lo entiendo. Miraré a ver cómo se podría conseguir.

Mikel.

Mikmoro · #18 (**permalink**) 02/04/2008, 06:51

Creo que quizá lo podrías arreglar poniendo esto en el selector del menú:

line-height: 36px!important;
line-height: 0px;

es decir:

#menucaberotsec { margin-top: 15px;
vertical-align: bottom;
clear: right;
line-height: 36px!important;
line-height: 0px;
}

Prueba a ver si es lo que buscas.

Mikel.

Mikmoro · #19 (**permalink**) 02/04/2008, 07:13

También podrías hacer lo así:

Cita:

Aunque en este caso no sé si quieres que sea vea como se ve en IE6 o en FF.

Mikel.

JBRS · #20 (**permalink**) 03/04/2008, 01:04

Hola Mikmoro,

En primer lugar, muchas gracias por tu paciente y laboriosa ayuda.

Después, ha habido avances sustanciales. No obstante sigo con los siguientes problemas:

A la capa de la derecha (#menucaberotsec) le pongo el borde gris en lugar de a la capa grande, para que sólo recorra una parte. En Firefox lo muestra bien, pero en explorer la raya no empieza en su capa, si no que chafa a la que está "flotada".

Me explico, debería salir así:

A
A
A B B B
-------

El caso es que en explorer la raya chafa la A de abajo.

Luego en explorer entre el FLOAT y la capa de la derecha, me deja un espacio de dos píxeles que me rompe el diseño. Puedo forzarlo con márgenes negativos, pero entonces en firefox se chafan...

¿Hay solución para ambos temas?

Mikmoro · #21 (**permalink**) 03/04/2008, 02:08

Cita:

Iniciado por JBRS

Hola Mikmoro,

En primer lugar, muchas gracias por tu paciente y laboriosa ayuda.

Después, ha habido avances sustanciales. No obstante sigo con los siguientes problemas:

A la capa de la derecha (#menucaberotsec) le pongo el borde gris en lugar de a la capa grande, para que sólo recorra una parte. En Firefox lo muestra bien, pero en explorer la raya no empieza en su capa, si no que chafa a la que está "flotada".

Me explico, debería salir así:

A
A
A B B B
-------

El caso es que en explorer la raya chafa la A de abajo.

Luego en explorer entre el FLOAT y la capa de la derecha, me deja un espacio de dos píxeles que me rompe el diseño. Puedo forzarlo con márgenes negativos, pero entonces en firefox se chafan...

¿Hay solución para ambos temas?

Varias cosas:

1.- Opino que antes de solicitar ayuda, debes tener decidido el diseño aunque luego incorpores nuevos matices. Si alguien te da soluciones para cómo hacer una cosa y después la cambias (como lo de los bordes), no hacemos nada, más que peder el tiempo.

2.- No entiendo qué significa que "la chafa". Creo que ya has comprobado en tus anteriores mensajes que deberías ser más explícito, para no obligar a la gente a comerse la cabeza intentando comprender qué es lo que querrías conseguir.

3.- Recuerda que un recurso muy útil es el "important", que explorer no lo entiende. Si quieres dar por ejemplo un margen izquierdo a IE de 10px y a FF de 4px, lo pones así

margin-left: 4px!important;
margin-left: 10px;

donde explorer hace caso al de 10, y FF al de 4.

Mikel.

arriaka · #22 (**permalink**) 03/04/2008, 04:14

JBRS te esta haciendo currar, eh Mikel?

A ver si soluciona lo que tenga que solucionar.

Cita:

Iniciado por Mikmoro

1.- Opino que antes de solicitar ayuda, debes tener decidido el diseño aunque luego incorpores nuevos matices. Si alguien te da soluciones para cómo hacer una cosa y después la cambias (como lo de los bordes), no hacemos nada, más que peder el tiempo.

2.- No entiendo qué significa que "la chafa". Creo que ya has comprobado en tus anteriores mensajes que deberías ser más explícito, para no obligar a la gente a comerse la cabeza intentando comprender qué es lo que querrías conseguir.

Totalmente de acuerdo. Saludos!

JBRS · #23 (**permalink**) 03/04/2008, 04:24

Pues el diseño está totalmente decidido y hecho en fotoxop, el problema es que llevar eso a CSS me hace tratar de simplificar para ver si funciona "algo", y cuando trato de recuperar los detalles, estos son si cabe más desquiciantes.

Yo por mi dejaría la dichosa rayita como está, pero el otro diseñador la considera importante. Hasta ahora usaba el CSS para cosas simples y cuando se trata de afinar con imágenes y rayas...

Con chafar creía estar siendo explícito, me refiero a que se superponen dos capas que deberían estar separadas (en explorer demasiado separadas, si las junto, en firefox superpuestas). De todas formas voy a probar ese important a ver cómo resuelve los márgenes.

Igualmente muchas gracias, tus soluciones son muy útiles y algunas cosas que no me han servido para este caso las he anotado para otros.

Mikmoro · #24 (**permalink**) 03/04/2008, 04:36

Cita:

Iniciado por arriaka

JBRS te esta haciendo currar, eh Mikel?

No, yo por ese lado encantado, porque esto me divierte mucho. Pero soy un tipo ordenado, y me gusta abordar las cosas con cierto orden.
No me molesto en absoluto, pero creo que es bueno aclarar.

Mikel.

JBRS · #25 (**permalink**) 03/04/2008, 04:40

Cita:

No, yo por ese lado encantado, porque esto me divierte mucho. Pero soy un tipo ordenado, y me gusta abordar las cosas con cierto orden.
No me molesto en absoluto, pero creo que es bueno aclarar.

Además, cuando un tipo tan amable te ayuda pacientemente, tiene todo el derecho a poner sus normas y a un poco de orden...

Mikmoro · #26 (**permalink**) 03/04/2008, 05:23

Entiendo que te estás dando de cabezazos con css

, y como decías ayer, te quieres cagar a alguien (aunque yo me cargaría al diseñador de explorer antes que al de css

)

Si lo tienes ya diseñado en photoshop, creo que lo mejor sería ver qué es lo que se quiere conseguir viendo la imagen. Si no quieres ponerla aquí, súbela a un servidor y postea la dirección, junto con el código html y css que está usando en global. Yo te aseguro de que es la forma que mejor me aclaro, porque igual, como viste en el segundo ejemplo de ayer, la cosa podria tener mejor solución pero por partir de un sitio equivocado malgastas energías.

Me parece la mejor forma de conseguir una ayuda precisa y adecuada. Cuando es una pequeña consulta de un selector, suele valer con una pregunta, pero cuando es ya un marrón de diseño, como dices, "afinando", con preguntas sueltas es más difícil.

Mikel.

JBRS · #27 (**permalink**) 03/04/2008, 10:12

Pues la verdad es que gracias a los !important, estoy logrando dejarlo bastante bastante similar... mañana haré unas pruebas más a ver si logro rematarlo. Eso sí, te queda siempre la sensación de que es todo muy precario, que lo verás un día en otro ordenador y se verá mal, o que sacarán un nuevo explorer y se verá todo al revés...

En todo caso no sabes cuánto te agradezco la ayuda de los últimos días y tu predisposición. He buscado mucho por google y mucho tutorial y libro, pero como tus ayudas concretas nada.

Mikmoro · #28 (**permalink**) 03/04/2008, 10:43

Pues si necesitas ayuda ya sabes dónde estamos.

Mikel.