(este tip, es parte de: "Cómo ver igual tu página en todos los navegadores con CSS 1ª parte") (este tip se complementa con "Hacks para el CSS de IE")
Como ya dije en mi anterior tip, nuestro objetivo, es conseguir que nuestra WEB, se vea igual en todos los navegadores (o al menos, en los más importantes), pero muchas veces, el problema viene por la manera que tiene cada navegador de mostrar los elementos.
Por ejemplo, si sólo pones:
Código :
<p>contenido</p>
Y lo renderizas con varios navegadores, verás que hay diferencias en el resultado entre algunos de ellos. ¿por qué? Pues como digo, porque cada navegador define como cree conveniente los margenes que le pone al elemento <p>, su padding, su tamaño de fuente, posición relativa... Esto no sólo le ocurre a los <p>, sino a casi todos los elementos que estamos acostumbrados a usar. Y cada navegador, tiene su "estilo por defecto". Y nunca coinciden...
¿cómo lo arreglamos? Reseteando el CSS.
REQUSITOS PREVIOS:
rizome :
Es imprescindible, para el correcto seguimiento de este tip, un conocimiento adecuado y con soltura de CSS (en realidad, el conocimiento del CSS debe ser obligatorio para cualquiera que quiera diseñar para la WEB). Si no sabes lo que es el CSS, o no lo manejas (bien), te recomiendo que antes de seguir, te revises los manuales de CSS que encontrarás en cristalab, en particular estos dos:
La Guía de Referencia CSS 2, con ¿todas? (las más importantes) propiedades aplicables por CSS. (Ambos, manuales de Ramm)
Reseteando el CSS
Mediante este sencillísimo concepto, le diremos al navegador que visualice nuestra WEB, que no queremos que aplique "su estilo", sino el que definamos nosotros. Para ello, sólo tenemos que "inicializar", al principio de nuestra hoja de estilos, la propiedad que queremos "resetear", del elemento que queramos tener "reseteado".
Por ejemplo, el "reset" más conocido, es:
Código :
* {margin:0px;padding:0px;}
¿Qué hace esto? Pues puesto al comienzo de nuestra hoja de CSS, le dice al navegador: <<Quiero que le quites el margen y padding por defecto, a todos los elementos de mi WEB>> Desde entonces, todos los navegadores le quitarán el margen/padding a cualquier elemento, en consecuencia, este aspecto será igual en cualquier navegador.
Después del reset, claro, tenemos que definir los valores que queramos usar.
¿y hay algún reset más completo? Hay muchos. Encontraréis "CSS reset" para todos los gustos, unos más extensos que otros, en San Google
Yo, suelo usar éste, ligerísimamente modificado, que encontré por ahí:
Como veréis, no sólo quita el margen/padding a todos los elementos, sino que hace otras muchas cosas, como "alinear abajo" los elementos de línea, o hacer que se hereden las fuentes en todos los elementos, o quitar el "marco punteado" de los elementos cuando los "seleccionamos", o aplanar los bordes de las tablas, o poner a 1px las líneas <hr>... etcétera.
CONSEJOS:
Para usar este reset (o cualquier otro), has de ponerlo al principio de la primera declaración CSS que tengas, pues si no, te sobreescribirá las anteriores ("regla de la cascada")
Cuando uses un "reset", resetea al principio de empezar a diseñar. Si aplicas este reset a un documento que ya tengas hecho y terminado, verás como muchas cosas puede que se te descuadren, y tendrás que "redefinirlas".
Una buena idea, puede ser, guardar el reset anterior en un documento nuevo (reset.css), y "linkearlo" al principio de vuestras webs, cuando empeceis a trabajar, de la siguiente manera:
Si ya has llegado hasta aquí, puede que aún necesites un último empujón. Puede que aún se te resistan algunas partes de tu WEB, o que no termine de encajar algún div. Pasaremos entonces a la última parte de esta serie: Los Hacks de CSS. ______________________________________ Disclaimer: Como bien dice The Fricky!, los "trucos" del próximo tip son un último recurso). Antes, hay que haberse esforzado en conseguir una homogeneidad visiblemente aceptable en todos los navegadores. Sólo entonces, cuando no nos quedan más cartuchos, se puede abordar el problema desde el lado de los "trucos."
Este tip, es parte de otros tres, así que quisiera que los tres estuvieran linkados entre sí, pero hasta que no han estado publicados, no he podido tener las URLs de cada uno. Para ello, necesito que algún MOD edite las dos primeras líneas, para que quede así:
Tengo una web.. creo que ya sabes cual a estas alturas con dos estilos css. En uno de ellos cargo los links con un color blanco y en otro css cargo los links en un color verde. (ccs1 y css2) Bueno, pues me toma siempre como prioritario el css1, le estoy dando vueltas y consultando en sanG pero no termindo de arreglar este problema. Adjunto el code:
he jugado con el atributo rel= pero no consigo nada de nada.
Ha todo esto, la navegación de la web no tiene variación en la barra de direcciones. es decir: si la pagina es www.pepe.es/index.html y accedes a noticias, en vez de ser www.pepe.es/noticias.html se queda con la misma dirección (siempre en index.html) La página principal carga el resto de html en un DIV mediante AJAX
* La única diferencia en los dos css es únicamente los links (a link, a hover, ...)
Hola Drarock :
Buen Tip?gracias por compartirlo. Queria decir dos cosas, mas bien consultar. He utilizado los css sprites, y todo ha funcionado bien salvo dos cosas y no se si se puede corregir:
1) la altura de mis botones es mayor en el browser, no entiendo por qué si le estoy dando el valor adecuado. Puede ser que haya algun otro valor que esté influyendo pero no logro darme cuenta.
2) En IE funciona bien pero en Opera solo sale el tex-indent. No he probado aun en Mozilla.
con dos estilos css. En uno de ellos cargo los links con un color blanco y en otro css cargo los links en un color verde. (ccs1 y css2) Bueno, pues me toma siempre como prioritario el css1, le estoy dando vueltas y consultando en sanG pero no termindo de arreglar este problema. Adjunto el code:
