Vista previa diferente en safari que en firefox

Buenas me estreno por aquí con un problemilla.

Estoy en estudios de diseño gráfico y nos han dado algunas nociones de realización de web a través de dreamweaver usando algo de lenguaje html y con css.

La cosa es que estoy realizando una web bastante sencilla como trabajo personal, y resulta que al principio se me veía igual tanto en safari como en firefox pero he añadido dos nuevos <div> en el css y ahora en firefox la previsualización se me ve correcta pero en cambio en safari se ve mal, como si las palabras estuvieran practicamente una encima de otra.

a que es debido esto? es porque he hecho algo mal? o debido al navegador safari ? (que si no recuerdo mal, me habían avisado que podía llevar problemas su uso para previsualizar)

gracias

Fijate que los divs estén cerrados y que cierren donde deben de cerrar.

pues en principio están bien cerrados si.

aquí te pongo un ejemplo de como lo tengo:

<!-- Begin barr -->
<div id="barr">
<p><a href="#">Contacte</a></p>
</div>
<!-- End barr -->

y en el css lo aplico así:

#barr{
margin-top:-20px;
}

#barr a{
color: #FFFFFF;
text-decoration:none;
}

Prueba a meter ese div dentro del div en donde va a ir el texto, no fuera.

lo he metido dentro y se me sigue viendo diferente, la palabra aparece en otro lado pero sigue estando bien en firefox y en safari no.

a ver, yo tengo 3 palabras en <p></p> por ejemplo

<p>contacto</p>
<p>fotos</p>
<p>inicio</p>

y a eso le aplico un fondo (como foto) que es una barra como esta: |

con lo que a partir del css y el div que le tengo asignado, les doy que se me repita esa imagen a la derecha de cada palabra con un cierto espaciado y que las palabras floten hacia la derecha con lo que me deberia quedar algo así:

contaco | fotos | inicio |

entonces lo que quiero es que la última barra no me aparezca y solo estén las dos de el medio. Para eso lo que hago es darle un nuevo div a la palabra inicio y no le aplico fondo con lo que la barra ya no aparece y me queda así:

contacto | fotos | inicio

que sucede ? que luego en firefox todo se ve perfecto y en safari la palabra inicio me aparece antes de la palabra contacto y sin barra separadora, como si se sobreponiera.

He intentado de dar el div dentro como me has dicho pero en lugar de ese "error" en safari me aparece inicio colocado encima de contacto y sin barra pero en firefox como siempre me aparece correctamente.

podría arreglarse esto si en lugar de darle <p> a cada palabra, les doy <br/> ?

espero que se haya entendido gracias

Pero como quieres que aparezca el texto, en horizontal o en vertical?

En caso de querer ponerlo en vertical, ¿porque no pones todo el texto con la pleca en el mismo <p></p>? de esta manera tampoco tienes que andar metiendo fotos, de hecho es un poco "absurdo" querer meter una pleca como una foto, es como si cada vez que quieres meter una tilde le pones una foto (no lo tomes a mal)

Luego, si le aplicas un <br/> lo que vas a hacer es ponerlos en vertical.

te dire algo mi hermano "ilp" si no quieres que los divs se crucen entre si pues entonces tienes que agregar en tu css
div#barr { clear:both} // esto puede hacer que tus divs no se crucen espero que busque mas informacion acerca del mismo... bye

Zeromm escribió:

lo quiero en horizontal, tal como lo he puesto en el ejemplo de arriba.

y lo de meter la barra en foto, me lo enseñaron así para poder editar los espaciados entre palabra y cada barra y que no me lo detecte como texto ni como lista.

así que, como me recomendais arreglarlo ? gracias

Hombre, puedes hacer éxactamente lo mismo con la pleca, en lugar de meterle el enlace a una imágen, poner la pleca, de esa manera también puedes editar el espacio entre palabras y no te realentizará la web, ten en cuenta que cuantas más imágenes metas más pesará la web (aunque en este caso tampoco sería nada llamativo), yo de todas formas pondría todo el texto en el mismo div (pleca incluida, ya que el propio espacio que trae por defecto en la fuente que uses está correctamente preparado, y si quieres darle más le metes un espacio y listo), de esta manera el texto no se te superpondrá seguro, porque estará en el mismo DIV.

yo puedo sugerir algo que a mi me ha servido muchísimo: la pseudoclase :first-child

Esto lo que hace es tomar el primer elemento de su clase. En este caso, podría ir asi:

Código HTML :

<div id="contenedor">
<p>Item 1</p>
<p>Item 2</p>
<p>Item 3</p>
</div>

y si aplicas lo siguiente:

Código :

#contenedor p:first-child{
display:none;
}

solo el "item 1" se desaparece. Esto es muy útil en tu caso, para evitar encerrar el primer elemento en otro div con el fin de demarcarlo como el elemento inicial, porque entre otras cosas, el código pierde valor semántico. Tendrías que hacer algo así entonces:

Código :

#contenedor p{
background:url(mi-super-pleca.jpg);
}

#contenedor p:first-child{
background:none;
}

La primera establece el back, y al segunda sobreescribe la instrucción, anulando la primera solo en el primer elemento. La pleca entonces debería quedar a la izquierda del div para que funcione bien.

Espero que le halla servido lo que menciono acá