ZoneArtCSS | Desarrollo Web, Diseño de páginas Web, Aplicaciones Móviles, Notas de Tecnología » ie6 http://www.zoneartcss.com Tips de Diseño y Desarrollo Web Wed, 26 Oct 2011 18:31:39 +0000 en hourly 1 http://wordpress.org/?v=3.2.1 Fondos transparentes con jQuery para tu web http://www.zoneartcss.com/webdevelopment/jquery/fondos-transparentes-con-jquery-para-tu-web/ http://www.zoneartcss.com/webdevelopment/jquery/fondos-transparentes-con-jquery-para-tu-web/#comments Sun, 03 Jan 2010 03:49:57 +0000 miguelortega http://www.zoneartcss.com/?p=1234

transBG.jquery.plugin.js es un plugin de jQuery para poder hacer el efecto de nuestras web con un background transparente, es fácil de implementar solo tenemos que descargar Jquery y tambien esta libreria que al final del post les dejo los links para la descarga.

Con esta librería se evitan los problemas con ie6 de las transparencias…

Este es el código para tu web, recuerda agregar las librerías..

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

$("#id").transBGdraw();
$("#menu").transBGdraw();
$("#container").transBGdraw();
 
// !!!IMPORTANT!!!
// if you use tagnames or classes, make sure every object affected has a unique id.
$("div").each(function()
{ $(this).transBGdraw(); });
 
$("h6").each(function()
{ $(this).transBGdraw(); });
 
$(".class1").each(function()
{ $(this).transBGdraw(); });
 
$(".text").each(function()
{ $(this).transBGdraw(); });
 
$(".information").each(function()
{ $(this).transBGdraw(); });

Descargar jQuery

Descargar Libreria

]]> http://www.zoneartcss.com/webdevelopment/jquery/fondos-transparentes-con-jquery-para-tu-web/feed/ 0 Forzar IE8 a IE7 http://www.zoneartcss.com/webdesign/css/forzar-ie8-a-ie7/ http://www.zoneartcss.com/webdesign/css/forzar-ie8-a-ie7/#comments Thu, 24 Sep 2009 00:53:12 +0000 miguelortega http://www.zoneartcss.com/?p=815

Forzar IE8 a IE7

Forzar compatibilidad de IE8 a IE7


Bueno antes que dios nos libre de todo pecado, de un mundo de caramelo y sobre todo de IE!!!… saldran mas y mas hacks… para solucionar estos problemas (lo siento solo para IE).

En este caso un hack mas para IE8…¿? sip… porque?… porque nos centramos la mayoria del tiempo en IE6 e IE7, y el IE8 “para que si es mas estandar” pero luego el “puf” nop… entonces para no agregar una revision mas podemos forzar el comportamiento del IE8 a IE7, y asi estar seguros y comodos con el resultado…

Código HTML para forzar a IE8 ser IE7

1
2
3
4
5
6
7
8
9
10

<html>
<head>
  <!-- Mimic Internet Explorer 7 -->
  <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" >
  <title>My Web Page</title>
</head>
<body>
  <p>Content goes here.</p>
</body>
</html>

mas info?
Defining Document Compatibility
PD: Perdon por la imagen nose me ocurrio mas para este post sin sentido.

]]> http://www.zoneartcss.com/webdesign/css/forzar-ie8-a-ie7/feed/ 8 Centrar un texto verticalmente [ line-height ] http://www.zoneartcss.com/webdesign/css/centrar-un-texto-verticalmente-line-height/ http://www.zoneartcss.com/webdesign/css/centrar-un-texto-verticalmente-line-height/#comments Thu, 30 Jul 2009 02:11:11 +0000 miguelortega http://www.zoneartcss.com/?p=386

centrar verticalmente con css

La propiedad line-height, nos permite alinear elementos verticalmente que esten dentro de un contenedor con una altura fija o bien “preestablecida”, y haci hacer que queden “centrados vericalmente” todos los elementos hijo del contenedor.

Ejemplo

1
2

li  {height: 50px;}
li a{line-height: 50px;}

la altura del “line-height” debe ser relativa a su contenedor.

Algunos valores de esta propiedad son:

normal
sera interpretado… como el predeterminado por el navegador

number
este multiplica el tamaño de fuente para establecer la altura de linea

length
Un salto de línea en px, pt, cm, etc…

%
sera interpretada la altura de línea en porcentaje con el tamaño de la fuente establecida

inherit
simplemente hereda el salto de linea… (IE8 y sus anteriores no lo soportan)

Nota: No funciona con imagenes… y da problemas en IE6… <button> e <input />… recomiento utilizarlo… en zonas especificas como en menus… o bien trozos de contenidos… para hacer mas comoda la lectura… enfin… debemos considerarlo para lo que es y sirve… para centrar textos perticalmente y dar saltos de linea…

]]> http://www.zoneartcss.com/webdesign/css/centrar-un-texto-verticalmente-line-height/feed/ 0 Propiedad CSS Outline http://www.zoneartcss.com/webdesign/css/propiedad-css-outline/ http://www.zoneartcss.com/webdesign/css/propiedad-css-outline/#comments Tue, 21 Jul 2009 18:18:16 +0000 miguelortega http://www.zoneartcss.com/?p=338

