Al comenzar un nuevo sitio, y al aplicar los primeros estilos a un documento XHTML, los parámetros que guían la forma en que se muestran las páginas no son los mismos. Es decir, no es cierto que todos los parámetros de una hoja de estilos estén en los mismos valores en todos los navegadores, ni siquiera están todos en 0. Cada navegador tiene unos ciertos valores, que pueden variar de manera especial, dependiendo del navegador y del sistema.
Para muestra vaya un ejemplo: en Firefox de Windows al mostrar un H1 como primer elemento de una página este tiene un mismo valor de margen para los lados superior e inferior de la caja, que crean un espacio blanco regular arriba y abajo del texto del encabezado.

En Internet Explorer 6 de Windows el H1 como primer elemento de una página tiene un valor dado para el borde inferior (valor distinto del de Firefox, por cierto) y un valor de 0 para el borde superior de la caja. Cuando el H1 es el segundo elemento el comportamiento en IE y FF es similar, eso si, con distintos valores de margen.

Los valores que suelen ser distintos generalmente corresponden al valor del margen de las cajas de texto (para los elementos de tipo bloque) y el valor del interlineado.
Si nuestra intención es que una página se vea lo más similar posible de un navegador y de un sistema operativo a otro la única opción posible es reescribir explícitamente todos los valores que varían en las distintas hojas de estilo por defecto de los navegadores. Es un trabajo laborioso, pero fructífero.
Para ahorrarnos tiempos la mejor estrategia es la siguiente: antes de comenzar con los estilos própios de nuestra página podemos aplicar una hoja de estilos “normalizadora”, que reescriba todos aquellos valores que varíen de una hoja de estilos de un navegador a la de otro, de forma que estandarizaremos la manera en que se ven por defecto los elementos. Una vez que tenemos esto podemos comenzar con los estilos propios de la página que estamos diseñando, reescribiendo si es necesario algunos de los valores que nuestra CSS estándar ha definido.
En este momento me encuentro definiendo una hoja de estilos estándar para navegadores, pero para poder finalizarla necesitaré de la ayuda de algunas personas, especialmente aquellas que tengan acceso a varios ordenadores con distintos sistemas operativos y navegadores. Quienes quieran colaborar no tienen más que dejarme un mensaje. Una vez que finalicemos con ella la pondremos a disposición de la comunidad para que podáis aplicarla a vuestros proyectos.

When we start a new site, and apply the first styles to a XHTML file, the parameters that guides the way the page is shown are not the same. I mean, it’s not true that all the parameters are set to the same values on different browsers, they are not even set all to 0. Each browser has certain values, that changes in certain ways, depending on browser an OS.
As an example: On Firefox, Windows, when you have a H1 as the first element of a page, it has the same value for the top and bottom margins of the box, creating a white space before and after the heading text.

On Internet Explorer 6, the H1 as first element of a page has a value for the bottom margin (though, different from the FF value) and a value of 0 to the top margin of the box. When the H1 isn’t the first element it behaves similarly in IE and FF, but with different margin values.

The values that usually change are text box margins (for block type elements) and the line height value.
If our aim is to get a similar display of the page from one browser or one OS to the other the only choice we have is to rewrite explicitly all the values that change it the browser’s default stylesheets. It’s a tiresome task, but fruitful.
To save time the best strategy would be to the following: before we start to apply styles to the page we can apply a normalizing styleshett, that overwrites all the values that change from one browser to the other, in order to standardize the way the elements are displayed.
Once we have that settled we can start with the page’s stylesheet, overwriting values of the normalizer CSS if necessary.
At this time I’m creating a normalizer stylesheet for different browsers, but to finish it I’ll need the help of more people, specially web designers with access to different PCs with different Operating Systems and browsers. If you want to help me just leave me a comment. Once we finish it we’ll release it to the community, to be used in all of your projects.

No hace mucho Joan Saura (el Conseller de Interior de Cataluña) ha propuesto la despenalización de las drogas en Cataluña para solucionar el problema del narcotráfico. Lamentablemente ningún otro político lo ha apoyado y se ha quedado más solo que Bin Laden el día del amigo…
Seamos sinceros, la despenalización no es la solución definitiva. El consumo de tabaco no está penalizado, pero eso no significa que no existan crímenes relacionados con él, como el contrabando.

