Visualización incorrecta en diferentes exploradores

[nusee]

Hola! Disculpen las molestias, tengo un problema con un sitio que estoy desarrollando y la verdad es que intente de todo pero no puedo solucionarlo, si se fijan el <h3></h3> se mueve (hacia la izquierda) con respecto a los vínculos que tiene debajo cuando lo pruebo en los diferentes exploradores y no queda como quisiera.

Les dejo diferentes capturas de pantalla y el sitio para que vean a lo que me refiero (el sitio solo consta de una parte, no esta completo ni mucho menos ni contiene las metadatas y demás si no que solo deje la sección con la que tengo problemas, use background-color para que puedan apreciar bien tanto el título como los vínculos):

Un dato bastante curioso que pude observar es que en Mac (salvo con Firefox) se ve como yo quiero, en cambio en Win (en todos los exploradores) el titulo se desplaza hacia la izquierda

Mac:
- Safari
- Google Chrome
- Firefox
- Opera

Win:
- Safari
- Google Chrome
- Firefox
- Opera
- IE(8)

Por si quieren analizar el código les dejo el sitio en desarrollo.

Desde ya muchísimas gracias por todo.

Suertee! =)

[pcexpansion]

una explicación a por qué los exploradores hacen lo que les da la gana con las especifiaciones css, es esa misma, por les da la gana. Para un desarrollo coherente con todos los navagadores, no tienes otra que crear un css para cada navegador que no se vea como tú quieres. Es un trabajo tedioso, pero no hay otra.

[deirdre]

Hola pcexpansion

Esto que dices: "no tienes otra que crear un css para cada navegador" es un poco tremendista.

En líneas generales si diseñas con el doctype adecuado y con código estándard no vas a tener muchos problemas, salvo con iexplorer.

FF (desde el 3), Opera, Chrome, Safari suelen dibjuar el buen código de forma igual y en el caso de iexplorer (que hace lo que le da la gana) hay que utilizar ajustes, que dependiendo de lo complejo o sencillo que sea el diseño, requerirá más o menos trabajo de ajuste (en muchas ocasiones ninguno). Pero de esto a decir que hay que crear css para cada navegador, pues no.

Bye

[roy_mckrank]

Pon tu CSS para ver qué es lo que pasa.

[nusee]

Muchas gracias a todos los que se molestaron en leer y/o responder el mensaje. Te dejo un vínculo al código.

- CSS

Muchas gracias nuevamente!

Suertee! =)

[arthpix]

Yo creo que no es problema del css. Si te fijas, todos tienen la "I" encima de la "o" en "iorder" y la tipografía no es la misma en windows y mac(observa los remates inclinados de la "s" en las capturas de pantalla de Windows). Por consecuencia, el kerning (espaciado de caracteres) no es el mismo resultando en ese espacio vacío a la derecha. En mi caso en Firefox (Linux) veo la página prácticamente igual que como la quieres.

No puedes controlar que tipografías tienen instaladas los visitantes en sus equipos. Las opciones que te quedan:

1. Utilizar una imagen alineada a la derecha
2. Utilizar SIFR para reemplazar la tipografía exacta.
3. Alinear Iosis Designs a la derecha.

Lo más simple es lo último, siempre existirá una diferencia de espaciado, pero es menos notoria por que ya existe un espacio vacío de lado izquierdo.

[jomaruro]

Hola:

¿Has barajado la posibilidad de incluir un reset css en tu código?

Saludos.

[junihh]

Estuve viendo el codigo y una cosa: Primero debes cargar el "reset.css" y luego "mainContent.css". Por si no lo tienes claro, los reset-css sirven para poner en 0 todos los elementos de HTML, que por defecto vienen con atributos predefinidos que pueden hacerte la vida incomoda al maquetar.

Aparentemente no te presenta problemas, pero algunos navegadores si podrian tenerlo, asi que lo preferible es cargar el reset-css antes que cualquier otro.