de donde salen esos bordes a mis enlaces? pues outline css jaja

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

]]> http://www.zoneartcss.com/webdesign/css/propiedad-css-outline/feed/ 0 Comentarios Condicionales para IE http://www.zoneartcss.com/webdesign/css/comentarios-condicionales-para-ie/ http://www.zoneartcss.com/webdesign/css/comentarios-condicionales-para-ie/#comments Thu, 16 Jul 2009 04:15:17 +0000 miguelortega http://www.zoneartcss.com/?p=257

Comentarios condicionales para internet explorer

Es muy util, tanto CSS, como JS (javascript), fijar condiciones detectando el navegador que estamos utilizando.
Esto solo aplica para los “internet explorer’s” ya que los comentarios condicionales fueron creados para microsoft.

Para que sirve?

Bueno su trabajo es ocultarse para que los navegadores desentes (todos menos ie) no lean dichas lineas comentadas…

Como lo aplico?

Primero deben estar colocados dentro de nuestro <head> y entonces…

Aplicando Condicion

1
2
3

<!--[if condicion ie]> 
Aqui el <strong>HTML</strong> que solo interpretara <strong>IE</strong> donde "condicion" debe variar segun la version... que elijamos
<![endif]–>

Escoger una version

Acontinuacion las variaciones de “condicion” que es donde escogemos la version o versiones que haremos para que lo interprete IE.
Y al igual que “X” es la version del IE, , 5.5, 6, 7, 8.

1
2
3
4
5
6
7
8
9
10
11
12

 IE  
     Cualquier versión de Internet Explorer  
 lt IE X  
    Versiones inferiores a X  
 lte IE X  
     Versiones inferiores o iguales a X  
 IE X  
     Solo para la version X  
 gte IE X  
     Versiones superiores o iguales a X  
 gt IE X  
     Versiones superiores a X

Comentario Condicional IE6 para hoja de estilos CSS

Acontinuacion un ejemplo para usar la condicion a “cualquier IE” y que los navegadores decentes no veran.

1
2
3
4
5
6

<head>  
<link href="firefox_y_otros.css" rel="stylesheet" type="text/css">  
<!--[if IE]>  
<link href="cualquier_IE.css" rel="stylesheet" type="text/css">  
<![endif]-->
</head>

Comentarios Condicionales para IE

Bueno aqui les dejo las variaciones que puedes hacer, y declarar las condiciones que necesites.

Para condicionar una version del IE en especifico

1
2
3
4

<!--[if IE 5.5]>Para internet explorer 5.5<![endif]-->  
<!--[if IE 6]>Para internet explorer 6<![endif]-->  
<!--[if IE 7]>Para internet explorer 7<![endif]-->  
<!--[if IE 8]>Para internet explorer 8<![endif]-->

Para condicionar una version del IE en especifico y sus superiores

1
2
3
4

<!--[if gte IE 5.5]>Para internet explorer 5.5 y superiores<![endif]-->
<!--[if gte IE 6]>Para internet explorer 6 y superiores<![endif]-->
<!--[if gte IE 7]>Para internet explorer 7 y superiores<![endif]-->
<!--[if gte IE 8]>Para internet explorer 8 y superiores<![endif]-->

Para condicionar sus versiones superiores a la elegida

1
2
3
4

<!--[if gt IE 5.5]>Para versiones superiores a internet explorer 5.5<![endif]-->
<!--[if gt IE 6]>Para versiones superiores a internet explorer 6<![endif]-->
<!--[if gt IE 7]>Para versiones superiores a internet explorer 7<![endif]-->
<!--[if gt IE 8]>Para versiones superiores a internet explorer 8<![endif]-->

Para condicionar sus versiones inferiores a la elegida

1
2
3
4

<!--[if gt IE 5.5]>Para internet explorer 5.5 e inferiores<![endif]-->
<!--[if lt IE 6]>Para internet explorer 6 e inferiores<![endif]-->
<!--[if lt IE 7]>Para internet explorer 7 e inferiores<![endif]-->
<!--[if lt IE 8]>Para internet explorer 8 e inferiores<![endif]-->

Conclusion de las condicionales y/o sus variaciones de estas.

1
2
3
4

gt: greater than (version mayor que).
gte: greater than equal (version igual o mayor que).
lt: lower than (version menor que).
lte: lower than equal (version igual o menor que).
]]> http://www.zoneartcss.com/webdesign/css/comentarios-condicionales-para-ie/feed/ 0 position:fixed para Internet Explorer 6 http://www.zoneartcss.com/webdesign/css/positionfixed-para-internet-explorer-6/ http://www.zoneartcss.com/webdesign/css/positionfixed-para-internet-explorer-6/#comments Sat, 04 Jul 2009 01:19:48 +0000 miguelortega http://www.zoneartcss.com/?p=161

Position fixed para ie6

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

]]> http://www.zoneartcss.com/webdesign/css/positionfixed-para-internet-explorer-6/feed/ 4