El blog de SuperGuille » CSS

Odio a Internet Explorer

Guille — Tue, 30 Jun 2009 09:21:56 +0000

Una vez leí en un blog:

Si George W. Bush se muriera ahora mismo no pasaría nade pero si desapareciesen todos los monkey island de todos los ordenadores nos daria una pena de la ostia.

Esta frase es tan cierta como que cada vez que un usuario usa cualquier otro navegador para navegar que no sea Internet Explorer hace que un Diserrador (diseñador + programador) salga puntual del trabajo.
Yo no lo entiendo, es por ignorancia o es por tocar los cojones. Actualmente Internet Explorer es el quémenos cumple los entandares web, el que mas problemas da (no solo como diserrador) sino como usuario, es una de las mayores entradas de virus y de basura de nuestros ordenadores (sin contar los programas P2P).

Fijate si es tan malo que si intentas borrarlo del ordenador NO TE DEJA! Es como una parte de tu ordenador integrada en el sistema operativo! Que fiasco de verdad.

Todo este odio viene por cosas tan sencillas como esta. Resulta que estoy haciendo una web. PERO EL PUTO JODIDO IE le da por enseñar lo que le da la gana.

Llevo un buen rato intentando solucionar este destrozo emocional que me esta provocando. Y sino mira

Así se ve en firefox:

Así se ve en Google Chrome

Y asi se ve en IE

No notáis que falta algo?
Pues las dichosas listas que le dan por no aparecer. Tachan! A tocar los cojones.
Esto le he hecho miles y miles de veces en ochorropotecientas webs, y siempre pasa algo diferente en todas y cada una de ellas relacionada con el IE. Es lo que tiene, te sorprende cada vez.

Si de verdad queréis ayudar a gente como yo, por favor descargaros y utilizar alguno de los muchos navegadores que son gratuitos y que son mucho mejores que el IE

Firefox : Descárgate firefox
Chrome: Descárgate Google Chrome

Quitar borde en link con imagenes

Guille — Mon, 15 Sep 2008 09:28:01 +0000

Muchas veces haciendo webs os habréis encontrado con algo tan engorroso como que en IE las imágenes tienen un borde lila que nos marca que tiene link. Y tas vuelto loco intentando eliminarlo.
Hay varias formas de hacerlo.

A mi la que mas me gusta es en el CSS añadir esta pequeña línea:

PLAIN TEXT

CSS:

img {border: 0px;}

Y listo.
Aun que a veces en algunas imágenes si tenemos borde entonces cuando insertamos la imagen únicamente añadimos la propiedad “border=0”

Quedando así

PLAIN TEXT

CSS:

"./index.php" class="enlace_imagen">"./imagenes/home.gif" border="0">

Salva a los desarrolladores: deja de usar IE6

Guille — Sun, 30 Mar 2008 14:56:49 +0000

SaveTheDeveloper es una campaña que pretende que los usuarios de Internet Explorer 6 actualicen su navegador o cambien a otro que sea más respetuoso con los estándares web.

Los motivos de esta campaña casi todos los conocemos y es lo de siempre:

E6 tiene agujeros de seguridad
IE6 se cuelga
IE6 cuenta con un motor CSS completamente inútil - (Hoy en día la mayoría de sitios web están desarrollados con HTML y CSS estandarizado y este navegador no cumple con los estándares).
No existe la navegación por pestañas, lo que hace que se consuma un mayor número de recursos en nuestra máquina, ya que necesitamos varios navegadores abiertos para ver distintas webs simultáneamente.

Y entre muchas otras razones la principal, es proporcionar a los web developers un camino enfocado al diseño sobre estándares web dignos, sin necesidad de hacer trucos sobre el código CSS, que al final solo hace webs más pesadas.

Via: Bitslab

Poner favicon en wordpress

Guille — Sat, 01 Mar 2008 00:00:04 +0000

Después de salvar a varias doncellas en apuros y de evitar que un súper meteorito mandado por el gran súper villano se estrellara en la tierra, regresé a mi guarida para poder comentar en mi blog mis logros como superhéroe cuando de repente, como un escupitajo en mi ojo, me doy cuenta de algo que se me habia olvidado de poner. NO TENIA FAVICON, por dios! Acto seguido, no puede ni quitarme los mosquitos de la cara a causa de vuelo hipersónico, edite mi favicon.ico y aquí lo tenemos.

Antes:

Después:

Todo este royo de antes de superhéroe es que hoy he visto superman y ma dao por ahí. Colocar un favicon es muy muy sencillo. Hay algunos programas online que subes tu mismo una imagen y te la convierte en favicon.ico, pero si eres como yo preferirás hacerlo tu mismo.

Yo uso el Photoshop para editar las imágenes. Si lo usas tu también necesitaras un pequeño plugin para poder grabar en formato .ico

Descargar plugin: icoformat-psplugin.zip

