Bueno siempre me han preguntado “De donde rayos sale ese borde”? si tengo en mis estilos en el reset css *{border:0;}” (chiste)… pues si a muchos les ha pasado que cuando andamos en FF, a los enlaces cuando tienen el foco (al darles click) aparece un molesto borde punteado al rededor…

Esto es para resaltar el elemento que tiene el foco con el resto, pero bueno, este “borde” o “contorno” “fastidioso” (para muchos) que tienen los enalaces lo podemos arreglar de esta manera.

1

a{outline:0;}

Sencillo no?… y bueno acontinuacion les dejo las variantes que podemos hacer con esta propiedad.
Ver demo en linea

Muchos sistemas utilizan un codigo muy parecido a este para comprobar el usuario y la contraseña del usuario y de su contraseña, por ejemplo para controlar el acceso a un área de administración:

1

    $check = mysql_query("SELECT Username, Password, UserLevel FROM Users WHERE Username = '".$_POST['username']."' and Password = '".$_POST['password']."'");

Parece que no podría hacer mucho daño. Pero digamos por un momento que introduzco el siguiente ”usuario ” en el formulario:

‘O 1=1 #

La pregunta que va a ser ejecutada sería esta:

1

    SELECT Username, Password FROM Users WHERE Username = '' OR 1=1 #' and Password = ''

