Foros del Web » Creando para Internet » CSS »

Varias css segun navegador

Estas en el tema de Varias css segun navegador en el foro de CSS en Foros del Web. Hola tengo que hacer una hoja de estilo para cada navegador una para IE y otra para firefox, me han dicho que para elegirlo es ...
  #1 (permalink)  
Antiguo 10/03/2006, 11:40
Avatar de Javiglez  
Fecha de Ingreso: marzo-2006
Ubicación: Valladolid
Mensajes: 496
Antigüedad: 18 años
Puntos: 0
Varias css segun navegador

Hola tengo que hacer una hoja de estilo para cada navegador una para IE y otra para firefox, me han dicho que para elegirlo es mediante javascript, me imagino que sera una condicion en plan if IE tal if firefox tal pero no se cual es exactamente para que te reconozca con que navegador abre la pagina, si alguien lo tiene asi y me puede decir bien la sintaxis se lo agradeceria, saludos
  #2 (permalink)  
Antiguo 10/03/2006, 11:51
 
Fecha de Ingreso: mayo-2003
Mensajes: 40
Antigüedad: 20 años, 10 meses
Puntos: 1
Pues como bien dices, para esto necesitas de JavaScript, por lo que lo más adecuado hubiera sido publicar esto en aquel foro, pero de cualquier forma creo que esto te puede servir

Código:
<script type="text/javascript">
<!--// Stylesheet Switcher
if ((navigator.appName).indexOf("Microsoft")!=-1) {
document.write('<link rel="stylesheet" href="styleIE.css" type="text/css">');
}
else {
document.write('<link rel="stylesheet" href="style.css" type="text/css">');
}
//-->
</script>
<noscript>
<link rel="stylesheet" href="style.css" type="text/css">
</noscript>
__________________
| Smoke citizen
  #3 (permalink)  
Antiguo 10/03/2006, 11:54
Avatar de fullmental  
Fecha de Ingreso: octubre-2004
Ubicación: México DF, Xochimilco
Mensajes: 593
Antigüedad: 19 años, 5 meses
Puntos: 3
La esencia de css es justo lo contrario!!

Ese truco de una hoja de estilo para cada navegador es más bien noventero!, en fin si de todos modos quieres hacerlo pregunta en el foro de javascript, es mucho mas probable que allá te contesten.

Si quieres aprovechar la esencia de css investiga un poco más que siempre habrá alguna forma de uniformizar tus resultados visuales en cualquier navegador….
  #4 (permalink)  
Antiguo 10/03/2006, 12:02
Avatar de Javiglez  
Fecha de Ingreso: marzo-2006
Ubicación: Valladolid
Mensajes: 496
Antigüedad: 18 años
Puntos: 0
No. no lo suyo ya se que seria un solo css pero es que no se me ocurre como puedo hacerlo compatible para los dos sin cargame alguno de ellos, aun que no es mucha la diferencia entre los dos solo que uno me muestra la linea del titulo de la pagina que esta metida en una capa mucho mas abajo entonces es por eso, si por mi fuera ponia una...pero no se modificarlo porque si aumento los pixels de alineamiento de la capa se vera mal en el explorer...
Con lo facil que seria un standar para todos los navegadores....Saludos
  #5 (permalink)  
Antiguo 10/03/2006, 12:04
Avatar de Javiglez  
Fecha de Ingreso: marzo-2006
Ubicación: Valladolid
Mensajes: 496
Antigüedad: 18 años
Puntos: 0
Y si tambien tienes razon en que es la esencia de las css, si tenemos q hacer una para cada navegador ya casi daria igual y poner el codigo ya dentro de la pagina y no llamar al css en comun...en fin.
  #6 (permalink)  
Antiguo 10/03/2006, 13:06
Avatar de K3NNY
Colaborador
 
Fecha de Ingreso: marzo-2004
Ubicación: ARGENTINA!
Mensajes: 1.493
Antigüedad: 20 años
Puntos: 20
Javiglez, no hace falta que crees una hoja de estilos separada para IE. Lo que podes hacer es usar los llamados Conditional comments.

En tu hoja de estilos pones los estilos de Firefox y abajo de esos pones los de Internet Explorer encerrados en un conditional comment...

Código:
<!--[if IE]>
div.logo {
	margin-left: 10px;
}
<![endif]-->
...y listo.
__________________
delFuego.com.ar
mi tumblelog sobre diseño

La dedicación en mi respuesta es directamente proporcional a la dedicación en tu pregunta.
  #7 (permalink)  
