Banner en css y html no funciona en IE

jhonnymontoya · #1 (**permalink**) 24/08/2015, 20:09

Saludos a todos, Quien es el Pro que me puede ayudar con este inconveniente, tengo un banner y en Chrome y en Mozilla funciona bien pero en IE no, quien me puede ayudar con este tema muchas gracias de antemano.
Subí el error a esta página: podertecnologico.co

html:

Código HTML:

<!doctype html>
<html lang="es" xml:lang="es" xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<link rel="stylesheet" type="text/css" href="css/demo.css" />
		<link rel="stylesheet" href="css/style.css" type="text/css" media="screen">
		<link rel="shortcut icon" href="http://podertecnologico.co/favicon.ico">  
		<meta http-equiv="Content-type" content="text/html;charset=iso-8859-15" />
		<meta name="robots" content="All" />
		<meta name="Revisit-after" content="1 Day" />
		<meta name="author" content="OK Colombia">
		<meta name="viewport" content="width=device-width, user-scalable=yes, minimum-scale=0.4, maximum-scale=1.0">
		<meta name="msvalidate.01" content="0A643BE88A41754F1B1220BA51E2556A" />
		<meta name="geo.region" content="CO-ANT" />
		<meta name="geo.placename" content="Medell&2015 OK Colombia" />
		<meta name="geo.position" content="6.231869;-75.590381" />
		<meta name="ICBM" content="6.231869, -75.590381" />
		<link href="https://plus.google.com/115277859324629335863" rel="publisher" />
		<meta name="Description" content="Regalos, Desayunos y almuerzos en Medellin">
		<meta name="keywords" content="Desayuno, almuerzos, tamal, regalos, Medellin" />
		<title>OK Colombia</title> 
		<script type="text/javascript" src="js/modernizr.custom.53451.js"></script>		
	
				
<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-45218910-1', 'podertecnologico.co');
  ga('send', 'pageview');

</script>  	
<script>
(function() {

setInterval(function(){
  var el = document.getElementById('blink');
  if(el.className == 'luz'){
      el.className = 'luz on';
  }else{
      el.className = 'luz';
  }
},500);

})();
</script>


</head>
	<body>

<div class="centroweb">
	<header id="cabeza"> 
		 
		<div class="logo">
			<img src="images/logocorazon.png" USEMAP="#logo1" alt="Logo okcolombia" border=0 width="115" height="90" >
		</div>
		<div class="titulogif"> <!-- Centrar quitar br-->
				<br> <img src="images/conamor2.gif" alt="Titulo Poder Tecnológico" width="398" height="35" BORDER=0 /> 
		</div>		
		<div class="siguenos grises"> <!-- Modificar redes crear OKcolombia 14-->
			<a href="http://podertecnologico.co/mapaweb.html"> <img src="images/mapaweb.png" alt="Mapa Web" width="40" height="40" BORDER=0 title="Mapa Web"> </a>
			<a href="https://www.facebook.com/profile.php?id=100009677883047" target="_blank"> <img src="http://podertecnologico.co/images/siguenosf.png" alt="Facebook" width="38" height="38" BORDER=0 title="Siguenos en Facebook" > </a>
			<a href="https://plus.google.com/115277859324629335863/posts" rel="publisher" target="_blank"> <img src="http://podertecnologico.co/images/siguenosg.png" alt="Siguenos en Google mas" width="38" height="38"  BORDER=0 title="Siguenos en Google +" ></a>
			<a href="http://www.youtube.com/channel/UC70JHe8G-1iWMX2F0ezw9Wg" target="_blank"> <img src="http://podertecnologico.co/images/siguenosy.png" alt="Siguenos en Youtube" width="38" height="38" BORDER=0 title="Siguenos en Youtube" ></a>
			<a href="http://www.linkedin.com/company/technological-power" target="_blank"> <img src="http://podertecnologico.co/images/siguenosi.png" alt="Siguenos en linkedin" width="40" height="40" BORDER=0 title="Siguenos en linkedin" ></a>
		</div>

	</header>
	<nav>
		<ul id="nav">
			<li class="current"><a href="http://podertecnologico.co/index.html">Inicio</a></li>
			<li><a href="http://podertecnologico.co/servicios/clases.html"><span class="luz" id="blink"><b>Servicios</b></span></a>
				<ul>
				
					
					<li><a href="http://podertecnologico.co/servicios/clases.html">Desayunos  »</a>
						<ul>
							<li><a href="http://podertecnologico.co/servicios/clases/ofimatica.html">En Caliente </a></li>
							<li><a href="http://podertecnologico.co/servicios/clases/internet.html">En Frío </a></li>
							<li><a href="http://podertecnologico.co/servicios/clases/internet.html">Infantiles</a></li>
							<li><a href="http://podertecnologico.co/servicios/paginasweb.html">Afecto</a></li>
							<li><a href="http://podertecnologico.co/servicios/paginasweb.html">Ternura</a></li>
							<li><a href="http://podertecnologico.co/servicios/paginasweb.html">Amistad</a></li>
							<li><a href="http://podertecnologico.co/servicios/PruebasSofware.html">Detalles</a></li>
						</ul>
					</li>
					<li><a href="http://podertecnologico.co/servicios/paginasweb.html">Presente</a></li>
					<li><a href="http://podertecnologico.co/servicios/PruebasSofware.html">Regalos</a></li>
					<li><a href="http://podertecnologico.co/servicios/PruebasSofware.html">Almuerzos</a></li>

				</ul>
			</li>
			<li><a href="http://podertecnologico.co/quienessomos.html">Quiénes Somos</a></li>
			<li><a href="http://podertecnologico.co/quienessomos.html">Como comprar</a></li>
			<li><a href="http://podertecnologico.co/menucontacto.html">Contáctenos</a>
				<ul>
					<li><a href="http://podertecnologico.co/contactenos.html">Inquietudes </a></li>
					<li><a href="http://podertecnologico.co/trabaja.html">Contactos</a></li>

				</ul>
			</li>
		</ul>
	</nav>
	<body>
        <br>
			<section id="dg-container" class="dg-container">
				<div class="dg-wrapper">
					<a href="#"><img src="images/1.jpg" alt="image01"><div>Prueba1</div></a>
					<a href="#"><img src="images/2.jpg" alt="image02"><div>Prueba2</div></a>
					<a href="#"><img src="images/3.jpg" alt="image03"><div>Prueba3</div></a>
					<a href="#"><img src="images/4.jpg" alt="image04"><div>Prueba4</div></a>
					<a href="#"><img src="images/5.jpg" alt="image05"><div>Prueba5</div></a>
					<a href="#"><img src="images/6.jpg" alt="image06"><div>Prueba6</div></a>
					<a href="#"><img src="images/7.jpg" alt="image07"><div>Prueba7</div></a>
					<a href="#"><img src="images/8.jpg" alt="image08"><div>Prueba8</div></a>
				</div>
				<nav>	
					<span class="dg-prev">&lt;</span>
					<span class="dg-next">&gt;</span>
				</nav>
			</section>

			<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
			<script type="text/javascript" src="js/jquery.gallery.js"></script>
			<script type="text/javascript">
			$(function() {
				$('#dg-container').gallery({
					autoplay	:	true
				});
			});
			</script/>
    </body>
