Os presento esta interesante herramienta que nos permite ver de una forma rápida como se verá nuestro proyecto responsive en diferentes resoluciones.
El manejo es muy simple, seleccionamos que resolución queremos que nos muestre y veremos una simulación de la misma.
Sígueme en Twitter
Seguir a @eriksanvi
Algunas veces utilizamos inline-block sustituyendo float ya que se puede obtener los mismo resultados con consequencias diferentes. Generalmente se visualiza correctamente en todos los navegadores menos en IE7 que vemos que nos aparecen los objetos verticalmente y no quedan alineados en la misma línea.
Pero podemos solucionarlo de una forma muy simple.
Ejemplo HTML usando display:inline-block:
<div style="width:200px;"> <p class="objeto">Menu 1</p> <p class="objeto">Menu 2</p> <p class="objeto">Menu 3</p> <p class="objeto">Menu 4</p> </div>
Y con estos estilos
.objeto {
width: 100px;
display: inline-block;
margin: 10px;
background-color: red;
}
Para arreglar esto sólo debemos crear una nueva condición específica para IE7. Para que quede de la forma siguiente.
.objeto {
width: 100px;
display: inline-block;
margin: 10px;
background-color: red;
}
<!--[if lte IE 7]> .objeto {
display: inline;
}
<![endif]-->
Veremos que el problema queda solucionado de una forma simple. Si tenéis cualquier problema no dudéis en comentar y os intentaré ayudar.
Sígueme en Twitter
Seguir a @eriksanvi
Está es una web muy simple, simplemente debemos añadir las líneas de nuestro código CSS y nos hace una comprobación mostrando los errores o warnings que contiene nuestro código CSS.
Es una herramienta útil y rápida que nos sirve para limpiar nuestro código CSS automaticamente totalmente gratuita.
Sígueme en Twitter
Seguir a @eriksanvi
Uno de los fantasmas de los desarrolladores es Internet Explorer en concreto el Internet Explorer 6 y en ocasiones el 7. Esto quiere decir que estos navegadores utilizan los estandares de una forma un poco particular , dejando la definición de standar de lado.
Uno de los problemas más comunes es el uso de .png transparente en IE6 e IE7 , veremos que nos aparece con un fondo manchado y no con la transpariencia que nos gustaría.
Por la red navegan varias soluciones y hacks. En mi opinión el más viable y eficaz es utilizar el típico javascript.
Podemos encontrar multiples Javascript pero en este caso vamos a utilizar unitpngfix.js ya que tras probar varios es el más simple y facil de implementar.
Lo podemos descargar del enlace unitpngfix.js
El archivo esta compuesto por el JavaScript llamado “unitpngfix.js” que lo debemos copiar en la carpeta raíz o en algun sitio donde lo tengamos localizado.
Copiamos el archivo de imagen “clear.gif” en la misma carpeta que el archivo anterior.
Copiamos el siguiente código en la cabecera de nuestro website teniendo en cuenta que las rutas coincidan.
<script type=”text/javascript” src=”unitpngfix.js”></script>
:: ENLACE DESCARGA unitpngfix.js
Sígueme en Twitter
Seguir a @eriksanviModificar página de inicio en Mozilla firefox.
Tenemos que ir a Herramientas>Opciones y en la pestaña Principal, ponemos la dirección URL de la página que queremos que se inicie cuando ejecutemos nuestro navegador.
Sígueme en Twitter
Seguir a @eriksanvi