Fixes en CSS, Parte 1

solución

Margen negativo

Una cosa de css que no muchos conocen es la posibilidad de poner un margen negativo a los objetos, solucionando caso todos los problemas que suele haber, como por ejemplo:

Listas con borde

Si os fijáis en esta foto de blobal, el menu tiene un borde de 1 pixel por abajo de cada elemento y por arriba, es tan sencillo como añadir un borde por arriba y abajo, y en la misma clase poner un ligero:

margin-top: -1

Con lo que todos los elementos subirán un pixel de donde están, superponiéndose los bordes y dando el efecto de continuidad.

“Ese” Navegador

Casi la mitad del css de plax está reescrito para IE, a veces he ido aun mas allá y he tenido que cambiarlo completamente para que funcione, y la mayoría de veces es porque los elementos no salen bien colocados, cuando están demasiado pegados no es un problema, pero cuando es lo contrario?

Por ejemplo, el footer de plax (Esta plantilla), IE desplazaba el contenido 30 pixeles para abajo, tan sencillo como hacer:

margin-top: 0
_margin-top: -30
*margin-top: 0

Una pequeña explicación:
La primera linea simplemente ubica el footer arriba, debería sobrar, pero nunca está de mas remarcar lo obvio
La segunda (Precedida de _) Hace que IE suba el footer 30 pixeles, si lo que queremos es putear a los que usen IE, simplemente se ponen un par de ceros detrás :D
La tercera (Precedida de *) Corrige el fix para IE en IE7, ya que esta versión si respeta el css (Al menos ahí)

El próximo viernes, la parte 2

2 Comentarios, ¡Anímate!

  1. Posted 20 octubre, 2006 at 2:49 pm |

    Como funciona eso de _ * ? la barra tiene algún significado especial para ie6? como se lo otorgas?

  2. Posted 20 octubre, 2006 at 2:53 pm |

    Asi, poniendolo delante del atributo

    En el css de plax hay bastantes :D

    http://cosaspoposas.com/wp-content/themes/plax/style.css

Escribe un comentario

Your email is never published nor shared. Los campos requeridos están marcados con *

*
*