problemas con los comentarios condicionales y css (no los detecta)

pepj · #1 (**permalink**) 15/09/2008, 10:23

Hola, soy nuevo en esta pagina y tambien con el tema css.

Estoy haciendo una web y quiero usar los comentarios condicionales para usar un css o otro segun el explorador, para que se arreglen algunos fallos que me aparecen en el explorer 6 y 7.

El problema esta que solo me lo detecta y cambia la pagina indice (si lo pongo en la misma) pero si pongo el codigo de comentario condicional dentro de cualquier pagina de la web no me la detecta, no cambia nada.

Es decir que como si solo me lo detecatara en la pagina indice, en las otras no.

el codigo en el html:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>...</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">





<link rel="stylesheet" type="text/css" href="styl/styl.css" />

</head>

<body>...

el primero es para explorer 7 o superiores
el segundo para inferiores a explorer 7
y el tercero para modzilla, safari, etc... (creo que es este el que no me deja que se lean los otros 2...) se hace de alguna otra forma?

alguien tiene alguna solucion? estoy desesperado, hace semanas que estoy buscando soluciones

Mikmoro · #2 (**permalink**) 15/09/2008, 10:28

Debes ponerlo al revés, es decir, que primero lea la hoja genérica y luego los comentarios condicionales, si no, algunas de las reglas para IE serían sobreescritas por las genéricas.

pepj · #3 (**permalink**) 15/09/2008, 10:33

Que rapida respuesta!! uooo

Gracias Mikel, ahora me funciona jeje!!

pepj · #4 (**permalink**) 15/09/2008, 11:35

lo que dices me lo ha solucionado, pero ahora tengo otro problema, segun que IE 7 no me lo detecta y segun que otro si.

en el css generico tengo puestos los codigos css con: html>body .Estilo4 ... (para que los lea bien el firefox, safari, etc)

y en los otros css tengo que poner todo lo mismo pero que lo entienda explorer?

es que creo que no lo lee porque lee dos veces algunos codigos css ...

Mikmoro · #5 (**permalink**) 15/09/2008, 12:09

No es necesario que uses lo de html>body. En realidad, en las hojas específicas para IE7 debes poner sólo los estilos que vayan a ser diferentes, y debes contradecir todas las propiedades que no quieres que sean iguales. Por ejemplo:

Hoja FF, etc:

body {margin 10px;}

Hoja IE7:

body {margin 12px;}

Y con eso basta.

pepj · #6 (**permalink**) 15/09/2008, 12:27

hasta ahora todo me funciona bien con el firefox, safari, internet explorer 6 o inferiores, el problema es con el explorer 7.

no se si soy yo, pero resulta que con segun que explorer 7 funciona perfectamente y segun que explorer 7 es como si no lo detectara el codigo. Lo raro es que en segun que ordenador tienen una version y se be bien la pagina y en segun que otro ordenador con la misma version se be mal. (solo con explorer 7)

Hay alguna otra cosa que haga que esto no funcione¿ es que es muy raro...

Mikmoro · #7 (**permalink**) 15/09/2008, 14:48

Podría ser cosa de la resolución de pantalla, si no, no se me ocurre. Pero vamos, lo mejor sería ver tu código para juzgar.

pepj · #8 (**permalink**) 16/09/2008, 08:33

Te pongo la pagina que con la mayoria de los explorers 7 no funciona, algunos casos si que les va bien.

por ejemplo el texto de escuderia a algunos con IE 7 se les be a la derecha y no en el centro. Es como si no detectara el comentario condicional para IE 7.

http://www.mesblanc.com/bcr/escuderia.htm

en el css generico tengo puesto este codigo (solo pongo el general y de la pagina escuderia):

body {
background-color: #212121;
background-image: url("barrafons.jpg");
background-repeat: no-repeat;
background-attachment: fixed;

margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
overflow:hidden
}
#wrapper {
width: 100%;
text-align: center;
margin-top: 1px;
}
#container {
width: 600px;
margin-left:auto;
margin-right:auto;
}

#header {
width: 100%;
margin-top: 5px;
background-color: #333333;
height: 36px;
margin-bottom: 20px;
}

/* pagina escuderia */

#fonsescu {
width: 100%;

background-color:#212121;
height: 565px;
background-image: url("fonsescu.jpg");
background-repeat: no-repeat;
background-attachment: absolute;
z-index:1;
}

#txtintro {
line-height:25px;
z-index:2;
position:absolute;
margin-left: 90px ;
margin-top: 50px;
width: 430px;
height: 200px;
text-align:left;
}

#dreta{

z-index:3;
position:absolute;
margin-left: 520px ;
margin-top: 250px;
width: 62px;
height: 61px;
text-align:left;
}

en el css solo para IE 7 tengo puesto este codigo (solo pongo el de la pagina escuderia):

/* pagina escuderia */

#txtintro{

line-height:25px;
z-index:2;
position:absolute;
margin-left: 90px ;
margin-top: 50px;
width: 430px;
height: 200px;
text-align:left;
}

#dreta{

z-index:3;
position:absolute;
margin-left: 520px ;
margin-top: 250px;
width: 62px;
height: 61px;
text-align:left;
}

a parte tengo el css para las versiones 6 e inferiores de IE.
Ago algo mal? es que ya no se que hacer, y pienso que a lo mejor algunos codigos se sobreponen y no lo detecta...

Mikmoro · #9 (**permalink**) 16/09/2008, 09:51

