Foros del Web » Creando para Internet » CSS »

Problema con IE y las CSS

 Estas en el tema de Problema con IE y las CSS en el foro de CSS en Foros del Web. Hola buenas chicos!!! Estoy teniendo problemas con el internet explores pero con los demás navegadores todo funciona correctamente. es que algunas css no me funciona ...
  #1 (permalink)  
Antiguo 09/08/2011, 18:01
 
Fecha de Ingreso: noviembre-2010
Ubicación: aun no se donde vivir
Mensajes: 112
Antigüedad: 13 años, 5 meses
Puntos: 3
Problema con IE y las CSS
Hola buenas chicos!!!

Estoy teniendo problemas con el internet explores pero con los demás navegadores todo funciona correctamente.

es que algunas css no me funciona específicamente el problema esta con unos margen flotante de algunas div y no se como puedo solucionar eso porque por ejemplo cuando intento hacer modificaciones para solucionar el problema la pagina se me pone loca y se me desarma completamente el orden de los objetos en el diseño.

Código HTML: 
Ver original
  1. body{
  2.     background:
  3.     radial-gradient(black 15%, transparent 16%) 0 0,radial-gradient(black 15%, transparent 16%) 8px 8px, radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 0 1px;
  4.     radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 8px 9px;
  5.     background-color:#282828;
  6.     margin-top:40px;
  7.     }
  8.     
  9.  #contenedor { 
  10.                 background-image:url(imagenes/fondo.jpg);
  11.                 background-repeat:no-repeat;
  12.                 display:block; 
  13.                 width: 960px;
  14.                 height: 640px;
  15.                 text-align: left;
  16.                 margin: 0 auto;
  17.                 border: 2px solid #666;
  18.                -moz-border-radius: 8px;
  19.                -webkit-border-radius: 8px;
  20.             
  21.             }
  22.         
  23.             #menu1 {
  24.                 font-family:Verdana, Geneva, sans-serif;
  25.                 font-size:14px;
  26.                 color: #333;
  27.                 width: 160px;
  28.                 height: 240px;
  29.                 background: #FFF;
  30.                 float: left;
  31.                 margin:25px;
  32.                 margin-top: 150px;
  33.             }
  34.             
  35.             #contenido, #slider  {
  36.                 width: 540px; /*640px*/
  37.                 height: 350px;
  38.                 float:right;
  39.                 background: #333;
  40.                 padding:2px 20px 20px 2px; 
  41.                 margin: 50px;
  42.                 margin-top:90px;
  43.                 border: 0px solid #666;
  44.                -moz-border-radius: 10px;
  45.                -webkit-border-radius: 10px;
  46.             }
  47.             #pie {
  48.                 font-family:Verdana, Geneva, sans-serif;
  49.                 font-size:10px;
  50.                 text-align: right;
  51.                 width:960px;
  52.                 height:25px;
  53.                 margin-top:620px;
  54.                 margin-left:0px;
  55.                 margin-right:90px;
  56.             }
  57.             #fecha,#idioma,#menu2{
  58.                 font-family:Verdana, Geneva, sans-serif;
  59.                 font-size:12px;
  60.                 color:#333;
  61.                 width:160px;
  62.                 height:25px;
  63.                 float:right;
  64.                 margin-top:1px;
  65.                 margin-right:20px;
  66.                 }
  67.             #social{
  68.                 width:110px;
  69.                 height:25px;
  70.                 margin-top:100px;
  71.                 float:right;
  72.                 margin-left:0px;
  73.                 margin-right:10px;
  74.                 padding:4px;
  75.                 }   
  76. h4 {
  77.     color: #666;
  78. }
  79. </style>
  80. <script src="scripts/jquery-1.6.min.js" type="text/javascript"></script>
  81. <script src="scripts/jquery.cycle.all.js" type="text/javascript"></script>
  82. <style type="text/css">
  83. /* BeginOAWidget_Instance_2559022: #slideshow */
  84.  
  85.             #slideshow {  
  86.                 padding: 5px;
  87.                 margin:0;  
  88.             } 
  89.             #slideshow-caption{
  90.                 padding:0;
  91.                 margin:0;
  92.             }
  93.  
  94.             #slideshow img, #slideshow div {  
  95.                 padding: 5px;
  96.                 background-color: transparent;
  97.                 -webkit-border-radius: 10px;
  98.                 -moz-border-radius: 10px;
  99.                 border-radius: 10px; 
  100.                 margin: 0; 
  101.             }
  102.         
  103. /* EndOAWidget_Instance_2559022 */
  104. a:link {
  105.     text-decoration: none;
  106.     color: #333;
  107. }
  108. a:visited {
  109.     text-decoration: none;
  110.     color: #666;
  111. }
  112. a:hover {
  113.     text-decoration: none;
  114.     color: #999;
  115. }
  116. a:active {
  117.     text-decoration: none;
  118.     color: #333;
  119. }
  120. </style>
  #2 (permalink)  
Antiguo 09/08/2011, 18:02
 
Fecha de Ingreso: noviembre-2010
Ubicación: aun no se donde vivir
Mensajes: 112
Antigüedad: 13 años, 5 meses
Puntos: 3
Respuesta: Problema con IE y las CSS
estos son los problemas que me sale y cuando intento hacer algo se me va todo el diseño de la web y el problema solo lo tengo con el internet explorer

linea 58
y el error que me sale error de margen flotante doble.
Problema de ampliación de cuadros.

Linea 40
problema de ampliación de cuadro.

Linea 52
problema de ampliación de cuadro.

Linea 64
problema de caida de un elemento flotante
  #3 (permalink)  
Antiguo 10/08/2011, 00:24
Avatar de Batan  
Fecha de Ingreso: septiembre-2010
Ubicación: Madrid
Mensajes: 408
Antigüedad: 13 años, 7 meses
Puntos: 63
Respuesta: Problema con IE y las CSS
Hola, muy buenas.

Pon el HTML de tu página.
  #4 (permalink)  
Antiguo 10/08/2011, 02:44
 
Fecha de Ingreso: noviembre-2010
Ubicación: aun no se donde vivir
Mensajes: 112
Antigüedad: 13 años, 5 meses
Puntos: 3
Respuesta: Problema con IE y las CSS
aqui esta el html de mi web

Código HTML: 
Ver original
  1. <body>
  2. <div id="contenedor">
  3. <div id="menu2">
  4. <a href="javascript:doGTranslate('es|es')" title="español">
  5. <img src="botones/boton2.jpg" width="50" height="25" alt="español" />
  6. </a>
  7.  <a href="javascript:doGTranslate('es|en')" title="english">
  8. <img src="botones/boton1.jpg" width="50" height="25" alt="ingles" />
  9. </a>
  10. </div>
  11. <div id="menu3"><a href="contacto.html">Contacto</a> <a href="mapa_web.html">| Mapa web</a></div>
  12.   <div id="fecha"><div id="fecha"><script language="JavaScript" type="text/javascript">  
  13. <!--  
  14.   mydate = new Date();  
  15.   myday = mydate.getDay();  
  16.   mymonth = mydate.getMonth();  
  17.   myweekday= mydate.getDate();  
  18.   weekday= myweekday;  
  19.   if(myday == 0)  
  20.   day = " Domingo, "  
  21.   else if(myday == 1)  
  22.   day = " Lunes, "  
  23.   else if(myday == 2)  
  24.   day = " Martes, "  
  25.   else if(myday == 3)  
  26.   day = " Miércoles, "  
  27.   else if(myday == 4)  
  28.   day = " Jueves, "  
  29.   else if(myday == 5)  
  30.   day = " Viernes, "  
  31.   else if(myday == 6)  
  32.   day = " Sábado, "  
  33.   if(mymonth == 0)  
  34.   month = "Enero "  
  35.   else if(mymonth ==1)  
  36.   month = "Febrero "  
  37.   else if(mymonth ==2)  
  38.   month = "Marzo "  
  39.   else if(mymonth ==3)  
  40.   month = "Abril "  
  41.   else if(mymonth ==4)  
  42.   month = "Mayo "  
  43.   else if(mymonth ==5)  
  44.   month = "Junio "  
  45.   else if(mymonth ==6)  
  46.   month = "Julio "  
  47.   else if(mymonth ==7)  
  48.   month = "Agosto "  
  49.   else if(mymonth ==8)  
  50.   month = "Setiembre "  
  51.   else if(mymonth ==9)  
  52.   month = "Octubre "  
  53.   else if(mymonth ==10)  
  54.   month = "Noviembre "  
  55.   else if(mymonth ==11)  
  56.   month = "Diciembre "  
  57. document.write("<font face=verdana, size=2>"+ day);  
  58. document.write(myweekday+" de "+month+ "</font>");  
  59. // -</script></div>
  60.   </div>  
  61.   <div id="menu1">
  62.     <hr />
  63.   <p><a href="index.html">Inicio</a></p>
  64. <p><a href="sobre_nosotros.html">Sobre nosotros</a></p>
  65.      <p><a href="portafolio.html">Portafolio</a></p>
  66.     <p><a rel="clearbox[gallery=Gallery,,width=960,,height=760]" href="http://novtiz.es/inicio.html">Servicio tecnico </a></p>
  67.     <p><a href="contacto.html">Contacto    </a></p>
  68.     <hr />
  69.     <p><a href="http://www.facebook.com/" target="_blank"><img src="imagenes/facebook.png" alt="facebook" width="22" height="22" border="0" /></a> <a href="http://twitter.com/" target="_blank"><img src="imagenes/twitter.png" alt="twiter" width="22" height="22" border="0" /></a> <img src="imagenes/skype.png" width="22" height="22" alt="skype" /> <a href="https://mail.google.com/mail" target="_blank"><img src="imagenes/gmail.png" alt="gmail" width="22" height="22" border="0" /></a></p>
  70.     <p>&nbsp;</p>
  71.     <p><img src="imagenes/promocion.jpg" width="190" height="113" alt="promocion" /></p>
  72.     <p>&nbsp;</p>
  73.     <p>&nbsp;</p>
  74.   </div>
  75.   <div id="contenido">
  76.     <script type="text/javascript">
  77. // BeginOAWidget_Instance_2559022: #slideshow
  78.  
  79.             slideshowAddCaption=false;
  80. $(document).ready(function() {
  81.     $('#slideshow').cycle({
  82.         after:          slideshowOnCycleAfter, //the function that is triggered after each transition
  83.         autostop:           false,     // true to end slideshow after X transitions (where X == slide count) 
  84.         fx:             'fade,',// name of transition effect 
  85.         pause:          true,     // true to enable pause on hover 
  86.         randomizeEffects:   true,  // valid when multiple effects are used; true to make the effect sequence random 
  87.         speed:          1000,  // speed of the transition (any valid fx speed value) 
  88.         sync:           false,     // true if in/out transitions should occur simultaneously 
  89.         timeout:        3000,  // milliseconds between slide transitions (0 to disable auto advance) 
  90.         fit:            true,
  91.         height:        '350px',
  92.         width:         '550px'   // container width (if the 'fit' option is true, the slides will be set to this width as well) 
  93.     });
  94. }); 
  95. function slideshowOnCycleAfter() { 
  96.     if (slideshowAddCaption==true){
  97.             $('#slideshow-caption').html(this.title); 
  98.     }
  99. } 
  100.         
  101. // EndOAWidget_Instance_2559022
  102.     </script>
  103.     <div id="slideshow">
  104.       <!--All elements inside this will become slides-->
  105.       <img src="imagenes/marketing.jpg" width="550" height="417"  /> <img src="imagenes/tienda.jpg" width="475" height="491" /> <img src="imagenes/corporativa.jpg" width="480" height="320"  />
  106.     </div>
  107.     <!--It is safe to delete this if captions are disabled-->
  108.     <div id="slideshow-caption"></div>
  109.   </div>
  110. <div id="pie">
  111.   <h4>Oliver  Arthur Web Site&reg;2011 Todos los derechos reservados </h4>
  112. </div>
  113. </div>
  114. <script type="text/javascript">
  115. var _gaq = _gaq || [];
  116.   _gaq.push(['_setAccount', '']);
  117.   _gaq.push(['_trackPageview']);
  118.  
  119.   (function() {
  120.     var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
  121.     ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
  122.     var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  123.   })();
  124.     </script>
  125. </body>
  126. </html>
  #5 (permalink)  
Antiguo 10/08/2011, 03:35
Avatar de Batan  
Fecha de Ingreso: septiembre-2010
Ubicación: Madrid
Mensajes: 408
Antigüedad: 13 años, 7 meses
Puntos: 63
Respuesta: Problema con IE y las CSS
Hola, he visto tu codigo XHTML en IE 7, 8 y 9. Pero el único problema que veo es que el contenedor de tu slider tiene un height fijo y la de la imagen de tu slidershow es mas mayor

Cita:
#contenido, #slider {
width: 540px; /*640px*/
height: 350px;}
Cita:
<div id="slideshow">
<!--All elements inside this will become slides-->
<img src="http://www.google.es/images/srpr/logo3w.png" width="550" height="417" /> <img src="http://www.google.es/images/srpr/logo3w.png" width="475" height="491" /> <img src="http://www.google.es/images/srpr/logo3w.png" width="480" height="320" />
</div>

Nose que quieres hacer con la segunda imagen(esa si queda descentrada).


Y respecto a los errores

Cita:
Iniciado por oliverarthurnardi Ver Mensaje
estos son los problemas que me sale y cuando intento hacer algo se me va todo el diseño de la web y el problema solo lo tengo con el internet explorer

linea 58
y el error que me sale error de margen flotante doble.
Problema de ampliación de cuadros.
...
Date cuenta que nosotros no podemos saber que lineas son por que usamos un editor diferente o por usar un código distinto, deberias especificar cual son esas lineas.

Saludos
  #6 (permalink)  
Antiguo 10/08/2011, 03:54
 
Fecha de Ingreso: noviembre-2010
Ubicación: aun no se donde vivir
Mensajes: 112
Antigüedad: 13 años, 5 meses
Puntos: 3
Respuesta: Problema con IE y las CSS
Hola buenas !!

Mira los errores me salen en la linea 11,linea 12, linea 61,linea 75 y en la linea 110

Un saludos
  #7 (permalink)  
Antiguo 10/08/2011, 04:00
 
Fecha de Ingreso: noviembre-2010
Ubicación: aun no se donde vivir
Mensajes: 112
Antigüedad: 13 años, 5 meses
Puntos: 3
Respuesta: Problema con IE y las CSS
Código HTML: 
Ver original
  1. <body>
  2. <div id="contenedor">
  3. <div id="menu2">
  4. <a href="javascript:doGTranslate('es|es')" title="español">
  5. <img src="botones/boton2.jpg" width="50" height="25" alt="español" />
  6. </a>
  7.  <a href="javascript:doGTranslate('es|en')" title="english">
  8. <img src="botones/boton1.jpg" width="50" height="25" alt="ingles" />
  9. </a>
  10. </div>
  11. [B]<div id="menu3"><a href="contacto.html">Contacto</a> <a href="mapa_web.html">| Mapa web</a></div>
  12.   <div id="fecha"><div id="fecha"><script language="JavaScript" type="text/javascript">[/B]  
  13. <!--  
  14.   mydate = new Date();  
  15.   myday = mydate.getDay();  
  16.   mymonth = mydate.getMonth();  
  17.   myweekday= mydate.getDate();  
  18.   weekday= myweekday;  
  19.   if(myday == 0)  
  20.   day = " Domingo, "  
  21.   else if(myday == 1)  
  22.   day = " Lunes, "  
  23.   else if(myday == 2)  
  24.   day = " Martes, "  
  25.   else if(myday == 3)  
  26.   day = " Miércoles, "  
  27.   else if(myday == 4)  
  28.   day = " Jueves, "  
  29.   else if(myday == 5)  
  30.   day = " Viernes, "  
  31.   else if(myday == 6)  
  32.   day = " Sábado, "  
  33.   if(mymonth == 0)  
  34.   month = "Enero "  
  35.   else if(mymonth ==1)  
  36.   month = "Febrero "  
  37.   else if(mymonth ==2)  
  38.   month = "Marzo "  
  39.   else if(mymonth ==3)  
  40.   month = "Abril "  
  41.   else if(mymonth ==4)  
  42.   month = "Mayo "  
  43.   else if(mymonth ==5)  
  44.   month = "Junio "  
  45.   else if(mymonth ==6)  
  46.   month = "Julio "  
  47.   else if(mymonth ==7)  
  48.   month = "Agosto "  
  49.   else if(mymonth ==8)  
  50.   month = "Setiembre "  
  51.   else if(mymonth ==9)  
  52.   month = "Octubre "  
  53.   else if(mymonth ==10)  
  54.   month = "Noviembre "  
  55.   else if(mymonth ==11)  
  56.   month = "Diciembre "  
  57. document.write("<font face=verdana, size=2>"+ day);  
  58. document.write(myweekday+" de "+month+ "</font>");  
  59. // -</script></div>
  60.   </div>  
  61.   [B]<div id="menu1">[/B]
  62.     <hr />
  63.   <p><a href="index.html">Inicio</a></p>
  64. <p><a href="sobre_nosotros.html">Sobre nosotros</a></p>
  65.      <p><a href="portafolio.html">Portafolio</a></p>
  66.     <p><a rel="clearbox[gallery=Gallery,,width=960,,height=760]" href="http://novtiz.es/inicio.html">Servicio tecnico </a></p>
  67.     <p><a href="contacto.html">Contacto    </a></p>
  68.     <hr />
  69.     <p><a href="http://www.facebook.com/" target="_blank"><img src="imagenes/facebook.png" alt="facebook" width="22" height="22" border="0" /></a> <a href="http://twitter.com/" target="_blank"><img src="imagenes/twitter.png" alt="twiter" width="22" height="22" border="0" /></a> <img src="imagenes/skype.png" width="22" height="22" alt="skype" /> <a href="https://mail.google.com/mail" target="_blank"><img src="imagenes/gmail.png" alt="gmail" width="22" height="22" border="0" /></a></p>
  70.     <p>&nbsp;</p>
  71.     <p><img src="imagenes/promocion.jpg" width="190" height="113" alt="promocion" /></p>
  72.     <p>&nbsp;</p>
  73.     <p>&nbsp;</p>
  74.   </div>
  75.  [B] <div id="contenido">[/B]
  76.     <script type="text/javascript">
  77. // BeginOAWidget_Instance_2559022: #slideshow
  78.  
  79.             slideshowAddCaption=false;
  80. $(document).ready(function() {
  81.     $('#slideshow').cycle({
  82.         after:          slideshowOnCycleAfter, //the function that is triggered after each transition
  83.         autostop:           false,     // true to end slideshow after X transitions (where X == slide count) 
  84.         fx:             'fade,',// name of transition effect 
  85.         pause:          true,     // true to enable pause on hover 
  86.         randomizeEffects:   true,  // valid when multiple effects are used; true to make the effect sequence random 
  87.         speed:          1000,  // speed of the transition (any valid fx speed value) 
  88.         sync:           false,     // true if in/out transitions should occur simultaneously 
  89.         timeout:        3000,  // milliseconds between slide transitions (0 to disable auto advance) 
  90.         fit:            true,
  91.         height:        '350px',
  92.         width:         '550px'   // container width (if the 'fit' option is true, the slides will be set to this width as well) 
  93.     });
  94. }); 
  95. function slideshowOnCycleAfter() { 
  96.     if (slideshowAddCaption==true){
  97.             $('#slideshow-caption').html(this.title); 
  98.     }
  99. } 
  100.         
  101. // EndOAWidget_Instance_2559022
  102.     </script>
  103.     <div id="slideshow">
  104.       <!--All elements inside this will become slides-->
  105.       <img src="imagenes/marketing.jpg" width="550" height="417"  /> <img src="imagenes/tienda.jpg" width="475" height="491" /> <img src="imagenes/corporativa.jpg" width="480" height="320"  />
  106.     </div>
  107.     <!--It is safe to delete this if captions are disabled-->
  108.     <div id="slideshow-caption"></div>
  109.   </div>
  110. [B]<div id="pie">[/B]
  111.   <h4>Oliver  Arthur Web Site&reg;2011 Todos los derechos reservados </h4>
  112. </div>
  113. </div>
  114. <script type="text/javascript">
  115. var _gaq = _gaq || [];
  116.   _gaq.push(['_setAccount', '']);
  117.   _gaq.push(['_trackPageview']);
  118.  
  119.   (function() {
  120.     var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
  121.     ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
  122.     var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  123.   })();
  124.     </script>
  125. </body>
  126. </html>

