activar una CSS u otra dependiendo del navegador desde el que se acceda

[goya.marta]

hola,
estoy generando una web con CSS, está acabada y sólamente me falta ajustar cosas para diferentes navegadores, bueno mejor dicho ajustarla a internet explorer, ya que el resto se ve perfectamente.
Entonces he generado una CSS especifica para internet explorer, y me faltaría poner en el código XHTML algo que cuando un usuario desde internet explorer, coga la CSS de internet explorer. y los otros usuarios de los otros navegadores como opera, camino, firefox, safari,.... cogan la otra que es con la que se ve bien.
he buscado por ahí este código que hay que pegarlo entre la head;

<!--[if gt IE 6]>
<link href="estilo-explorer.css" rel="stylesheet" type="text/css" media="all" />
<![endif]-->
<link rel="stylesheet" href="estilo.css" type="text/css" />

pero no me funciona. ¿que está mal? tengo que quirar algo de lo que he puesto com los !, o las rayas?

seguramente haya elegido el camino más largo para arreglar los desajustes que se producen en internet pero como había oído que con esto se solucionaba.

gracias

[Mikmoro]

Hola.

Con el [if gt IE 6], le estás diciendo "si es mayor que IE6 (gt es el símbolo de >, es decir, "mayor que". Sólo cambialo por el "menor que" y añádele una e y deberá funcionar:

[if lte IE 6]

lo que significa "menor o igual que".

Mikel.

[PatomaS]

Hola

Aunque hay varias maneras de hacer lo que quieres, la mejor es que utilices tecnologías de servidor y envíes el código html con la llamada a la css correcta. Puedes usar perl, php, asp, etc.

Para respuestas más detalladas y ejemplos de códigos, pásate por esos subforos.

Felicidad

[Mikmoro]

Bueno, a mi me resulta infinitamente más sencillo como lo ha hecho, es decir, usando un comentario condicional para Explorer.

Mikel.

[goya.marta]

hola,
he hecho lo que me habéis dicho y si me sale. la verdad que para alguien que no sabe mucho como yo. ha sido fácil hacerlo y a sido fácil entenderlo y la otra forma que explicas no sabría ni cómo hacerlo. de todas formas aunque ahora se algo nuevo, que pufff, no me sale lo que quiero. debo de ser dura de mollera.
ya me da hasta apuro seguir preguntando.

la historia es que tengo un diseño líquido y en todos los navegadores se ve bien menos en IE. El problema es que el menú se desplaza a freir espárragos. Y la solución es poner en px el margen left, pero claro de esa forma todo está líquido menos el menú. ¿qué hago? Pongo todo fijo y me olvido? O cómo hago para que el menú aparezca en su sitio?.

Por si acaso os pongo el código, para ver si he puesto algo mal, y me podáis corregir. no seais muy duros, que seguro que lo he puesto de la forma más complicada y seguro que se puede mejorar. Gracias.

Jo si alguien quiere echarme una mano, le puedo pasar el link en donde tengo la web, porque no se por donde tirar y eso que me habéis ayudado mucho estos días pero ni con esas.

body{
background-image: url(imagenes/fondo-transparente.gif);
background-repeat: no-repeat;
background-color:#F4EDE3;
margin:0;
font: 10pt/13pt 'Lucida Grande', Verdana, Helvetica, sans-serif;
}

