Varias css segun navegador

Javiglez · #1 (**permalink**) 10/03/2006, 11:40

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

smokecitizen · #2 (**permalink**) 10/03/2006, 11:51

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>

fullmental · #3 (**permalink**) 10/03/2006, 11:54

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….

Javiglez · #4 (**permalink**) 10/03/2006, 12:02

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

Javiglez · #5 (**permalink**) 10/03/2006, 12:04

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.

K3NNY · #6 (**permalink**) 10/03/2006, 13:06

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.

Javiglez · #7 (**permalink**) 10/03/2006, 13:12

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

smokecitizen · #8 (**permalink**) 10/03/2006, 13:57

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

SiR.CARAJ0DIDA · #9 (**permalink**) 10/03/2006, 14:01

para usar estilos en la misma hoja:

.pepe {
esto lo ven todos
}
* HTML .pepe {
esto lo ve IE, sobreescribo lo anterior
}

Javiglez · #10 (**permalink**) 11/03/2006, 06:41

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.

Jorolo · #11 (**permalink**) 11/03/2006, 08:56

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.

AriX · #12 (**permalink**) 16/04/2006, 13:47

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.