Esto nos permite poder moldearlos a nuestro antojo, permitiendo que en la gran mayoría de los navegadores se visualice de la misma manera.

Sin embargo, nuestro querido Firefox, se guarda una desagradable sorpresa y probablemente más de uno se haya dado cuenta. Y es que cuando tratamos de meter – por ejemplo – dentro de un elemento <button> una etiqueta – por ejemplo un <span>, este nos deja un pequeño padding que nos impide colocar el <span> a nuestro gusto por mucho padding que le quitemos, por lo que terminamos metiendo una posición absoluta y pasamos el trago.

No es una solución que me agrada, ya que un simple padding a cero, debería bastar. Para conseguir arreglar esto, debemos añadir la siguiente línea a nuestro reseteador.

<style>
   /** Eliminando el padding de los botones **/
   button::-moz-focus-inner { padding:0;border:none }
</style>

Ahora podemos maquetar a gusto dentro de los elementos <button> sin miedo a nuevas e inesperadas sorpresas … o no ?

Tags: css, tips

De forma similar a como cambiabamos los campos de tipo file, debemos crear una estructura alrededer de los campos selectBox de una forma parecida a esta

<div class="selectBox">
   <div class="box" id="box">Plantar un arbol</div>
   <select name="mySelectBox" id="mySelectBox">
      <option value="1" class="primero">Plantar un arbol</option>
      <option value="2">Escribir un libro</option>
      <option value="3" selected="selected">Ser Padre</option>
      <option value="4">Hacer un Blog</option>
      <option value="5" class="ultimo">Un texto largo para ver que efecto produce</option>
   </select>
</div>

Donde el div principal es el contenedor del Select, y el div “box” donde escribiremos la selección del combo. Para poder realizar la última acción, crearemos un evento “onchange” que aplicaremos a nuestro comboBox para poder pasar los datos de la selección al div “box”.

onchange="this.parentNode.getElementsByTagName('div')[0].innerHTML=this.options[this.selectedIndex].text"

Y evidentemente le daremos unos “colorines” para que quede “bonito”.

<style type="text/css">
div.selectBox {
   position: relative;
   width: 150px;
   height: 22px;
   border: 1px solid #036;
   background: url(button.png) 130px center no-repeat;
}
   div.selectBox div.box {
      position: absolute;
      left: 3px;
      top: 3px;
      width: 124px;
      height: 16px;
      line-height: 16px;
      font-family: arial;
      font-size: 11px;
      color: #036;
      overflow: hidden;
   }
   div.selectBox select {
      position: absolute;
      left: -1px;
      top: -1px;
      width: 152px;
      height: 24px;
      border: 1px solid #036;
      opacity: 0;
      filter: alpha(Opacity=0);
      -moz-opacity: 0;
      cursor: pointer;
      z-index:100;
   }
      div.selectBox select option{
         padding: 4px;
         font-size: 11px;
         color: #036;
         border-bottom: 1px solid #eee;
         cursor: pointer;
      }
      div.selectBox select option.ultimo{
         border-bottom: 0px none;
      }
</style>

Para complementar estos estilos, añadimos la siguiente imagen que hará las veces de botón

El resultado funciona en todos los navegadores, exceptuando nuestro querido amigo “Explorer6″ donde no sé si se verá correctamente al tener una “emulación” del mismo.

[ demo ] [ descargar ]

Tags: css, diseño, javascript, tips

Ramón – compañero de trabajo – después de comentar con él este tema, me decía que si pinchábamos en la elección del formato de texto y estirábamos hacia la derecha, podíamos ver el selector de marcadores, lo cuál lo convertía más que en un olvido, en un error de maquetación. Gracias a Dios, todos somos humanos. Y si sucede a estos niveles, uno ya puede dormir tranquilo.

A día de hoy, nuestros amigos de GoogleMaps tiraron por el camino de en medio y oficialmente ya podemos añadir de nuevo marcadores personalizados sin tener que recurrir a triquiñuelas.

Eso si, podían currárselo un pelín más, ya que queda como un poco … de aquella manera.

[ GoogleMaps ]

Tags: google, tips

Para el que no lo sepa, esta opción te permite añadir manualmente (sin calculadora ni atlas ni javascript) tus ubicaciones añadiendo simplemente un “marcador de situación” en el punto deseado, y la posibilidad de añadir la información que desees, así como compartir tu mapa.

Aparte de lo interesante en si de la herramienta, lo que más me gustaba era la opción que te permitía personalizar el “marcador de situación” por uno distinto de un listado, o bien por otro creado por uno mismo.

Desgraciadamente cuando Google añadió la nueva opción “street view” desapareció la opción de personalizar tal marcador.

Después de una búsqueda por los grupos de GoogleMaps, el usuario EGH, en este post, nos muestra una “pequeña” trampa para poder seguir personalizando nuestros marcadores. Y es cambiando simplemente de idioma, bien en preferencias o bien a mano “http://maps.google.es/?hl=en“. Con que poco nos conformamos a veces !

Tags: google, tips