Comunidad de diseño web y desarrollo en internet online

Problema en CSS sólo en Internet Explorer 9

Foros de discusión > CSS y HTML

Citar            
MensajeEscrito el 10 Jun 2011 10:16 pm
Estoy teniendo un problema muy raro.

Tengo este sitio web, es glorioso y lindo, del curso de HTML5 en Chile:
http://mlw.io/cursos/html5-chile/

El código no lo hice yo, pero intenté arreglarlo. Logré que funcionara perfecto en Firefox, Chrome, Safari, Opera e Internet Explorer 8.

Pero en IE9, el párrafo central donde describe el curso sale arriiiibaa. He tratado cambiar y reorganizar de todo, pero no encuentro cómo solucionarlo ¿Alguien puede ayudarme?

Por Freddie

BOFH

53 tutoriales
597 articulos
43 ejemplos

Genero:Masculino   Admin

Envíale un mensaje privado     Web

Conserje de Cristalab

chrome
Citar            
MensajeEscrito el 10 Jun 2011 10:22 pm
Yo le daría float: left a la imagen de los dispositivos y le quitaría el margin-top: -200px a .txt_principal

Por jseros

Claber

116 de clabLevel

1 tutorial

Genero:Masculino  

Envíale un mensaje privado     Web

Bogotá, Colombia

chrome
Citar            
MensajeEscrito el 10 Jun 2011 10:23 pm
Otro dato, activé la vista de compatibilidad de IE y el mismo texto sale abaaaajo, qué curioso.

Por darknil

0 de clabLevel



 

Envíale un mensaje privado    

chrome
Citar            
MensajeEscrito el 10 Jun 2011 10:28 pm
Quitar al txt_principal el margin-top:-200px y ponerselo al p pero esto solo cuando no sea ie9

Por eddygonzalez2000

1 de clabLevel



 

Envíale un mensaje privado    

chrome
Citar            
MensajeEscrito el 10 Jun 2011 10:34 pm

Código :

#todo #intro .txt_principal{
   width:555px;
   height:180px;
   margin-top: -200px;
   margin-left:350px;
}

Por Rog3R

157 de clabLevel


1 articulo

 

Envíale un mensaje privado     Web

chrome
Citar            
MensajeEscrito el 10 Jun 2011 10:40 pm
¿Hay alguna solución que NO requiera crear un CSS sólo para IE9? Porque así es fácil arreglarlo, pero estaba buscando algo que no necesitara crear un css exclusivo para ese browser.

Por Freddie

BOFH

53 tutoriales
597 articulos
43 ejemplos

Genero:Masculino   Admin

Envíale un mensaje privado     Web

Conserje de Cristalab

chrome
Citar            
MensajeEscrito el 10 Jun 2011 10:43 pm

Freddie escribió:

Estoy teniendo un problema muy raro.

Tengo este sitio web, es glorioso y lindo, del curso de HTML5 en Chile:
http://mlw.io/cursos/html5-chile/

El código no lo hice yo, pero intenté arreglarlo. Logré que funcionara perfecto en Firefox, Chrome, Safari, Opera e Internet Explorer 8.

Pero en IE9, el párrafo central donde describe el curso sale arriiiibaa. He tratado cambiar y reorganizar de todo, pero no encuentro cómo solucionarlo ¿Alguien puede ayudarme?


ta facilito, no necesitas editar el css, mira has esto en el html, ubica los divs que estoy mencinoando y pon entre ellos, este otro div:

Código HTML :


<div class="muestra_twitts">
   ...
</div>

<div style='clear: both;'></div> <!-- ESTE DIV ARREGLA TU PROBLEMA -->

<div class="txt_principal">
   ...
</div>

Por Mikzael

1 de clabLevel



Genero:Masculino  

Envíale un mensaje privado   Email  

Webmaster

firefox
Citar            
MensajeEscrito el 10 Jun 2011 10:51 pm
Si funciono!!

Por eddygonzalez2000

1 de clabLevel



 

Envíale un mensaje privado    

chrome
Citar            
MensajeEscrito el 10 Jun 2011 10:52 pm
Llego tarde, pero me parece que se soluciona con el div clear como dice Mizkael

Por mijailr

1 de clabLevel



 

Envíale un mensaje privado     Web

Programador

chrome
Citar            
MensajeEscrito el 10 Jun 2011 10:53 pm
O ponerle este mismo css en .txt_principal

clear:both;

Por eddygonzalez2000

1 de clabLevel



 

Envíale un mensaje privado    

chrome
Citar            
MensajeEscrito el 10 Jun 2011 10:58 pm

eddygonzalez2000 escribió:

O ponerle este mismo css en .txt_principal

clear:both;


desde css a mi no me funciono en IE9

Por Mikzael

1 de clabLevel



Genero:Masculino  

Envíale un mensaje privado   Email  

Webmaster

firefox
Citar            
MensajeEscrito el 10 Jun 2011 11:04 pm
Sin necesidad de agregar HTML: Mueve el img.img_principal inmediatamente después de div.txt_principal y margin-top:0 a div.txt_principal.

Por daetherius

0 de clabLevel



 

Envíale un mensaje privado    

chrome
Citar            
MensajeEscrito el 12 Jun 2011 06:06 am
Esto soluciona el problema en todos los navegadores, no es bueno no flotar elementos cuando uno trata de hacer columnas, asumir que todos los navegadores reaccionaran de la misma manera a los elementos al rededor de los floats es ilogico.

Código :

#todo #intro img.img_principal {
  float: left;
}

#todo #intro .txt_principal {
  margin-top: 0;
}


Simplemente agrega un float:left a la imagen, y quitale el margin-top al contenedor del párrafo.

Dale un batazo al coder :bate:

Por NEO_JP

BOFH

5724 de clabLevel

13 tutoriales
12 articulos

Genero:Masculino   Anime Bloggers Premio_Secretos Team Cristalab

Envíale un mensaje privado     Web

Front-end Developer en Washington, DC

chrome
Citar            
MensajeEscrito el 12 Jun 2011 06:08 am
Sí, NEO_JP, es lo mismo que le dije yo.

Saludos ;)

Por jseros

Claber

116 de clabLevel

1 tutorial

Genero:Masculino  

Envíale un mensaje privado     Web

Bogotá, Colombia

chrome
Citar            
MensajeEscrito el 12 Jun 2011 07:24 am

jseros escribió:

Sí, NEO_JP, es lo mismo que le dije yo.

Yup, kudos. Disculpa, no lei las respuestas :)

Por NEO_JP

BOFH

5724 de clabLevel

13 tutoriales
12 articulos

Genero:Masculino   Anime Bloggers Premio_Secretos Team Cristalab

Envíale un mensaje privado     Web

Front-end Developer en Washington, DC

chrome
Foros de discusión > CSS y HTML

   Página 1 de 1

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.