</html>

Código CSS:

Ver original[B]
CSS:[/B]
 
.dg-container{
    width: 100%;
    height: 450px;
    position: relative;
}
.dg-wrapper{
    width: 481px;
    height: 316px;
    margin: 0 auto;
    position: relative;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-perspective: 1000px;
    -moz-perspective: 1000px;
    -o-perspective: 1000px;
    -ms-perspective: 1000px;
    perspective: 1000px;
}
.dg-wrapper a{
    width: 482px;
    height: 316px;
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    background: transparent url(../images/browser.png) no-repeat top left;
    box-shadow: 0px 10px 20px rgba(0,0,0,0.3);
}
.dg-wrapper a.dg-transition{
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}
.dg-wrapper a img{
    display: block;
    padding: 41px 0px 0px 1px;
}
.dg-wrapper a div{
    font-style: italic;
    text-align: center;
    line-height: 50px;
    text-shadow: 1px 1px 1px rgba(255,255,255,0.5);
    color: #333;
    font-size: 16px;
    width: 100%;
    bottom: -55px;
    display: none;
    position: absolute;
}
.dg-wrapper a.dg-center div{
    display: block;
}
.dg-container nav{
    width: 58px;
    position: absolute;
    z-index: 1000;
    bottom: 40px;
    left: 50%;
    margin-left: -29px;
}
.dg-container nav span{
    text-indent: -9000px;
    float: left;
    cursor:pointer;
    width: 24px;
    height: 25px;
    opacity: 0.8;
    background: transparent url(../images/arrows.png) no-repeat top left;
}
.dg-container nav span:hover{
    opacity: 1;
}
.dg-container nav span.dg-next{
    background-position: top right;
    margin-left: 10px;
}

renso121992 · #2 (**permalink**) 25/08/2015, 15:08

Hola,
Debes especificar en que version de internet explorer no funciona, ya que estube probando en el internet explorer 11 y si funciona bien, ademas de eso debes poner que error sale en internet explorer y poderlo como parte de la explicación para asi tener mas datos y poder ayudate.
Saludos Cordiales.

jhonnymontoya · #3 (**permalink**) 26/08/2015, 13:09

El error se ve en la version 11 de IE la diferencia de uno con el otro es la siguiente

http://podertecnologico.co/images/Errro.png

Agradezco su colaboración

AngelKrak · #4 (**permalink**) 26/08/2015, 19:45

si el error que tienes es que el de en medio queda por debajo de los otros 2, solo dale un z-index ;)

Código CSS:

Ver original.dg-center {
z-index: 9999999;
}

jhonnymontoya · #5 (**permalink**) 27/08/2015, 09:01

AngelKrak gracias pero no me funciono

Este es el Banner original que encontre en internet y tampoco funciona en IE

https://drive.google.com/file/d/0BzXuB5URmbrYNmhDdTcxSjNkZDA/view?usp=sharing

[URL="https://drive.google.com/file/d/0BzXuB5URmbrYNmhDdTcxSjNkZDA/view?usp=sharing"]https://drive.google.com/file/d/0BzXuB5URmbrYNmhDdTcxSjNkZDA/view?usp=sharing[/URL]

si alguien me puede ayudar

teniendo el codigo lo pueden probar y explicar que esta malo.

AngelKrak · #6 (**permalink**) 27/08/2015, 11:24

a mi me sirve con esto amigo, prueba a hacerlo y cuentame ;)

Busca .dg-wrapper a y agrega z-index: -10; al final ;)

Abajo de ese agrega esta clase ;)

Código CSS:

Ver original.dg-wrapper a.dg-center {
    z-index: 10;
}

jhonnymontoya · #7 (**permalink**) 31/08/2015, 08:09

AngelKrak muchas pero muchas gracias si me funciono

AngelKrak · #8 (**permalink**) 31/08/2015, 13:05

de nada jejeje, aqui ando para ayudarte ;)