te lo he marcado en negrita donde me salen los erros
  #8 (permalink)  
Antiguo 10/08/2011, 04:01
 
Fecha de Ingreso: noviembre-2010
Ubicación: aun no se donde vivir
Mensajes: 112
Antigüedad: 13 años, 5 meses
Puntos: 3
Respuesta: Problema con IE y las CSS
la linea 11,linea 12, linea 61,linea 75 y en la linea 110 esos son los errores
  #9 (permalink)  
Antiguo 10/08/2011, 05:47
Avatar de Batan  
Fecha de Ingreso: septiembre-2010
Ubicación: Madrid
Mensajes: 408
Antigüedad: 13 años, 7 meses
Puntos: 63
Respuesta: Problema con IE y las CSS
Bueno en la line 12 tienes dos DIV llamando al mismo identificador ('fecha') y aunque este no sea la soluciona tu problema... creo que son las medidas que tienes de los contenedores y las imagenes.
Pero como ya te dije antes yo lo bien en todos los exploradores a menos que el problema este en las imagenes, que obviamente yo no las tengo.

Saludos
  #10 (permalink)  
Antiguo 10/08/2011, 05:55
 
Fecha de Ingreso: noviembre-2010
Ubicación: aun no se donde vivir
Mensajes: 112
Antigüedad: 13 años, 5 meses
Puntos: 3
Respuesta: Problema con IE y las CSS
Hola buenas Batan!

el problema de la linea 12 ya lo tengo resuelto

pero los demás me siguen dando problemas y bueno también las fotos les modifique el tamaño e igual me sigue dando problema

Aun me sigo con el mismo problema de que no se me carga la web en el IE pero en los demás si
  #11 (permalink)  
Antiguo 10/08/2011, 06:12
Avatar de Batan  
Fecha de Ingreso: septiembre-2010
Ubicación: Madrid
Mensajes: 408
Antigüedad: 13 años, 7 meses
Puntos: 63
Respuesta: Problema con IE y las CSS
En explorer 7 se me ve asi, te hice una captura.


Nose en que esta fallando.
  #12 (permalink)  
Antiguo 10/08/2011, 06:21
 
Fecha de Ingreso: noviembre-2010
Ubicación: aun no se donde vivir
Mensajes: 112
Antigüedad: 13 años, 5 meses
Puntos: 3
Respuesta: Problema con IE y las CSS
mira aqui te paso la url de la pagina web

http://www.oliverarthurnardi.com

es que la abro con otro navegador que no sea el explorer y funciona perfectamente

y la descripción de los errores que me dicen el dreamweaver cuando le doy ver compatibilidad con los navegadores son:

Error de margen flotante doble
Problemas de ampliación de cuadros
Problemas de caída de un elemento flotante

Un saludo

Etiquetas: contenido, fondo
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


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 03:29.