Problema visual entre chrome y mozilla

[ALEsR]

Tengo un problema que no puedo solucionar y no entiendo por que es que esa simple division no se adecua como yo quiero.

Asi se ve en chrome:
http://img651.imageshack.us/img651/1081/foto1chrome.jpg

Y asi en mozilla firefox:
http://img714.imageshack.us/img714/8788/foto1mozilla.jpg

Alguien tiene idea de como se vean iguales en ambos , lo hice con divs alguna ayuda?

[armandoweb]

Hola:

Y se supone que esa linea debe estar o no??
Es una imagen, un borde de divs o que es??

Saludos.

[ALEsR]

Si esa linea debe estar es un div aparte esa linea por que no le encontraba solucion , se debe ver como en chrome y en mozilla se me corre para el costado como en la imagen , no entiendo por que.

[CraToS]

Por qué no pones el link del sitio (si lo tienes online) o en su defecto, el pedazo de código ahí y los CSS que usaste, para ver por dónde anda el asunto.


Muchas veces, dependiendo de las propiedades de las capas vecinas, es necesario colocar algún div vacío después de algunos elementos, para que quiebre el orden y separe las capas. Algunos browsers lo ocupan....

Algo así como

Código HTML:

<div class="break"></div>
 

donde

Código CSS:

.break { clear:both; }
 

Saludos

[ALEsR]

Gracias por la atención, coloque un break como me dijiste pero los resultados no fueron mejores.
Te paso el link de la web , desde ya pido disculpa los miles errores que debe haber por que soy principiante.
La URL: http://alesr.com/clientes/prodeguay/
Desde ya gracias

[CraToS]

Bien, ya está. Vamos punto por punto.


Primero que nada, un par de detalles, se te pasó cerrar un par de etiquetas por ahí:

#1, la del cierre de la lista, cerca de la línea 113. (faltó el </ul>
#2, la del div del id="contenedor" (poner un </div> justo antes del </body>)



Con respecto al cssindex.css, te recomendaría, donde tienes la declaración para html, que le agregues también body, así:

Código CSS:

html, body {
    height:100%;
    width:100%;
    margin:auto;
    text-align:center;
    background:url(../img/fondo.jpg) repeat-x;
}
 

Y finalmente, ahora sí, el famoso divisor que te da bronca, para arreglar ese asunto de la línea desplazada, es sólo cuestión de no aplicarle el class que le hiciste a la imagen directamente, sino más bien aplicárselo a un div que encierre a la imagen en sí.

En otras palabras, reemplazar:

Código HTML:

<img src="img/divison.png" name="Division" class="divison1" />
 

por

Código HTML:

<div class="divison1"><img src="img/divison.png" name="Division" /></div>
 

lo mismo con el otro divisor que tienes.

Ahora, como veo que quedan un poquito tirados hacia abajo, puedes entonces poner un div debajo de cada división, con el class ese de break que te dije antes, y le puedes agregar una altura determinada, algo así:

Código CSS:

.break {clear:both; height:20px;}
 

y entonces cada división debe quedar algo como:

Código HTML:

<div class="divison1"><img src="img/divison.png" name="Division" /></div>
<div class="break"></div>
 

Espero que te haya servido, y ahí te queda un rato para entretenerte en el CSS a ver si logras los márgenes que deseas.



Saludos!

[ALEsR]

Muchisimas gracias , sos un animal todo perfecto salio. Mil gracias por todo tu tiempo quedo andando como yo queria gracias a tu ayuda.

[CraToS]

Claro, con mucho gusto.


Como consejo te recomendaría empezar a practicar con divs anidados para no depender tanto de la propiedad de position:fixed, absoluto y demás, en el CSS.

Es más cómodo utilizar muchos más divs unos dentro de otros, yusar más las propiedades de margin:auto para centrar, float:left o right para alinear divs dentro de otros, y cosas por el estilo.

Saludos