Búsqueda rápida
ArchivoLamentablemente a la hora de diseñar una página web tenemos que lidiar con problemas a la hora de que nuestro sitio se vea de la misma forma en los principales navegadores. Tenemos incluso hacks para Internet Explorer, el navegador que más problemas nos da ya que es reacio a cumplir con el estándar de la W3C. Sobre este tema han comentado recientemente en Vagabundia centrándose en Internet Explorer.
El uso de los hacks no es recomendable aunque a veces no queda otro recurso. Sin embargo, algunas de las diferencias de visualizacón entre los navegadores se deben a que cada navegador tiene sus propios valores por defecto para aplicar a las etiquetas HTML. Firefox tiene sus medidas por defecto para el padding, IE tiene otras medidas. Cada navegador tiene sus fuentes por defecto. Cada navegador tiene sus propias medidas para los bordes, dimensiones de imágenes, etc. Entonces en caso de que no definamos una propiedad se aplicará el valor por defecto del navegador, lo que resultará en algunos casos, en diferencias a la hora de visualizarse en la pantalla.
La solución a esto es normalizar el código CSS, que es lo mismo que resetear los valores de las etiquetas y ponerlos a cero, de forma que luego podemos tranquilamente especificar sus valores y no lidiar con las diferencias de cada navegador. Para esto basta con agregar las siguientes lÃÂneas al principio del código CSS:
/* Padding y margin */
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, p, blockquote, th, td {
margin: 0;
padding: 0;
}
/* Tamaños de los headers */
h1, h2, h3, h4, h5, h6 {
font-size: 100%;
}
/* Estilos de las listas */
ol, ul {
list-style: none;
}
/* Estilo y grosor de las fuentes */
address, caption, cite, code, dfn, em, strong, th, var {
font-style: normal;
font-weight: normal;
}
/* Bordes de las tablas */
table {
border-collapse: collapse;
border-spacing: 0;
}
/* Otros bordes */
fieldset, img {
border: 0;
}
/* Alineacón del texto */
caption, th {
text-align: left;
}
/* Comillas */
q:before, q:after {
content: ”;
}
Agregando este código al principio de nuestro CSS sobreescribirá los valores por defecto de cada navegador y sin afectar al resto del código CSS. En caso de que tengamos que hacer un diseño estricto es una buena técnica a emplear, y además, tenemos el total control del CSS en lugar de que el navegador lo controle. Claro que no resuelve los problemas de compatibilidad de CSS, por lo cual, si no queda más remedio, habrá que apelar a algún hack para resolver algún aspecto en particular.
Suscribete via email
RSS Feed
La idea es buena, borrar todo y empezar de cero, asÃÂ no nos encontramos con propiedades que son difÃÂciles de reastrear.
Ya que estamos, también agregarÃÂa:
* {margin: 0;padding: 0;}
para todos los elementos indefinidos.
De cualquier manera, mientras el modelo de caja de CSS sea diferente entre los distintos navegadores, los problemas nos seguirán persiguiendo y dándonos dolores de cabeza
Buena sugerencia, utilizando el asterisco para referirse a todos los elementos
Es como decia al final, no soluciona todos los problemas. Pero de repente aplicando esto antes nos ahorramos algunos y tal vez, en una de esas, nos evitamos tener que recurrir a algún hack. La otra opción es esperar a que IE deje de ser el navegador más usado
¿Tenés una silla para esperar sentado?
Dificil cambiar el mundo eh?
A raiz de esto, mi propuesta es para html5:
<tag></tag>
y listo. Solo nos manejamos con ID’s y class.
Cual es el sentido de los tag entonces? si a todos los reseteamos y hacemos lo que queremos con ellos?
Hola, estoy batyallando con css para navegadores, las letras se salen de mis div’s y en unos divs no se ve el rool over de los menu en listas desordenadas, en el IE si se logra ver, pero en Firefox no se ve, alquine me podria ayudar explicandome mas o menos como funcionana los paddings y margin las diferencuias entre porcentajes, pixeles y em, o las pociciones relativas o absulutas ya que mi pagina queda toda de cabeza cuando la ejecuto en Firefox, de antemano les agardesco sus atenciones,,,, estoy iniciandome en esto de las css y html, y ya me estan desesperando jeje pero espero su valiosa ayuda para no desistir que tengan un buen dia a todos , Saludos Cordialess
desentonado2@hotmail.com