Posiblemente la despenalización, tanto de las drogas como asi también de la prostitución, sean de gran ayuda para afrontar estos problemas, pero deben hacerse con cuidado y dando un marco regulatorio a estas actividades.
Lo importante es que lo que se debe despenalizar son a los drogodependientes y al consumo de drogas, para no seguir criminalizando a personas cuyo único problema es estar enganchados al consumo de unas sustancias que les hacen mal. Las actividades relacionadas con el narcotráfico deben seguir penalizadas.
Es muy probable que muchos de los drogodependientes existentes a los diversos tipos de drogas ilegales lleven una vida relativamente normal, sin necesidad de cometer crímenes de ninguna naturaleza, salvo el mero consumo de estupefacientes.

Mucha gente, cuando se habla de este tema, se escandaliza. Y es una reacción normal: las políticas contra las drogan han vuelto al tema de la drogodependencia un tema tabú y que no gusta tratar a las personas. Es preferible prohibir, esconder las drogas y mirar hacia otro lado para no ver la realidad en la que estamos inmersos. Esa actitud se debe probablemente a que los EEUU han impulsado mundialmente una actitud y una política contra las drogas que las situan en la ilegalidad y la marginalidad. La realidad es que su prohibición no ha acabado con la drogodependencia (ni acabará jamás) y ha tenido el efecto contrario. Y este aumento se ha dado, de alguna manera, por la carencia de valores, la individualidad, el consumismo y la superficialidad que las políticas económicas ultra-liberales (impulsadas mundialmente por, quien sinó, los EEUU) han impuesto sobre las sociedades actuales.
Pensar que persiguiendo a los consumidores se terminará el problema es, cuando menos, ingenuo. El hombre tiene un historial de dependencias a todo tipo de sustancias y hábitos, y de momento no ha habido una prohibición que acabe con ello. Prohibiendo solo empeoramos la situación. El problema radica en las dependencias psicológicas, y el modelo de sociedad en que vivimos actualmente no ayuda mucho a llevar una vida plena, sana y libre.

Por lo tanto es un buen ejercicio de madurez enfrentar el problema y darnos cuenta que todos estos años de prohibición no han hecho nada más que volvernos indiferentes y agresivos con respecto al problema, que solo nos hemos limitado a ocultarlo y dejarlo debajo de la alfombra y que no hemos solucionado realmente nada. Y por otro lado solo se ha logrado hacer gastar a los gobiernos recursos en combatir criminales que no son tales y que deberían ser tratados con respeto y brindarseles la ayuda necesaria para que puedan superar su problema y encarrilar sus vidas.
A los traficantes y productores ilegales de drogas si se les debe seguir persiguiendo. Ellos son los verdaderos criminales, los que deben llenar las cárceles. Pero al chaval que se fuma un porro, al joven que se traga una pastilla, al hombre que se jala una raya de cocaína antes de ir a trabajar más que encarcelarlo hay que ayudarlo a dejar su adicción y reconducir su vida.
También merece consideración la gente que , por pobreza o ignorancia, hace de mula y termina pagando un precio demasiado alto por al imposibilidad (o directamente, la falta de voluntad) de los gobiernos de hacer justicia con los reales culpables del mercado de la droga. Hay que hacer entender a esta gente que el camino de la droga no es el correcto, pero tampoco hay que arruinarles la vida.

Así que a mi me gustaría ver más apoyo para gente como Joan Saura, que probablemente haya superado sus prejuicios, se haya armado de valor y haya decidido que la mejor manera de encarar un problema serio es enfrentarlo y no esconderlo.
Y para los que todavía sigáis escépticos os dejo un reto: que me demostréis con hechos un solo comportamiento humano que haya desaparecido por el solo hecho de prohibirlo.

<h1>Segunda página</h1>
y
<a href="primera.html">A la primera sección</a>

Lo primero que deberíamos tener en cuenta es la paleta de colores que vamos a utilizar. Para este caso concreto utilizaré dos paletas, una para cada sección, en tonos azul y naranja.
En ambos casos la apariencia sera idéntica. Solo cambiarán los colores utilizados.
El primer paso es definir los estilos, sin definir ningún tipo de color.

@charset "utf-8"; /* Si utilizamos UTF-8 Signature no es necesario especificar la codificación */

