Comunidad de diseño web y desarrollo en internet online

Hack para Firefox e IE

Foros de discusión > Javascript y jQuery

Citar            
MensajeEscrito el 05 Sep 2007 01:06 pm
Hola amigos, como ya sabemos todos, Firefox e IE no presentan los mismo standares en cuanto a CSS, o mejor dicho, no los muestra igual, ahora se presentan varios problemas.
Con IE7 el padding se comporta más o menos igual que con Firefox, pero IE6 hace lo que le viene en gana.
Otra cosa es los background-image en los vínculos, IE6 si los hace igual a Firefox pero IE7 no...

¿QUe puedo hacer? ¿Dónde puedo encontrar un tutorial que explique como hacer para que le diseño quede igual en los dos navegadores en sus distintas versiones?

Por elav

Claber

1461 de clabLevel

9 tutoriales

Genero:Masculino  

Envíale un mensaje privado     Web

Administrador de Sistemas

firefox
Citar            
MensajeEscrito el 05 Sep 2007 01:14 pm
Podrias hacer CSS especialmente para IE6 y/o IE7 y con una validación en HTML cargas los que correspondan.

Código :

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

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


También podes, en la validación, preguntar si la versión es menor o mayor a X

Código :

<!--[if gte IE 6]>
<link href="/css/ie.css" rel="stylesheet" type="text/css" />
<![endif]-->


saludos

Por PabloHdS

251 de clabLevel



 

Envíale un mensaje privado   Email  

firefox
Citar            
MensajeEscrito el 05 Sep 2007 01:20 pm
Gracias, ya había visto algo de esto pero no lo entendía muy bien, entonces por ejemplo, creo un documento css que importe los archivos css para Firefox y IE6 y IE7 ¿no?

Por elav

Claber

1461 de clabLevel

9 tutoriales

Genero:Masculino  

Envíale un mensaje privado     Web

Administrador de Sistemas

firefox
Citar            
MensajeEscrito el 05 Sep 2007 01:30 pm
no, el HACK ese va en el documento HTML
Lo que yo haria es un CSS general que se cargue sin ninguna condición y despues un CSS especial que solo tenga los estilos específicos que te generen conflicto y esos si cargarlos con el Hack.. algo asi

Código :

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


Saludos

Por PabloHdS

251 de clabLevel



 

Envíale un mensaje privado   Email  

firefox
Citar            
MensajeEscrito el 05 Sep 2007 01:48 pm
:)

Por elav

Claber

1461 de clabLevel

9 tutoriales

Genero:Masculino  

Envíale un mensaje privado     Web

Administrador de Sistemas

firefox
Citar            
MensajeEscrito el 05 Sep 2007 01:54 pm
Debo estar haciendo algo mal porque no me sale :(.
A ver repasemos:

Dentro del <head></head> pongo esto:

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

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

¿Cierto?

Entonces creo 3 archivos css: Firefox, IE6, e IE7

¿Cierto?

Si por ejemplo, en Firefox el padding de un div es 20px, en IE6 puedo ponerle 25px y IE 28px por ejemplo y debería quedarme exactamente igual en los 3 navegadores.. ¿no?

Pues no me sale... :(

Es raro, uso Dreamweaver para esto y el código al ponerlo dentro de <head></head> queda como comentario.

Por elav

Claber

1461 de clabLevel

9 tutoriales

Genero:Masculino  

Envíale un mensaje privado     Web

Administrador de Sistemas

firefox
Citar            
MensajeEscrito el 05 Sep 2007 02:03 pm
Lo de comentario esta bien, porque de hecho es un comentario, solo que el IE interpreta ese comentario como una validación y ejecuta lo que esta dentro del IF.
Lo mejor seria que postees el código que estas haciendo para ver el problema.

Por PabloHdS

251 de clabLevel



 

Envíale un mensaje privado   Email  

firefox
Citar            
MensajeEscrito el 05 Sep 2007 02:11 pm
ok

HTML

Código :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>titulo de la web</title>
<link href="css/root.css" rel="stylesheet" type="text/css" />


</head>

<body>
<div id="contenedor">
 <div id="header">
  <div id="menu">
   <ul>
    <li><a href="#">Link1</a></li>
    <li><a href="#">Link2</a></li>
    <li><a href="#">Link3</a></li>
    <li><a href="#">Link4/a></li>
   </ul>
  </div>
 </div>
</div>
</body>
</html>


CSS

Código :

body{
background-color:#390000;
background-image:url(../images/background.jpg);
background-repeat:repeat-x;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
}
#contenedor{
width:700px;
margin:auto;
margin-top:-20px;
}
#header{
width:700px;
clear:both;
height:100px;
background-color:#2A0000;
background-image:url(../images/background_header.jpg);
}
#menu{
width:421px;
height:31px;
background-image:url(../images/background_menu.jpg);
background-repeat:no-repeat;
background-position:bottom;
padding:66px 0 0 0;
float:right;
}
#menu ul{
padding:0px;
margin:0px;
list-style:none;
text-align:center;
float:right;
}
#menu ul li{
display:inline;
line-height:35px;
}
#menu ul li a{
color:#FFFBF0;
text-decoration:none;
font-weight:bold;
padding:0 20px 0 20px;
}
#menu ul li a:hover{
color:#FF0000;
text-decoration:none;
font-weight:bold;
padding:0 20px 0 20px;
}