A:link{ color:#006699; text-decoration:none; }
A:hover{ color:#92856c; text-decoration:underline; }
A:active{ color:#fc9004; text-decoration:none; }
A:active:hover{ color:#000; text-decoration:underline; }
A:visited{ color:#92856c; text-decoration:none; }
A:visited:hover{ color:#000; text-decoration:underline; }

#cabeza_equipo{
background: url(imagenes/lterales/cabeza_equipo.JPG) no-repeat #552A00 top left;
width:364px;
height:574px;
margin-left:0;
margin-right:10;
margin-bottom:0;
float:left;
}

#wrap{
width:800px;
height:661px;
margin-left:auto;
margin-right:auto;
margin-top:20px;
background:#f2ede2;
border:#92856c 1px solid;
}

#barramenu{
width:134px;
height:574px;
position:absolute;
margin-top:0px;
left:270px;

}

#menu li{
margin-top:15px;
background:transparent;
list-style-type: none;
text-align:left;
font-family: 'Lucida Grande', Verdana, Helvetica, sans-serif;
font-size:14px;
letter-spacing:-1px;
color:#006699;
width:150px;
}

#navlist li a:link { color: #006699; text-decoration:none; }
#navlist li a:visited { color: #fc9004; text-decoration:none; }
#navlist li a:hover {color: #92856c; text-decoration:none; }


h3{
font-size:18px;
font-weight:bold;
color:#fc9004;
letter-spacing:-3px;
font-style:normal;
}

#content{
height:532px;
width:374px;
background:#f2ede2;
padding:21px;
text-align:justify;
font: 9pt/14pt 'Lucida Grande', Verdana, Helvetica, sans-serif;
color:#92856c;
font-style:italic;
float:left;
overflow:hidden;
}

#footer{
clear:both;
background:#92856c;
padding:9px;
text-align:center;
text-transform:uppercase;
font: 8pt/9pt 'Lucida Grande', Verdana, Helvetica, sans-serif;
color:#FFF;
}

#title{
background:#92856c;
text-align:center;
padding:9px;
font-family: 'Lucida Grande', Verdana, Helvetica, sans-serif;
font-size:10px;
text-transform:uppercase;
color:#FFFFFF;
}


.pullquote {
color:green;
width:150px;
float:right;
width:150px;
margin-top:10px;
margin-bottom:10px;
margin-left:10px;
padding-bottom:10px;
font-family:'Lucida Grande', Helvetica, sans-serif;
font-size: 24px;
line-height:26px;
letter-spacing:-2px;
text-align: right;
color:#fc9004;
}

[Mikmoro]

Preferiría que pusieras el link a tu web para verlo funcionando.

Mikel.

[goya.marta]

vale,
yo encantada. es en IE donde se ve mal.

tendría que verse en la banda crema del fondo. he probado de todo, con posicion adsoluta, relativa, margin-left o sólo left, con valores negativos, etc.....

¿ tendrá solución ? ¿será un expediente X? gracias.


link

[Mikmoro]

Bueno, mi recomendación es esta:

cambia tu clase menu

#barramenu{
width:134px;
height:574px;
position:absolute;
margin-top:0px;
margin-left:200px;

}

por esta otra:

#barramenu{
width:134px;
margin-top: 0px;
margin-left:180px;
}

Es decir, yo le quitaría la posición absoluta y el height, que no lo necesita porque medirá tanto como su contenido. Creo que así lo verás igual en los dos sin hacks para IE (al menos para esto, resto es otro cantar).

Otra recomendación: deberías procurar no abusar de las posiciones absolutas, que siempre esconden desagradables sorpresas si no se tratan con cuidado. Y otra cosa: creo que debes procurar no usar el pt (puntos) para los tamaños de fuente.

Mikel.

[goya.marta]

gracias,
lo que me dices ya lo habia probado, el quitar la posicion adsoluta pero no se me ve bien, ya que si se queda fijo en el sitio donde tendría que estar, pero si agrandas la ventana todo el diseño se hace liquido excepto el menu que se queda estatico donde yo le he dicho y el resto se mueve, y claro el menu cae en la foto lateral, o en el texto.

¿la única diferencia es que no había probado quitar height. esto podría influir?
pero qué complicado es esto?

[Mikmoro]

¿Estás segura de que lo has probado bien?

No entiendo esta frase en absoluto:

si se queda fijo en el sitio donde tendría que estar, pero si agrandas la ventana todo el diseño se hace liquido excepto el menu que se queda estatico donde yo le he dicho y el resto se mueve, y claro el menu cae en la foto lateral, o en el texto.

Es justamente todo lo contrario, es decir, cuando está en posición absoluta es cuando se queda quieto en el sitio y se descuadra al modificar el tamaño, y si le quitas el absoluto, con el cambio que te he propuesto, se mueve con el resto y siempre está dentro del hueco del gráfico.

Pruébalo de nuevo. Modifica la clase de la ccs que te he dicho y súbelo al servidor, para que podamos ver qué ocurre.

Mikel.

[goya.marta]

hola y buenos días,

ya he echo lo que me dijiste:

Código:

cambia tu clase menu