Antes de mirar otra cosa, no, efectivamente no te está leyendo la css para IE7 porque ahí donde le dices que debería estar, no está:

http://www.mesblanc.com/bcr/styl/stylie7.css

Así que tienes un problema de referencia en la css de IE7.

pepj · #10 (**permalink**) 16/09/2008, 11:05

Es verdad! ahora ya lo he solucionado, pero me sigue no detectandolo en algunos IE 7 :S que puede ser???? estoy desesperado....

Mikmoro · #11 (**permalink**) 16/09/2008, 11:31

¿Por ejemplo? Dime un ejemplo de algo que no te detecta. ¿No será que no hace lo que tú esperas que haga?

Por ejemplo un error muy habitual: si pones una caja en posición absoluta y no indicas su posición con desplazamientos (top, left, right o bottom), Explorer experimenta un error, porque les asigna unos desplazamientos por defecto.

Esto ocurre por ejemplo en tu caja de texto, donde no tienes ningún deplazamiento. Añade top: 0; left:0; a ver qué pasa.

Mikmoro · #12 (**permalink**) 16/09/2008, 11:48

Es al selector #txtintro2 al que debes ponerle el top:0; left:0;

pepj · #13 (**permalink**) 16/09/2008, 11:48

esto de las cajas lo he hecho ahora y nada no les cambia nada.

por ejemplo ahora e puesto que en el explorer 7 el background color se vea de otro color casi negro, y nada, no cambia nada.

y lo de las cajas de texto siguen apareciendo a la derecha, y en el mismo sitio, cambiando el margin left o margin top, se quedan igual.

Es como si el codigo no lo lea o lea otro...

porque el comentario condicional lo he puesto bien no? para explorer 7 o superiores.

Mikmoro · #14 (**permalink**) 16/09/2008, 11:50

Mira mi mensje anterior a este último tuyo.

Mikmoro · #15 (**permalink**) 16/09/2008, 11:59

Y ahora añade position: relative; al selector #fonsescu

Ambos cambios que te he dicho, en la hoja general, no en la de IE7.

pepj · #16 (**permalink**) 16/09/2008, 12:02

ok lo he hecho, ahora si que se mueven de lugar!! pero tendre que volver a poner el marguin left y top bien para IE 7.

Lo probare y te digo algo.

Mikmoro · #17 (**permalink**) 16/09/2008, 12:09

Por cierto, si usabas esto "html>body p" para que no lo entendiera IE, te diré que IE6 no lo entiende, pero IE7 sí.

pepj · #18 (**permalink**) 17/09/2008, 07:36

Gracias Mikel por ayudarme a solucionarlo!! ya me funciona!!!

pero aún no entiendo porque poner position: relative y lo del top : 0 y left: 0... pero bueno, ahora ya funciona.

Muchisimas gracias ;)

Mikmoro · #19 (**permalink**) 17/09/2008, 09:57

Cuando una caja tiene posición absoluta, se ajusta con desplazamientos con arreglo a cuatro coordenadas: top, left, right y bottom. Pero esos deplazamientos, ¿con respecto a qué? a su caja contenedora que tenga posición relativa o absoluta, y si ninguna que la contenga la tiene, con arreglo al html, es decir, a toda la pantalla.

En tu caso, ponemos posición relativa a la caja contenedora y así la que está dentro que tiene posición absoluta se ajustará dentro de ella, con arreglo a ella.

Por último, como te dije, explorer asigna unas coordenadas por defecto a top y left si éstas no se indican, por lo que no ponerlas no da resultado cero, sino algo parecido a un 50% o así. Eso se elimina sencillamente poniendo top: 0; y left:0;, o la cantidad de desplazamiento que te interese.

m_g · #20 (**permalink**) 19/05/2010, 06:53

Cita:

Iniciado por Mikmoro

¿Por ejemplo? Dime un ejemplo de algo que no te detecta. ¿No será que no hace lo que tú esperas que haga?

Por ejemplo un error muy habitual: si pones una caja en posición absoluta y no indicas su posición con desplazamientos (top, left, right o bottom), Explorer experimenta un error, porque les asigna unos desplazamientos por defecto.

Esto ocurre por ejemplo en tu caja de texto, donde no tienes ningún deplazamiento. Añade top: 0; left:0; a ver qué pasa.

Retomo este tema ya que despues de leer bastante no encuentro solucion al mi problema: cuando escribo esto:

IE 6 no lo lee, ya modifiqie la posicion como indica Mikmoro y de todas formas no lo lee.

Si escribo:

Lo leen perfecto tanto IE 6 como IE 7, pero el temas es que tengo que tener un comentario condicional para cada uno dadas las diferencias.

Si escribo:

IE 7 si lo lee.

Lo que tengo que hacer que funciones es esto:
<link href="css/pilates.css" rel="stylesheet" type="text/css" />




Si alguien sabe que puede pasar, espero respuesta

alexk · #21 (**permalink**) 19/05/2010, 09:53

m_g
creo que no viste el enorme recuadro rojo que dice que el tema tiene mas de 6 meses (casi 2 años de hecho), si tienes alguna duda crea un tema nuevo chao!...

m_g · #22 (**permalink**) 19/05/2010, 14:58

Cita:

Iniciado por alexk

m_g
creo que no viste el enorme recuadro rojo que dice que el tema tiene mas de 6 meses (casi 2 años de hecho), si tienes alguna duda crea un tema nuevo chao!...

Gracias!!! justo lo que no queria era crear un tema en vano, pero me pase...