Por elav

Claber

1461 de clabLevel

9 tutoriales

Genero:Masculino  

Envíale un mensaje privado     Web

Administrador de Sistemas

firefox
Citar            
MensajeEscrito el 05 Sep 2007 02:16 pm
no veo el hack en el HTML

Por PabloHdS

251 de clabLevel



 

Envíale un mensaje privado   Email  

firefox
Citar            
MensajeEscrito el 05 Sep 2007 02:20 pm

Código :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ntitulo del sitio</title>
<link href="css/root.css" rel="stylesheet" type="text/css" />
<!--[if IE 6]>
<link href="css/ie6.css" rel="stylesheet" type="text/css" />
<![endif]-->

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


</head>

<body>
<div id="contenedor">
 <div id="header">
  <div id="menu">
   <ul>
    <li><a href="#">link</a></li>
    <li><a href="#">link</a></li>
    <li><a href="#">link</a></li>
    <li><a href="#">Clink</a></li>
   </ul>
  </div>
 </div>
</div>
</body>
</html>

Por elav

Claber

1461 de clabLevel

9 tutoriales

Genero:Masculino  

Envíale un mensaje privado     Web

Administrador de Sistemas

firefox
Citar            
MensajeEscrito el 05 Sep 2007 02:32 pm
y como tenes los archivos CSS?

Por PabloHdS

251 de clabLevel



 

Envíale un mensaje privado   Email  

firefox
Citar            
MensajeEscrito el 05 Sep 2007 02:41 pm
Mira tengo 3 archivos CSS, el que puse anteriormente es el principal, y en los otros 2 (ie6 y ie7) no he puesto nada, mejor dicho lo que hice fué poner lo mismo que en el archivo principal, pero cambié algunos valores para que me quedara como quiero.

Por ejemplo:

Donde en el principal está:

Código :

#menu{
width:421px;
height:31px;
background-image:url(../images/background_menu.jpg);
background-repeat:no-repeat;
background-position:bottom;
padding:66px 0 0 0;
float:right;
}


en el ie6 puse esto:

Código :

#menu{
width:421px;
height:31px;
background-image:url(../images/background_menu.jpg);
background-repeat:no-repeat;
background-position:bottom;
padding:60px 0 0 0;
float:right;
}

Por elav

Claber

1461 de clabLevel

9 tutoriales

Genero:Masculino  

Envíale un mensaje privado     Web

Administrador de Sistemas

firefox
Citar            
MensajeEscrito el 05 Sep 2007 02:52 pm
Mmmmmmmm. no se donde puede estar el error.
Lo mejor seria que pongas aca un enlace para poder verlo.
El Hack no necesariamente tiene que ir en el head, puede ir en el body, y en los CSS para IE conviene solo poner los valores que cambian, no todas las propiedades.

Saludos

Por PabloHdS

251 de clabLevel



 

Envíale un mensaje privado   Email  

firefox
Citar            
MensajeEscrito el 05 Sep 2007 02:54 pm
ok Gracias de todos modos.. :)

Por elav

Claber

1461 de clabLevel

9 tutoriales

Genero:Masculino  

Envíale un mensaje privado     Web

Administrador de Sistemas

firefox
Citar            
MensajeEscrito el 05 Sep 2007 05:29 pm
Bueno ya lo resolví, no sé como pero lo hice todo de nuevo y funciona... Gracias :)

Por elav

Claber

1461 de clabLevel

9 tutoriales

Genero:Masculino  

Envíale un mensaje privado     Web

Administrador de Sistemas

firefox
Citar            
MensajeEscrito el 06 Sep 2007 06:31 am
existe otra solución para esto

Código :

#mielemento{
lo-que-quieras:  valorFF !important;/* esto lo va a tomar firefox */
lo-que-quieras:  valorIE;/* esto lo va a tomar Internet Explorer */
}
#ejemplo_practico{
padding: 10 !important;
padding: 0;
}

la razón de que esto funcione es que IE no reconoce el atributo !important atributo que logra que se ignoore la erencia dándole la preferencia a ese atributo evitando que se sobreescriba.
osea evita que se sobreescriba y como IE no lo reconoce el si sobreescribe

Por Inyaka

Claber

3176 de clabLevel

9 tutoriales
2 articulos

Genero:Masculino   Desarrollador de GAIA

Envíale un mensaje privado    

Programador y fotógrafo

firefox
Citar            
MensajeEscrito el 06 Sep 2007 12:04 pm
Wow :)

Por elav

Claber

1461 de clabLevel

9 tutoriales

Genero:Masculino  

Envíale un mensaje privado     Web

Administrador de Sistemas

firefox
Citar            
MensajeEscrito el 06 Sep 2007 12:05 pm
Otra cosa. ¿Que puedo hacer para IE7? No me muestra el background de los link y tampoco el estado :hover

Por elav

Claber

1461 de clabLevel

9 tutoriales

Genero:Masculino  

Envíale un mensaje privado     Web

Administrador de Sistemas

firefox
Citar            
MensajeEscrito el 10 Sep 2007 04:03 pm
¿Alguien sabe como hacer para que IE7 muestre los background en los hipervínculos?

Por elav

Claber

1461 de clabLevel

9 tutoriales

Genero:Masculino  

Envíale un mensaje privado     Web

Administrador de Sistemas

firefox
Citar            
MensajeEscrito el 11 Sep 2007 08:28 pm
He estado buscando Hacks para IE7 pero no he encontrado ninguno.. ¿Alguien sabe donde lospuedo encontrar? Si es posible en español

Por elav

Claber

1461 de clabLevel

9 tutoriales

Genero:Masculino  

Envíale un mensaje privado     Web

Administrador de Sistemas

firefox
Citar            
MensajeEscrito el 11 Sep 2007 09:41 pm
IE no da problemas con :hover en la etiqueta <a> sin embargo no ve el evento en la etiqueta <li>, tampoco ve claramente las subclases #miclase ul li a:hover si antes no le enseñas el camino (al menos eso tengo entendido)

Código :

#miclase{
loquesea: algo;
}
 #miclase ul{
loquesea: algo;
}
#miclase ul li {
loquesea: algo;
}
#miclase ul li a:hover{
loquesea: algo;
}

Por Inyaka

Claber

3176 de clabLevel

9 tutoriales
2 articulos

Genero:Masculino   Desarrollador de GAIA

Envíale un mensaje privado    

Programador y fotógrafo

firefox
Citar            
MensajeEscrito el 12 Sep 2007 12:05 pm
Así lo hago y no funciona :(

Por elav

Claber

1461 de clabLevel

9 tutoriales

Genero:Masculino  

Envíale un mensaje privado     Web

Administrador de Sistemas

firefox
Foros de discusión > Javascript y jQuery

   Página 1 de 1

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.