body {
margin: 0;
padding: 2em;
font-size: 88%;
font-family: sans-serif;
}

h1 {
font-size: 1.6em;
margin: 1em;
padding: 0;
}

#cuerpo {
font-size: 1em;
margin: 0;
padding: 1em 2em;
width: 46em;
border-top: 1px dashed;
}

#cuerpo a {
text-decoration: underline;
font-weight: bold;
}

#cuerpo a:hover {
text-decoration: none;
}

A esta hoja la llamaremos “estilos.css“, la pondremos dentro de un directorio llamado “css” y la enlazaremos desde las dos páginas agregando esta línea debajo del <title>

<style type="text/css">
@import url("css/estilos.css");
</style>

Como vemos, tenemos los estilos, pero ningún color. El motivo por el que utilizo el @import en lugar del link habitual es porque de esta manera la hoja de estilos se degrada en los navegadores antiguos (que verán la página sin estilos). Intentar que un navegador antiguo pueda ver correctamente una hoja moderna es, en mi opinión, una pérdida de tiempo.
Antes de pasar al color, dederíamos corregir los errores de IE anteriores al 7. En #cuerpo hemos definido un ancho de 46em con un padding total de 4 (2+2), que hacen un ancho total de 50em. Para que se vea bien en IE <6 deberíamos corregir el ancho total. Así que hacemos una nueva hoja de estilos llamada estilosie6.css y ponemos lo siguiente:

@charset "utf-8";

#cuerpo {
width: 50em;
}

Y ponemos la nueva hoja de estilos con un comentario condicional por debajo de la anterior, pero fuera del <style></style>, tanto en la primera como en la segunda página:

<!--[if lte IE 6]>
<link href="css/estilosie6.css" rel="stylesheet" type="text/css" />
<![endif]-->

Si quisieramos hacer unos estilos específicos para la primera página, podríamos hacer otra hoja de estilos. Para no complicar el ejemplo vamos a obviar este paso.
Ahora solo nos quedan los colores.
En el caso de los colores seguiremos una lógica distinta. En lugar de asignar propiedades (colores) a los elementos, asignaremos elementos a las propiedades (colores).
Vamos a definir un mismo color para el H1 y los enlaces. Un color para el fondo y otro para el borde del DIV y un color para el hover de los enlaces:

@charset "utf-8";

h1, #cuerpo a {
color: #f90;
}

#cuerpo a:hover {
color: #930;
}

#cuerpo {
background: #fc9;
}

#cuerpo {
border-top-color: #f90;
}

Seguramente algunos os preguntaréis aquí porqué he puesto #cuerpo dos veces, en lugar de ponerlo una sola vez con ambos estilos. Como ya he dicho, se trata de asignar elementos a las propiedades de color, y no a la inversa. Este es un caso muy sencillo, pero si fuese una página más compleja seguramente tendríamos más de un elemento con color de borde similar, por lo que poner más de una propiedad afectaría a todos los elementos. La idea es tener cada propiedad de color una sola vez. De esa forma mantener o cambiar los colores de la página será una tarea sencilla y no tendremos que hacer un buscar y reemplazar en todo el documento.
Guardaremos este documento como “colores1.css” y lo referenciaremos haciendo la llamada debajo del anterior @import, pero solo desde la primera página:

<style type="text/css">
@import url("css/estilos.css");
@import url("css/colores1.css");
</style>

Y ahora toca modificar los colores para la segunda página.
Guardamos el documento “colores1.css” como “colores2.css” y cambiamos los colores de maner acorde:

@charset "utf-8";

h1, #cuerpo a {
color: #33f;
}

#cuerpo a:hover {
color: #009;
}

#cuerpo {
background: #99f;
}

#cuerpo {
border-top-color: #33f;
}

Y solo nos queda referenciar los colores desde la segunda página:

<style type="text/css">
@import url("css/estilos.css");
@import url("css/colores2.css");
</style>