Dentro encontraremos un fichero llamado ICOFormat.8bi, que debemos colocarlo en la siguiente carpeta:

C:\Archivos de programa\Adobe\Adobe Photoshop CS3\PlugIns\Formatos de archivo\

Abrimos el photoshop, y creamos un fichero de 16x16.

Luego, a la hora de guardarlo lo guardamos en formato .ico y listo, el primer paso de la creación del favicon esta terminado.

Ahora que ya explicamos como crear el Favicon, vamos a Integrarlo a nuestra web. Renombramos nuestro icono a favicon.ico y lo subimos a la carpeta raiz de nuestro WordPress.

Modificamos nuestro header.php que se encuentra en la carpeta de nuestro theme

Entre las etiquetas y agregaremos esta linea:

PLAIN TEXT

CSS:

<link rel=”shortcut icon” href=”<?php echo get_settings(’home’); ?>/favicon.ico” type=”image/x-icon” />

Guardamos y listo! El favicon ya tendría que verse en nuestra web.

Cambiar el color de la seleccion

Guille — Fri, 29 Feb 2008 21:18:49 +0000

Supongo que esto ya lo habréis leído en un montón de blogs de diseño, pero yo hasta ahora no me había animado ha hacerlo, acabo de modificar un poquito el blog, na cuatro cosas y una de ellas a sido el poder elegir el color que yo quiera a la hora de seleccionar texto. Esto solo funciona en Safari y en Firefox, Si usas el IE, (a ver si cambiáis ya de una vez) no podrás visualizarlo.
un ejemplo:
Firefox:

IE:

Estos pequeños cambios hacen destacar nuestros proyectos web en cosas ya mas serias, con mas clase vamos.
La forma de conseguirlo es añadiendo este código a nuestro CSS.

PLAIN TEXT

CSS:

::selection {
background: #b7d4ff; /* Safari */
color:#333;
}
::-moz-selection {
background: #b7d4ff; /* Firefox */
color:#333;
}

De esta forma seleccionamos el color del fondo y el color de las letras…

Restablecer CSS

Guille — Sat, 16 Feb 2008 18:34:09 +0000

Me estaba volviendo loco con los dichosos estándares y con las diferencias entre navegadores. Os comento, Hasta ahora tenia fallos tipo esto:

IE:

Fire Fox:

FIREFOX

Y mira que he mirado código y no conseguía solucionar nada. Asi que fui a lo drástico. Cosa que tenia que haber echo antes. Desde que leí el reseteo del CSS via csslab.cl que empecé a integrarlo a mis trabajos web, pero hace poco en freakevolution.com.ar que han dado con el clavo.
Yo lo que he hecho a sido crear un archivo css llamado reset.css con el siguiente código.

PLAIN TEXT

CSS:

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
/* remember to highlight inserts somehow! */
ins {
text-decoration: none;
}
del {
text-decoration: line-through;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: collapse;
border-spacing: 0;
}

Con esto es poner a cero todas y cada una de las variables que crean los navegadores (IE) por que les da la gana. Conseguiremos unificar las características y así no nos llevaremos sorpresas en nuestros diseños.

Luego únicamente llamamos al reset.css desde nuestro css principal, normalmente usamos el style.css.

PLAIN TEXT

CSS:

@import url("reset.css");

ES IMPORTANTE COLOCAR LA LLAMADA ANTES DE ASIGNAR VALORES A NUESTRO CSS, YA QUE DESPUES VOLVEMOS A DARLE NUEVOS VALORES

IE7.js Script para IE con estándares web

Guille — Wed, 16 Jan 2008 06:53:50 +0000

En mi corto tiempo que llevo haciendo paginas web, el ~~hijo de perra~~ dichoso Internet Explorer ha estado dando mucho por saco. Hasta la fecha casi siempre hemos tenido que añadir Hacks, con lo que no pasabamos los estandares de la web.

En xyberneticos.com han publicado un post con la solución.

<--- COPIO Y PEGO--->

Dean Edwars acaba de actualizar IE7-js, la librería Javascript que nos permitirá mejorar en muchos aspectos Internet Explorer, por ejemplo los problemas con los CSS’s, transparencias con las imágenes PNG bajo IE 5 o IE 6.
Sin duda con esto ahora en tu poder, IE dejara de ser tan molesto a la hora que debas diseñar ya que este Javascript hará que Internet Explorer se comporte acorde con los estándares web. Además puedes usarlo directamente desde los servidores de Google o bien descargar las liberarías para usarlo desde tu propio servidor.

Demo - Descargar

USOS: desde los servidores de Google

Tan solo copiamos el codigo dentro de nuestra etiqueta < Head > ....< /Head > de nuestra plantilla.

IE7.js: script que actualizara IE5 y IE6 para hacerlo compatible con IE7.

PLAIN TEXT

HTML: