Diferenciar en CSS para firefox e IE 7 u 8

fr1974 · #1 (**permalink**) 30/07/2010, 14:39

Estoy utilizando Firefoz e internet explorer 8.0 , el cual posee en la pagina unos metatags para emularlo como 7 sino es una rompedura total de cabeza puesto que el internet explorer solo da problemas continuos

Este es el css

Cita:

#curva_up
{
position:relative;
left:1px !important;
left:0px;
width:1023px;
height:24px;
margin:auto;
background:url("../../../skins/default/images/header_curva_up.png");
}

Tal como está me funcionaba antes el !important solo lo leia el Firefoz y luego ponia lo qeu queria para el explorer pero ahora el explorer no sirve e interpreta tambien el tag con el important , el caso es como para dos valores diferentes de left como disponerlo para que un valor lo reconozca en firefoz y otro en explorer

Un cordial saludo y Muchas gracias

alexk · #2 (**permalink**) 30/07/2010, 14:41

usa comentarios condicionales...

fr1974 · #3 (**permalink**) 30/07/2010, 15:49

pero no hay algun hack para diferenciar dentro de la hoja de estilos propiamente dicho un simple apartado de otro sin usar esto sino no hay forma y me parece bastante intrusivo el hacerlo asi tener dos hojas de estilo o dos estilos embebidos en la pagina , si hay algun hack me vendría mejor

Muchas gracias por tu ayuda

jomaruro · #4 (**permalink**) 31/07/2010, 02:39

Hola:

Cita:

Iniciado por alexk

usa comentarios condicionales...

y olvídate de los hack.

Saludos.

canino_latino · #5 (**permalink**) 02/08/2010, 23:25

Hola bueno mira yo he creado un javascript que lo uso en una de mis webs:

Código Javascript:

Ver originalfunction chrome() {
var chrome = navigator.userAgent.toLowerCase().indexOf('chrome') > -1;
if(chrome) {
document.getElementById('estilo').href="css/principalChrome.css";
}
var IE7 = navigator.userAgent.toLowerCase().indexOf('msie 7.0') > -1;
if(IE7) {
document.getElementById('estilo').href="css/principalIE7.css";
}
var IE8 = navigator.userAgent.toLowerCase().indexOf('msie 8.0') > -1;
if(IE8) {
document.getElementById('estilo').href="css/principalIE8.css";
}
}

asi se ve en codigo completo:

Código HTML:

Ver original<!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" dir="ltr" lang="es">
<head>
<title>Tu titulo</title>
<script type="text/javascript">
function chrome() {
var chrome = navigator.userAgent.toLowerCase().indexOf('chrome') > -1;
if(chrome) {
document.getElementById('estilo').href="css/principalChrome.css";
}
var IE7 = navigator.userAgent.toLowerCase().indexOf('msie 7.0') > -1;
if(IE7) {
document.getElementById('estilo').href="css/principalIE7.css";
}
var IE8 = navigator.userAgent.toLowerCase().indexOf('msie 8.0') > -1;
if(IE8) {
document.getElementById('estilo').href="css/principalIE8.css";
}
}
</script>
<script type="text/javascript">chrome();</script>
<link href="css/principal.css" rel="stylesheet" type="text/css" id="estilo"/>
</head>
<body>
</body>
</html>

de esta manera no necesitas condicionales ya que no los hay para todos los navegadores.

NOTA: principal.css es el de firefox ya que no lo idetificamos.

espero te sirva chao.