Me ha pasado algo curioso y solo en chrome de momento. Tengo un texto en una celda y una imagen en la otra. El problema vino cuando usé un max-width:100% para las img en general. En ese momento toda imagen que estuviera dentro de un <td> pasó a redimensionarse: Ok, Chrome también tiene sus cositas.
La idea detrás de esto fue lograr que el buscador esté siempre al 100% del espacio que tenga disponible y no tener que preocuparme de dimensionar los input para que encajen y que el botón no caiga a dos lineas cuando se queda sin espacio. Pueden ver como funciona si re dimensionan la ventana del
Así es como vemos un titulo cuando tiene aplicado un padding sin mas Y asi es como queremos que se vea No voy a explicar toda la lógica que hay detrás de esto. Vayamos a la solución. Este es el html. en div.titulo tenemos el background y en .highlight el background del texto, el padding
Centrar un elemento cuando se sabe el tamaño que tiene es fácil. Pero y si el elemento que queremos centrar tiene un tamaño expresado en % o no tiene un tamaño especificado, ya no es tan fácil centrarlo. Ahora que prácticamente IE8 ya no se usa, lo podemos quitar de la ecuación y usar CSS
En versiones de IE <= 8 es normal tener que usar:
|
1 |
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#d8ffffff', endColorstr='#d8ffffff'); |
para aplicar transparencia a un background. Pero como se puede ver, no está muy claro donde poner el porcentaje de transparencia que queremos. En el ejemplo del principio el truco que estamos usando es aplican un degradado que va desde blanco a blanco,
IcoMoon es genial, siempre que veo un iconfont o un pack de iconos armado con sprite tengo que sopesar si los KB que trae con sigo me va a compensar, al fin y al cabo suelo usar 5 o 10 iconos de los cientos que estos pack traen. Y acá es donde IcoMoon me enamoró.
Esta característica me encanta. SCSS/SASS (aka SCSS) nos permite crear selectores de forma dinámica. Esto quiere decir que podemos reutilizar de una forma mucho mas eficiente y elegante nuestras estructuras CSS. Por ejemplo, imagina que con CSS maquetas un menú que tiene esta estructura:
|
1 2 3 4 5 6 7 |
<div class="menu-principal"> <ul> <li> <a href="/home">Inicio</a> </li> </ul> </div> |
|
1 2 3 4 5 6 7 8 9 10 11 12 |
#menu-principal { border-bottom: 5px solid #0062A0; } #menu-principal ul { border-bottom: 2px solid #F5E742; } #menu-principal ul li { background: none repeat scroll 0 0 #ADFF2F; } #menu-principal ul li a { color: #8B0000; } |
Ok, el problema con CSS es que reutilizar código
Tengo que decirlo: es alucinante los bug que tiene IE (da igual la versión, nunca terminan de solucionarlos). El ultimo con el que me di es que si usas una imagen transparente para hacer un fondo transparente, se va a ver genial en todos los navegadores menos en Internet Explorer (7 y 8, el 9 no se) Así es
Sé que hay soluciones hechas para este problema en particular, pero pesa 33k y solo necesitamos unas líneas como van a ver para lograr lo mismo… Sabido es que a ie se la sudan los estándares y cuando los incorporan por lo general lo hacen taaarde. La propiedad CSS “box-sizing” no es la excepción. Ya
Siempre trato de ser practico y dar pocas explicaciones del porque llegamos a donde llegamos, así que si quieren saber porque falla pueden leer esto. Para lograr que un input pase de esto: A esto: Al input que les está dando problemas pónganle los el siguiente selector:
|
1 2 3 4 5 |
.elemento{ -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } |
Básicamente va a sumar los padding y