Categoría: HTML/XHTML/XML y CSS

12 Diciembre 2006

Resolviendo bug del margen de un elemento input de Internet Explorer

Hoy he tenido que resolver un bug de Internet Explorer en el que un elemento "input" de formulario dejaba siempre un margen a la derecha dentro de una caja.

Mejor explico el problema con una imagen tal como se veía en Internet Explorer:

Elemento input encerrado por una caja que deja a su derecha un pequeño margen

Su código es el siguiente:

<!DOCTYPE html
    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="es-ES" xml:lang="es-ES"
  xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="Content-type"/>
<title>Prueba</title>

</html>

Tal como se puede comprobar, Internet Explorer deja un margen a la derecha del elemento "input". Éste margen no se especifica en ningún sitio ni aparece en otros navegadores como Firefox.

La forma que encontré para solucionarlo es englobando el elemento "input" en un elemento "span" de esta forma:

Elemento input encerrado por una caja sin ningún tipo de margen

Este error lo he podido solucionar a base de muchas pruebas y gracias a la ayuda de la página IE inherited margin bug: form elements and hasLayout de PositionIsEverything.

servido por gigo 2 comentarios compártelo

28 Noviembre 2006

Insertar texto con CSS

Se puede insertar texto con CSS mediante el estilo "content" y cuatro pseudoelementos: :first-letter, :first-line, :before, y :after.

Los dos primeros funcionan en Internet Explorer 5, Firefox 1; y los dos últimos sólo funcinan en Firefox a partir de la versión 1.5.

Ejemplo:

<html>
<head>
<style type="text/css">
  .contexto:before {
   content: "texto css";
  }
</style>
</head>

<body>
<div class="contexto">
BLOQUE
</div>

</body>
</html>

Más información en W3Schools, en inglés.

servido por gigo sin comentarios compártelo

3 Noviembre 2006

Creando bordes redondeados fácilmente

¿Quieres usar cajas con bordes redondeados sin romperte la cabeza? En CornerShop, tras facilitar los colores que deseas y el radio de curvatura de los bordes, te ofrece las cuatro imágenes de las curvas para descargar y el código HTML y CSS para copiar y pegar.

Otra web similar es Spiffy Corners.

Visto en Microsiervos.

servido por gigo sin comentarios compártelo

6 Septiembre 2006

XHTML 2.0: El futuro de la web

W3C sigue elaborando el borrador de XHTML 2.0. Sabemos que queda aún mucho tiempo para que sea una realidad, pero no está mal ir enterándose de las novedades que incluirá.

He encontrado este resumen de características en SIGT.net:

Compatibilidad hacía atrás: No existe.
Validación XML obligatoria: O validas o no funciona.
Adiós Hx y DIV, hola SECTION y H.
Role: Un presunto sustituto de ID.
XFrames: Vuelven los marcos (¡¡arghh!!).
XML includes: ¡Includes sin programación!.
OBJECT a la palestra.
Cambios en HR y BR.

Me he enterado a través de Barrapunto.

servido por gigo 1 comentario compártelo

29 Agosto 2006

FireBug: una extensión Firefox para desarrollo web

Un compañero de trabajo me ha hablado de esta sensacional extensión para Firefox: FireBug.

Sirve principalmente para localizar código pinchando sobre un elemento de una página web y viceversa; para localizar elementos de la página web desde el código.

También cuenta con un debugger de javascript, consola que muestra errores javascript y errores CSS, línea de comandos javascript, espía en el tráfico del XMLHttpRequest (es decir, para su uso con aplicaciones AJAX), etc.

servido por gigo 3 comentarios compártelo

28 Agosto 2006

Simular un enlace con un botón mediante CSS (versión 2)

Hace unos días creé mi primera versión para crear simular un enlace a partir de un botón de formulario con CSS. Aquella versión tenía el problema de no ser muy compatible entre navegadores. De hecho, sólo se conseguía a la perfección en Internet Explorer. Para verse en Firefox u Opera tenía que simular un borde inferior.

Bien, he encontrado la forma perfecta de simularlo. La clave está en usar la etiqueta <button> en lugar de <input>. Aquí está el ejemplo:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>
<head>
<style type="text/css">
.boton2 {
  padding:0;
  border: 0px none transparent;
  background-color: transparent;
  cursor: pointer;
}

.boton2 span {
text-decoration: underline;
color: blue;
}

</style>
</head>

<body>
  <form name="form2" action="">
  <button type="submit"  class="boton2">
  <span>botón</span>
  </button>
  </form>
</body>
</html>

Y aquí está la demostración.

servido por gigo 2 comentarios compártelo

25 Agosto 2006

Simular un enlace con un botón mediante CSS

Me ha surgido la necesidad de simular un enlace con un botón de formulario mediante CSS.

El problema era que semánticamente necesitaba un botón para un formulario que tenía varios botones, pero desde el punto de vista de la usabilidad quedaba mejor que ese botón tuviera la apariencia de un enlace.

Aunque en Internet Explorer he podido simularlo perfectamente, en Mozilla Firefox y Opera no he sido capaz de hacer funcionar el text-decoration: underline. Supongo que no se puede porque un botón no puede ser tratado como un elemento en línea (display: inline).

Para subrayar el texto en Firefox y Opera, al final opté por un borde inferior.

He aquí el código por si alguien le resulta útil:

<!DOCTYPE html
     PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<style type="text/css">
.boton {
  padding:0;
  border-bottom: 1px solid blue !important; /* ignorado por IE */
  border: 0px none transparent;
  background-color: transparent;
  text-decoration: underline;
  color: blue;
  cursor: pointer;
}
</style>
</head>

Y aquí puedes ver la demostración.

ACTUALIZACIÓN

He creado una versión perfecta.

servido por gigo 1 comentario compártelo

17 Agosto 2006