Antiguo 10/03/2006, 13:12
Avatar de Javiglez  
Fecha de Ingreso: marzo-2006
Ubicación: Valladolid
Mensajes: 496
Antigüedad: 18 años
Puntos: 0
Gracias kenni el tema es que tengo echa la de IE y tendria que ser al reves pero bueno. la condicion la pongo en la hoja de estilo? explicame lo del div.logo, que es la capa? Gracias
  #8 (permalink)  
Antiguo 10/03/2006, 13:57
 
Fecha de Ingreso: mayo-2003
Mensajes: 40
Antigüedad: 20 años, 10 meses
Puntos: 1
Cita:
Iniciado por Javiglez
explicame lo del div.logo, que es la capa? Gracias
no es más que un ejemplo de como debes de usar los conditional comments
__________________
| Smoke citizen
  #9 (permalink)  
Antiguo 10/03/2006, 14:01
Avatar de SiR.CARAJ0DIDA  
Fecha de Ingreso: junio-2004
Ubicación: Acá
Mensajes: 1.166
Antigüedad: 19 años, 9 meses
Puntos: 4
para usar estilos en la misma hoja:

.pepe {
esto lo ven todos
}
* HTML .pepe {
esto lo ve IE, sobreescribo lo anterior
}
__________________
Internet Explorer SuckS
Download FireFox
  #10 (permalink)  
Antiguo 11/03/2006, 06:41
Avatar de Javiglez  
Fecha de Ingreso: marzo-2006
Ubicación: Valladolid
Mensajes: 496
Antigüedad: 18 años
Puntos: 0
Gracias a todos por la ayuda y la respuesta pero lo he solucionado de una manera mas facil que he encontrado en otro sitio y es metiendo una porcion de codigo dentro del css unico que iguala las alineaciones de las capas y muestra igual todo en los distintos navegadores, probe aunque no me lo creia y si funciona, si alguien ta interesado que me lo diga, saludos.
  #11 (permalink)  
Antiguo 11/03/2006, 08:56
 
Fecha de Ingreso: octubre-2005
Mensajes: 536
Antigüedad: 18 años, 5 meses
Puntos: 1
Hola a todos.

La compatibilidad entre navegadores es una quimera, un imposible, no todos lo navegadores son igual de buenos, ademas IE consciente y voluntariamente se empeña en hacer las cosas a su manera (mal). la compatibilidad no es posible por que Microsoft nunca la ha querido, lo que quieren es imponer su criterio ($)

Quien diga que la compatibilidad es posible miente.

Quien quiera contradecirme que le haga un hack a esto (solo con css)

Código HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html lang='es'> 
<meta http-equiv='Content-Type' content='text/html; charset=UTF-8'> 
<title>z-index y hover</title> 
<style type='text/css'>
.comun { position: absolute; width: 10em; height: 5em; } 
#rojo { background-color: red; left: 1em; top: 1em; z-index: 1; } 
#azul { background-color: blue; left: 5em; top: 3em; z-index: 2; } 
#naranja { background-color: orange; left: 9em; top: 2em; z-index: 3; }
#rojo:hover,
#naranja:hover,
#azul:hover { z-index: 4; } 
</style> <body> 
<p id='rojo' class='comun'>El rojo es vivo</p> 
<p id='azul' class='comun'>El azul es elegante</p> 
<p id='naranja' class='comun'>El naranja es guay</p> 
</body> </html> 
O a esto

Código HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd"> 
 <META http-equiv="Content-Type" content="text/html; charset=utf-8"> 
 <title>tbody con scroll v0.3</title> 
 <style type='text/css'> 
 .scroll { height: 14ex; overflow-x: hidden; overflow-y: scroll; } /* css3 */ 
 </style> <table border='1' summary='esto es una prueba de tabla con tbody y demás'> 
 <thead> 
 <tr> <th>Cantidad</th> <th>Producto</th> <th>Valor</th> <th>Subtotal</th> </tr> 
 </thead> 
 <tbody class='scroll'> 
 <tr> <td>1</td> <td>Azucar</td> <td>100</td> <td>100</td> </tr> 
 <tr> <td>2</td> <td>Aceite</td> <td>100</td> <td>200</td> </tr> 
 <tr> <td>4</td> <td>Sal</td> <td>200</td> <td>800</td> </tr> 
 <tr> <td>1</td> <td>Fruta</td> <td>100</td> <td>100</td> </tr> 
 <tr> <td>2</td> <td>Agua</td> <td>100</td> <td>200</td> </tr> 
 <tr> <td>4</td> <td>Carne</td> <td>200</td> <td>800</td> </tr> 
 </tbody> 
 <tbody> 
 <tr> <th colspan='3'>Total sección</th> <td>2.200</td> </tr> 
 </tbody> 
 <tbody class='scroll'> 
 <tr> <td>10</td> <td>Azucar</td> <td>100</td> <td>1000</td> </tr> 
 <tr> <td>20</td> <td>Aceite</td> <td>100</td> <td>2000</td> </tr> 
 <tr> <td>40</td> <td>Sal</td> <td>200</td> <td>8000</td> </tr> 
 <tr> <td>10</td> <td>Fruta</td> <td>100</td> <td>1000</td> </tr> 
 <tr> <td>20</td> <td>Agua</td> <td>100</td> <td>2000</td> </tr> 
 <tr> <td>40</td> <td>Carne</td> <td>200</td> <td>8000</td> </tr> 
 </tbody> 
 <tbody> 
 <tr> <th colspan='3'>Total sección</th> <td>22.000</td> </tr> 
 <tr> <th colspan='3'>Total total</th> <td>24.200</td> </tr> 
 </tbody> </table> 