¡Y listo!
Dos páginas con distintos colores pero los mismos estilos. Al compartir hoja de estilos los navegadores utilizarán para la segunda la que tienen guardada en el cache. Solo descargarán la hoja de colores, con el consiguiente ahorro en ancho de banda. Si necesitamos que tengan alguna diferencia, como se había mencionado antes, utilizaremos una hoja de estilos distinta con las “excepciones”, de forma que los estilos compartidos estén siempre en una misma hoja y podamos aprovecharnos del cache del navegador.
Y si mantenemos la lógica de agregar elementos a las propiedades en la hoja de color la hoja de estilos será mucho más corta y sencilla de mantener, ya que no repetiremos propiedades.
Espero que este método os sirva para mantener esos sitios complejos y con distintas secciones, que tantos dolores de cabeza suelen traer. Este método también es ideal para hacer distintos “skins” de un sitio.
Hasta otra.

<h1>Second page</h1>
and
<a href="first.html">To the previous section</a>

First thing we must take into account is the color palette we’re going to use. In this case I’m usign two palettes, one in blue and the other in orange.
In both cases the layout will be identical, just the colors will change.
First step will be to define the layout, without any color.

@charset "utf-8";body {
margin: 0;
padding: 2em;
font-size: 88%;
font-family: sans-serif;
}h1 {
font-size: 1.6em;
margin: 1em;
padding: 0;
}#main {
font-size: 1em;
margin: 0;
padding: 1em 2em;
width: 46em;
border-top: 1px dashed;
}

#main a {
text-decoration: underline;
font-weight: bold;
}

#main a:hover {
text-decoration: none;
}

We’ll call this stylesheet “styles.css“, we’ll put it inside a directory called “css” and we’ll call it from both pages, adding this line under the <title>

<style type="text/css">
@import url("css/styles.css");
</style>

As you’ll see, we have a layout without color. The reason I’m using the @import instead of the regular link is because in this way the stylesheet will degrade in older browsers (wich will show it without styles). Trying to make a new CSS display correctly on an old browser is, in my opinion, a waste of time.
Before going into the color stuff we must correct the errors of IE (version 6 and under). In #main I’ve defined a width of 46em plus a total padding of 4 (2+2), wich makes a total width of 50em. To make it look correct in IE we must change the total width value. So, we make another stylesheet called stylesie6.css and put the following code:

@charset "utf-8";#main {
width: 50em;
}

And add the new stylesheet in a conditional comment under the previous stylesheet, but outside the <style></style>, both in the first and second page:

<!--[if lte IE 6]>
<link href="css/stylesie6.css" rel="stylesheet" type="text/css" />
<![endif]-->

If we wanted to make a specific layout for the first page we could add a new stylesheet with the additional styles. We’re going to miss this step though, to make the excercise simpler.
Now we only have the colors left.
In this case we’re going to follow a different logic. Instead of assigning properties (colors) to elements we’re going to assign elements to properties.
We’re going to define the same color for the H1 and the links. Then one color for the DIV background and one for the DIV border, and finally a color por the link hover state:

@charset "utf-8";h1, #main a {
color: #f90;
}#main a:hover {
color: #930;
}#main {
background: #fc9;
}

#main {
border-top-color: #f90;
}

You may be wondering why I’ve put the #main selector twice, instead of putting both styles inside one #main selector. As I’ve said, the idea is to assign one element per color property, and not the opposite. This is a simple demonstration, but in a more complex site we would probably have several elements per property. Adding an additional property would affect all the elements. The idea is to have the color property just one time. In that way to update or change the color would be an easy task and we’ll not be forced to do a find and replace throughout the document.
We’ll save this file as colors1.css and make a reference after the previous @import, but just on the first page:

<style type="text/css">
@import url("css/styles.css");
@import url("css/colors1.css");
</style>

And now we’re going to change the colors for the second page.
Save the colors1.css as colors2.css and change the colors accordingly:

@charset "utf-8";h1, #main a {
color: #33f;
}#main a:hover {
color: #009;
}#main {
background: #99f;
}

#main {
border-top-color: #33f;
}

Now it’s only a matter of adding the appropiate reference on the page:

<style type="text/css">
@import url("css/styles.css");
@import url("css/colors2.css");
</style>

And voilá!
Two pages with different colors but the same layout. As both share the same stylesheet, browsers will use the cached CSS for the second page, saving precious bandwidth. If you need to have differences in style between the pages, just make additional CSS with the “exceptions”, so both page will still share the common styles and you’ll take advantage of a common cached stylesheet.
And if you keep the logic of adding elements to properties the stylesheets will be shorter and easier to mantain because you won’t repeat properties.
I hope this method will help you make complex sites easier to mantain. This method is also ideal to skin websites.
See you.