La almohadilla (#) le dice aMySQL que todo que le sigue es un comentario y que no debe de hacerle caso. Ejecutará SQL hasta ese punto. Despues 1 es igual a 1, SQL devolverá todos los usuarios y contraseñas de la base de datos. Y como la primera combinación del usuario y de contraseña en la mayoría de las bases de datos es la de el ADMINISTRADOR, la persona que incorporó simplemente algunos símbolos en un formulario ahora entra como administrador de la Web , con los mismos privilegios que tendría si supiera realmente el usuario y la contraseña.

Con una poca de creatividad, este agujero de seguridad se puede explotar aun más lejos, permitiendo que un usuario cree su propia cuenta , lea números de las TARJETAS DE CRÉDITO o simplemente VACIE LA BASE DE DATOS.

Afortunadamente, este tipo de vulnerabilidad es bastante fácil de solucionar. Comprobando si hay algun caracter raro cuando el usuario introduce los datos, y quitándolos o neutralizandos, podemos evitar que cualquier persona utilize su propio código del SQL en nuestra base de datos. La función que sigue sería la adecuada:

1
2
3
4
5
6
7

    function make_safe($variable) {
 
       $variable = addslashes(trim($variable));
 
       return $variable;
 
    }

Ahora debemos modificar nuestra consulta. En vez de usar variables _POST como en la consulta de arriba, ahora utilizamos todos los datos del usuario con la función make_safe, dando por resultado el código siguiente:

1
2
3
4
5

    $username = make_safe($_POST['username']);
 
    $password = make_safe($_POST['password']);
 
    $check = mysql_query("SELECT Username, Password, UserLevel FROM Users WHERE Username = '".$username."' and Password = '".$password."'");

Ahora, si un usuario incorporó los datos anteriormente citados, la consulta será la siguiente, que es totalmente inofensiva. La consulta siguiente seleccionará de una base de datos los registros donde el usuario es igual a “\ ‘O o 1=1 #”.

1

    SELECT Username, Password, UserLevel FROM Users WHERE Username = '\' OR 1=1 #' and Password = ''

Ahora, a menos que tengas un usuario con un nombre muy inusual y una contraseña en blanco, tu malévolo atacante no podrá hacer ningún daño en tu sitio Web. Es importante comprobar todos los datos pasados a tu base de datos. Las cabeceras de HTTP enviados por elusuario pueden ser falsificadas. Su dirección de remitente tambien puede ser falsificada

Granito de Arena de: YorchX

Bua…. como lo dice el titulo… porfin una solucion, sino la correcta, supongo que la unica por el momento… (y si me equivoco manda la tuya haciendo click aqui), y siempre que necesitamos dar este efecto en nuestros diseños… acabamos haciendolo con javascript… o si tenemos un diseño fijo, estatico, pues optamos por el uso de una imagen de fondo… que no es lo mas conveniente en algunas ocaciones pero si nos ahorra horas y frustraciones pero bueno. eh aqui la solucion para igualar nuestras columnas, cuando estan dentro de un div contenedor… y dar el efecto de divs relativamente iguales en su altura...

Al lio… tenemos nuestro div contenedor (class=”all”) y dentro tenemos otros 2 div ’s (class=”contenido” y class=”lateral”) y queremos que tengan la misma altura cubriendo asi el 100% del contenedor (class=”all”)… entonces el html es:…

1
2
3
4
5
6
7
8

<div class="all">
    <div class="contenido">
        <p>nuestra primera columna</p>
    </div>
    <div class="lateral">
        <p>nuestra segunda columna.</p>
    </div>
</div>

Ahora para dar el efecto necesitamos hacer uso del “overflow” para que nos oculte el scroll que nos da el “padding” y el “margin“, que son ridiculamente enormes y nos da mucha altura.

1
2

.all{overflow:hidden;}
.contenido, .lateral{float:left;padding-bottom:30000px;margin-bottom:-30000px;}

Click para ver demo en linea

Hola ahora intentaremos, crear un menu solo con css… para luego agregarle un submenu desplegable… igual solo con css, primero lo primero…

1. Nuestro codigo para el menu, algo sencillo, 6 link, dentro de una lista y su enlace.

1
2
3
4
5
6
7
8
9
10

<div class="menu">
    <ul>
        <li><a href="#">Menu uno</a></li>
        <li><a href="#">Menu dos</a></li>
        <li><a href="#">Menu tres</a></li>
        <li><a href="#">Menu cuatro</a></li>
        <li><a href="#">Menu cinco</a></li>
        <li><a href="#">Menu seis</a></li>
    </ul>
</div>

2. Ahora le daremos estilo a lo anterior…

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

/*Nuestras propiedades generales*/
*{margin:0;padding:0;outline:0;text-decoration:none;border:0;}
body{width:900px;margin:50px auto;}
/*Relevante*/
ul{
	list-style:none;/*Importante aqui le quitamos todas las viñetas a nuestro sitio*/
}
.menu{
	width:850px; 
	margin:auto;
}
.menu ul{
	width:620px;
	height:50px;
	margin:auto;
	padding:0 25px;
	background:url(bg_mn.gif) no-repeat;
}
.menu ul li{
	display:inline; /*Importante para que todas nuestras listas, esten en una misma linea, igual podemos usar el "float:left;" pero tendriamos que darle un "width" para evitar "advertencias" CSS,*/
	position:relative; /*Importante para el submenu pero por ahora no*/
}
.menu ul li a{
	float:left; /*Aqui prodriamos usar el "display:inline;" pero no respetaba sus medidas, asi que podriamos cambiarlo a "display:inline-block;" y se veria correcto, pero ie 6 y 7, aun no lo llevan asi que para evitar problemas, seguimos con el viejo "float:left"*/
	margin:0 5px;
	padding:0 5px;
	text-align:center;
	width:80px;
	height:50px;
	font:bold 10px/4.5em Verdana;/*Siempre me han pedido un manual para abreviar el CSS, trankilos ya viene... aqui, le di el font:weight, size, line-heigth, y font-family"*/
	color:#FFF;
	background:url(bg_mn_a.gif);
}
.menu ul li a:hover{
	background:url(bg_mn_a.gif) 0 50px; /*Usuamos una sola imagen y al pasar el cursor se baja el fondo 50px para hacer el efecto sin JS*/
	color:#35608B;
}

Y listo tenemos neustro menu solo con CSS, valido, ligero y sobretodo sin JS;
de hecho confiezo que no tengo ni puñ…era idea de como hacerlo con JS jeje pero bueno… para eso tenemos al amigo CSS…

Ver demo en linea

Bien, ahora simplemente le agregamos estas lineas para tener nuestro “submenu“…

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<div class="menu">
    <ul>
        <li><a href="#">Menu uno</a></li>
        <li><a href="#">Menu dos</a></li>
        <li>
        	<a href="#">Menu tres</a>
            <ul>
                <li><a href="#">SubMenu uno</a></li>
                <li><a href="#">SubMenu dos</a></li>
                <li><a href="#">SubMenu tres</a></li>
                <li><a href="#">SubMenu cuatro</a></li>
            </ul>
        </li>
        <li><a href="#">Menu cuatro</a></li>
        <li><a href="#">Menu cinco</a></li>
        <li><a href="#">Menu seis</a></li>
    </ul>
</div>

Nota: Lo malo que como haremos uso del li:hover no funcionara en ie6, mas adelante les doy una alternativa… para que funcione en todos los navegadores… pero con el codigo html invalido… o igual podemos hacer uso de este fix para los hover en ie6.

y ahora los estilos para el submenu…

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69

*{margin:0;padding:0;outline:0;text-decoration:none;border:0;}
body{
	width:900px;
	margin:50px auto;
}
ul{
	list-style:none;
}
.menu{
	width:850px;
	margin:auto;
}
.menu ul{
	width:620px;
	height:50px;
	margin:auto;
	padding:0 25px;
	background:url(bg_mn.gif) no-repeat;
}
.menu ul li{
	position:relative;
	width:auto;
	float:left;/*Esta vez le dimos un float left... para que no de problemas la posision relativa*/
}
.menu ul li a{
	float:left;
	margin:0 5px;
	padding:0 5px;
	text-align:center;
	width:80px;
	height:50px;
	font:bold 10px/4.5em Verdana;
	color:#FFF;
	background:url(bg_mn_a.gif);
}
.menu ul li a:hover{
	background:url(bg_mn_a.gif) 0 50px;
	color:#35608B;
}
/*MENU DESPLEGABLE*/
.menu ul li:hover ul{ display:block;} /*Indicamos que en hover del menu muestre el submenu*/
.menu ul ul{
	display:none; /*indicamos que al cargar la web no muestre el submenu*/
	width:200px;/*Le cambiamos el ancho sino hereda del ul anterior*/
	position:absolute;
	top:50px;
	height:auto;
	background:#5696C1;
	padding:5px 0 10px;
	left:5px;
}
.menu ul ul li, .menu ul ul li a{
	float:none;
	display:block;
	width:auto;	
}
.menu ul ul li a{
	background:none;
	border-bottom:1px solid #A3CADB;
	height:25px;
	text-align:left;
	line-height:2em;
	width:180px;
	color:#A3CADB;
}
.menu ul ul li a:hover{
	background:none;
	color:#FFF;
}

Ver demo en linea

Bueno despues de tratar, y utilizar un millon de hacks… eh encontrado una solucion… ok no valida pero sirve… asi k toca joderse otra vez… por culpa de… adivinen…. sip… FUCK IE 6 acertaron… (joer… k cliche de post) pero bueno… eh aqui la luz…

Tenemos nuestro div “cabecera” que tiene el fondo, ancho, alto etc… y le agregamos… position:absolute; esto es para IE6, y el siguiente codigo en JS (No estoy seguro de que sea JS, no se programar mucho tansolo, diseño y css, pero si me equivoco corrijanme) hace el efecto de “estar fijo“, tomando en cuenta el movimiento de nuestro scroll del mouse para darle las cordenadas de arriba e izquierda para simular la posicion fija…

1
2
3

.cabecera{background:#333;height:50px;width:100%;color:#FFF;position:absolute;
top:expression(0+((e=document.documentElement.scrollTop)?e:document.body.scrollTop)+'px'); 
left:expression(0+((e=document.documentElement.scrollLeft)?e:document.body.scrollLeft)+'px'); line-height:3em;}

Y ahora hacemos uso de > para que solo nuestros bonitos navegadores interpreten el siguiente codigo… y es todo

1

body > div.cabecera {position:fixed;top:0px;left:0px;}

y nuestro html algo asi

1
2
3

<div class="cabecera">
Posicion fija: &lt;/Alex Aguiar&gt;
</div>

pero yo le agregue un div mas dandole mucha altura para hacer la prueba…

1
2

<div style="width:800px;height:1000px;margin:auto;">
</div>

Ver demo online

Porfin una solucion definitiva para los PNG con transparencia en IE con Javascript y Prototype.

Ya sabemos todos lo amargo que es que este famoso Internet Explorer 6 nos haga mas dificil nuestros proyectos, cuando llegamos al famoso “Test en otros navegadores”, en lo personal eh probado miles… de FIXS, HACKS, y otras soluciones y metodos extraños, muy prometedores pero nunca, me funcionaron… algunas gentes dicen que si… pero bueno, espero que la utilizen y queden satisfechos como yo… estoy implementando un Theme para Wordpress en la empresa donde trabajo… y uso transparencias y me fue y es muy util esta solucion a los PNG’S y aqui la comparto con ustedes…

Antes de aplicarlo es bueno saber que:

1.- Necesita la libreria JS de Prototype 1.6
2.- Funciona tanto en imagenes (<img/>) como en (#css{background:url…}), pero!… si es un fondo en mosaico (que se repite X o Y o las 2) no funciona.

Bueno… para aplicarlo como eh dicho necesita Prototype asi que lo llamamos desde nuestro <head>

1

<script src="javascripts/prototype.js" type="text/javascript"></script>

luego llamamos a pngHack.js este archivo necesita un gif (s.gif) que viene en dentro del zip… simplemente lo agregamos en una carpeta llamada “images“,

1

<script src="javascripts/pngHack.js" type="text/javascript"></script>

Luego llamamos a functions.js que es donde configuramos nuestros elementos que tendran transparencia.

<script src="javascripts/functions.js" type="text/javascript"></script>

1
2
3
4
5

// aplica el hack al elemento con la "<strong>id</strong>" <strong>yourPNG</strong>
$('yourPNG').pngHack();
 
// aplica el hack a todos estos elementos
$$('div#fixMe', 'img#andMe', 'img.andUsTo').invoke('pngHack');

Ver demo en linea
Descargar PNG FIX FOR IE
Y eso es todo por ahora… tratare de encontrar mas soluciones a este enorme problema…

Conoces una solucion mas???
funciona al 100%????
quieres compartirla con nosotros??….
pues envianos tus aportaciones a…. Tu Granito de Arena!!

Bueno a la hora de revisar nuestros proyectos en diferentes navegadores y todos nos topamos con la inminente llegada del “FCK IE” y mas aun el IE6, siempre el enojo que por alguna razon que enverdad me la suda, no funcionan algunas propiedades CSS… y en este caso el ” *:hover ”

Si aveces… muchos implementadores con experiencia, ni saben que en el IE6 esta y otras propiedades CSS no andan, ya que maquetan a XHTML/CSS sin importarles si funciona o no en algun explorador, cumplen en tener sus codigos estandarizados (validos por la W3C); pero nosotros no somos asi (chiste) y nos gusta ser lo mas optimo para con nuestros clientes y/o visitantes de estos… asi que aqui les pongo 2 opciones o bien soluciones a este y otros problemas con el FKC IE…

Primera solución:
Whatever:hover
Link de la web del autor

Esta enfocada a solo resolver el “loquesea:hover” en IE6… es ligera, discreta y nos
vale para tener el famoso “li:hover” en nuestros menus y submenus… o igual nuestas “img:hover” en algunas ocaciones.

Descargar:
Esta ultima version nos arregla tambien el
:hover
:active
:focus

Descargar version ligera/paquetada

Descargar el codigo de fuente/sin empaquetar

Y como lo aplicamos?
Tan facil y sencillo como agregar esto en el body de nuestra hoja de estilos

1

body {behavior: url("csshover3.htc");}

Segunda Opcion:
En lo personal me gusta esta opcion ya que tiene mas arreglos… y aveces hace que nuestros proyectos, se vean casi igual en todos los IE…
:hover
:first-child
:background-image (transparencia PNG; pero no con imagenes en mosaico o bien que se repita)
:max-height – :min-height
:max-width – :min-width
position:fixed;
etc, etc… enfin una buena libreria js que nos ahorrara mucho tiempo y evitariamos miles de “Hacks” que solo nos dan un codigo CSS sucio, feo, e invalido… y diria que casi debe ser un complemento mas e imprescindible en nuestros proyectos.

Descargar:
La version actual es 2.0 beta 3
y podemos ver las otras versiones aqui del ie7 js en google
http://ie7-js.googlecode.com/svn/version/

Y como lo aplicamos?
Igual es sencillo si queremos una solucion rapida y externa podemos usar este codigo para actualizar cualquier version del IE anterior al IE7 con esto

1
2
3

<!--[if lt IE 7]>
<script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE7.js" type="text/javascript"></script>
<![endif]-->

tambien podemos usar esta libreria para actualizar cualquier version del IE anterior al IE8

1
2
3

<!--[if lt IE 8]>
<script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE8.js" type="text/javascript"></script>
<![endif]-->

si queremos podemos descargarnos la libreria e integrarla en nuestros proyectos y solo cambiamos la url del destino del archivo js ejemplo:

1
2
3

<!--[if lt IE 8]>
<script src="miproyecto/js/IE8.js" type="text/javascript"></script>
<![endif]-->

Ver demo enlinea

Ahora veremos como agregar opacidad con CSS a nuestros elementos… HTML, simplemente agregamos

1
2
3

		-moz-opacity:.5;	/*Para Firefox, opera y similares*/
		opacity:.5;/*Para IE8*/
		filter:alpha(opacity=50);/*Para el resto de IE*/

Y simplemente variamos los numeros a nuestro antojo, y asi alcanzar el tono deseado de opacidad. Claro tendriamos que agregarle un color de fondo o una imagen si queremos para ver el efecto opaco… con mas claridad (chiste)

1

background:#000;

Listo pero que pasa!!! todo el div incluso todo lo que hay dentro de el se puso opaco… y pocos queremos eso la verda… asi que aqui viene… mas que un fix… una solucion diferente pero la correcta.

Fix para no “Heredar opacidad CSS”

crearemos un div con posicion relativa y dentro de este crearemos un div con nuestro contenido (que no queremos que herede opacidad) en posicion absoluta y luego el div que tendra el color de fondo y la opacidad que estara debajo para dar este efecto correctamente.

1
2
3
4
5

<div class="confix">
<div class="sin_opacidad">esto sera nuestro contenido sin opacidad</div>
<!--esto sera nuestro div con opacidad-->
<div class="contenido"></div>
</div>

Y con este CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

/*Div CON FIX*/
.contenido, .sin_opacidad{font-size:20px;color:#FF0;}
.confix{width:350px;height:200px;margin:10% 50px 0 0;float:left;
		/*Importante*/
		position:relative;/*Importante para el FIX*/
	}
/*Div con opacidad Fix*/
.confix .contenido{width:100%;height:100%;padding:10px;
		/*Importante*/
		background:#000;
		-moz-opacity:.5;	/*Para Firefox, opera y similares*/
		opacity:.5;	/*Para IE8*/
		filter:alpha(opacity=50);/*Para el resto de IE*/
	}
/*Div posicion absoluta FIX*/
.sin_opacidad{
		/*Importante*/
		position:absolute;
		z-index:1;
		top:10px;
		left:10px;
	}

Y listo opacidad + fix…
NOTA:No es válido para W3C. -moz-opacity y opacity hasta  CSS3 si.

Ver el ejemplo en linea