#barramenu{
width:134px;
height:574px;
position:absolute;
margin-top:0px;
margin-left:200px;

}

por esta otra:

#barramenu{
width:134px;
margin-top: 0px;
margin-left:180px;
}

pero el menu me sale super desplazado.
link

entonces he generado lo mismo pero sin la palabra margin (que comentan que da problemas en IE)

Código:

#barramenu{
width:134px;
margin-top: 0px;
left:180px;
}

pero claro, entonces me queda fijo.
link

ah, que te parece? que crees que podría hacer?
gracias

[Mikmoro]

ya he echo lo que me dijiste:

Código:

cambia tu clase menu

#barramenu{
width:134px;
height:574px;
position:absolute;
margin-top:0px;
margin-left:200px;

}

por esta otra:

#barramenu{
width:134px;
margin-top: 0px;
margin-left:180px;
}

pero el menu me sale super desplazado.
link

A ver: para mi que no nos estamos entendiendo. Entro en el link que pones ahí, miro la css (estilo.css), y no está la clase como te puse, sino como la tenías antes:

#barramenu{
width:134px;
height:574px;
position:absolute;
margin-top:0px;
margin-left:200px;

}

Es decir, que lo pones como de muestra para ver que no funciona lo que te dije, pero sin embargo lo pones sin el cambio que te dije, sino como estaba antes, entonces claro, pasa lo mismo de antes.

¿Puedes poner en ese ejemplo (subdirectorio "v") la hoja de estilo con el cambio que te puse? Si no, yo al menos no puedo ayudarte.

Mikel.

[goya.marta]

jo es que el codigo que me has pasado tu. tendría que ser el bueno. pero me da la sensación que las capas de texto o contenido se adelanta al menu. entonces por eso el menu se pone despues.

[goya.marta]

hola mikel,

haber la hoja de estilo que estas mirando esa esta por defecto para todos los navegadores menos para IE ya que me daba problemas. Entonces lo que hice fue poner otra hoja de estilo que es estilo-explorer.css para IE. ¿a que lo estoy complicando todavia mas si cabe?

[goya.marta]

de todas formas, sustituyo eso en la de estilos.css . ¿vale? en un momentin esta.

y muchas gracias, se agradece. Seguro que solucionamos esto.

[Mikmoro]

No, es que esa posible solución debería ir en la hoja general, y luego ya veremos qué le ocurre a explorer, porque seguramente hará que funcione igual par alos dos.

Mikel.

[goya.marta]

ey ya he echo el cambio en el subdirectorio v.

Echale un vistazo. Y ya me dirás. pq yo lo veo super desplazado. sale fuera. aunque igual tu lo ves bien. desde donde lo miro es en un XP. y bueno en los demás navegadores firefox, opera, camino, l...... y mac todo perfect.

bueno ahí va esto. Faltará poco para conseguir celebrarlo ?

[Mikmoro]

Yo no sé qué es lo que ha fallado o dónde nos hemos liado.
De todas maneras he estado mirando tu css y html de nuevo, y creo que hay una solución sencilla para ambos navegadores. Prueba añadiendo position relative a tu clase warp, es decir, que quede así:

#wrap{
width:800px;
height:661px;
margin-left:auto;
margin-right:auto;
margin-top:20px;
background:#f2ede2;
border:#92856c 1px solid;
position: relative;
}

Y ahora pon la clase del menú de esta manera:

#barramenu{
width:134px;
margin-top: 0px;
left:180px;
position: absolute;
}

Creo que esto funcionará bien (o debería).

Mikel.

[goya.marta]

ey, ey,
aleluya, aleluya,
it´s a perfect day.
que guay.
al final ha salido.

Muchas gracias, muchas gracias.

pero una cosa ¿ que hemos hecho ? ¿ qué lógica tiene ? No entiendo nada. de forma coloquial sin código que le hemos dicho que haga?

eres un máquina.

agur.
marta

[Mikmoro]

Pues le hemos dicho que tenga una posición absoluta pero no con respecto a la página, sino con respecto a la caja que la contiene, que a su vez debe estar en posición relativa o absoluta para admitir que otra se posiciones de esa manera con respecto a ella.

Me alegro de que al final haya funcionado. Soy uno de los tipos más cabezones que hayas conocido nunca.

Hasta la vista.

Mikel.