O a esto
Código HTML:
<?xml version="1.0" encoding="UTF-8"?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="sp" lang="sp"> 
<head>  
<meta http-equiv='Content-Type' content='text/xml; charset=UTF-8'/> 
<title>un poco de dinamismo</title>  
<style type='text/css'> 
.item { list-style: none; list-style-position: inside; padding: 0.2ex; margin: 0.2ex; } 
a { color: darkblue; text-decoration: none;} 
ul { border: transparent solid 0.1ex; } 
ul:hover { border: peru solid 0.1ex; } 
ul:hover cite,
ul:hover em { color: maroon; } 
div:hover ul { display: block; } 
div:hover a { color: blue; text-decoration: underline;} 
.editorial { width: 30%;} 
.oculto ul { display: none; } 
.vista { visibility: hidden; } 
ul:hover .vista { visibility: visible; } 
</style> </head> 
<body> 
<div class='oculto editorial'>  
<h2> <a href="http://www.maestrosdelweb.com/editorial/delicious/">  Una deliciosa forma de guardar tus favoritos </a> </h2>  
<ul class='item oculto'>  
<li> <q> <em>Del.icio.us</em> es un servicio social que permite guardar los favoritos de tu navegador con todas las pautas que da el Web 2.0.</q> </li>  
<li>Por <cite>Christian Van Der Henst</cite> </li>  
<li class='vista'>675 lecturas y 0 comentario</li>  
</ul> </div> 
<div class='editorial'>  
<h2> <a href="http://www.maestrosdelweb.com/editorial/delicious/">  Una deliciosa forma de guardar tus favoritos </a> </h2>  
<ul class='item'>  
<li> <q> <em>Del.icio.us</em> es un servicio social que permite guardar los favoritos de tu navegador con todas las pautas que da el Web 2.0.</q> </li>  
<li>Por <cite>Christian Van Der Henst</cite> </li>  
<li>676 lecturas y 0 comentario</li> </ul> 
</div>
 <p> <a href="http://validator.w3.org/check?uri=referer"> 
<img src="http://www.w3.org/Icons/valid-xhtml10"  alt="Valid XHTML 1.0 Strict" height="31" width="88" /></a> </p>
</body> </html> 
O... la lista sería interminable.

Última edición por Jorolo; 11/03/2006 a las 13:13
  #12 (permalink)  
Antiguo 16/04/2006, 13:47
Avatar de AriX  
Fecha de Ingreso: marzo-2006
Mensajes: 9
Antigüedad: 18 años
Puntos: 0
hola señores, yo tambien me encuentro con problemas con el tema de la hoja de stilo. yo diseño el sitio y lo pruebo en firefox, y siempre toda la logica que hago con el css la refleja correctamente, pero tengo la obligación de probrarlo en ie para asegurarme que toda la gente va a poder visualizarla correctamente.

bueno paso a explicar el problema, yo queria generar una tabla para que cuando el cursa pasara sobre ella, cambiara el color de fondo o la imagen de fondo de la celda. entonces arme lo siguente

td.navrell {background-image: url(images/navrellplaca.gif);
padding-left: 10px;
height: 15px;}

td.navrell:hover {background-image: url(images/navrellplacapres.gif);}

claro que en ie no anda... se que hay una forma de hacerlo en java, pero otra vez sopa porque el ie tira errores de advertencia cuanto tiene contenido java, entonces? que hago?

muchas gracias son relativamente principiante en esto les agradezco la ayuda.
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta

SíEste tema le ha gustado a 1 personas




La zona horaria es GMT -6. Ahora son las 01:06.