Página HTML5 CSS3 problemas con IE

lradriz · #1 (**permalink**) 13/06/2014, 09:38

Hola se que no es una novedad, pero tengo problemas con mi web en Internet Explorer.

La diseñe en html5 y css. En Chrome se ve genial, en firefox la linea azul esta mal ubicada <hr> y el IE se ve todo ensimado.

Me pueden ayudar dejo el link a la pagina: http://www.alvarezweb.com.ar/SliderN.../contacto.html

Y los codigos:

Código HTML:

Ver original<!DOCTYPE html PUBLIC>
<head>
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Contacto - Sitio Oficial Localidad de Álvarez</title>
<style type="text/css">
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{
    display: block;
}
 
body{
background: url(http://www.alvarezweb.com.ar/Fotosaereas/alvarez_003_fondo.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.contenedor
            {
    width: 100%;
    max-width: 1200px;
    height: 100%;
    position: relative;
    margin:0 auto;
    vertical-align: middle;
    left: auto;
    top: auto;
    right: auto;
    bottom: auto;
    clip: rect(auto,auto,auto,auto);
                }
.cabecera
    {
    width: 100%;
    height: 30%;
    background-color:#FFF;
    position: relative;
    margin: auto;
    vertical-align: middle;
    clip: rect(auto,auto,auto,auto);
                }
#logo
    {
    position: relative;
    margin-left:3%;
    margin-top: 3%;
    float:left;
    z-index:3;
            }
#frente
    {
    position: relative;
    margin-right:3%;
    float:right;
    z-index:3;
    }
    
#menu
{
    width: 100%;
    height:12%;
    background-color:#FFF;
    z-index:0;
    position:absolute;
    overflow:hidden;
    margin-left:auto;
    margin-right:auto;
 
    }
 
    
ul#menu-horizontal li {
margin-top:3%;
margin-right:4%;
float: right;
display: inline;
position: relative;
z-index:3;
overflow:hidden;
 
}
 
 
#menu-horizontal {
width:100%;
margin:auto;
position:absolute;
 
 
}
 
#menu-horizontal li {
margin:auto;
width:12%;
text-align:center;
list-style:none;
font:0.95em Arial;
 
}
 
/* y otro poquito por aquí.. */
 
#menu-horizontal li:hover {
border-bottom:#09C solid 10px;
 
 
}
 
#menu-horizontal li a {
color:#09C;
text-decoration:none;
 
}
 
#formulario
{
    width: 90%;
    height: auto;
    background-color:#fff;
    background-color: rgba(255,255,255,0.8);
    position: relative;
    font:Arial, Helvetica, sans-serif;
    size: 1.3em;
    margin: auto;
    margin-top:5%;
    clear: both;
    padding: 2%;
    padding-top:10%;
    text-align: left;
    z-index:1;
}
footer
{
    width:100%;
    height: auto;
    background:#09C;
    position: relative;
    font:Arial, Helvetica, sans-serif;
    color:#FFF;
    size: 0.9em;
    margin: auto;
    padding: 2%;
    text-align: center;
}
 
.contactotitulo {
    color: #999;
    text-align:left;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 2em;
 
}
.footer {
    font-family: Arial, Helvetica, sans-serif;
}
</style>
<!--[if !IE 6]>
  <link rel="stylesheet" type="text/css" media="screen, projection" href="css-comun.css" />
<!--<![endif]-->
 
<!--[if gte IE 7]>
  <link rel="stylesheet" type="text/css" media="screen, projection" href="css-ie.css" />
<![endif]-->
 
<!--[if lte IE 6]>
  <link rel="stylesheet" type="text/css" media="screen, projection" href="http://universal-ie6-css.googlecode.com/files/ie6.0.3.css" />
<![endif]-->
</head>
 
<body>
<div class="contenedor">
<div class="cabecera">
<div id="logo"><img src="../logopagina.png" width="100" height="101" alt="Comuna de Alvarez"></div>
<div id="frente"><img src="bannerpagina2.png" width="1024" height="200" alt="frente comuna"></div>
<hr color="#0099CC" size="50%" width="100%" align="center" />
</div>
<div id="menu"></div>
<ul id="menu-horizontal">
<li><a href="#" title="Texto">CONTACTO</a></li>
<li><a href="#" title="Texto">INSTITUCIONALES</a></li>
<li><a href="#" title="Texto">INFO. GENERAL</a>
<li><a href="#" title="Texto">HISTORIA</a></li>
<li><a href="#" title="Texto">BIENVENIDO</a></li>
</ul>
 
<div id="formulario">
<span class="contactotitulo">Contacto</span>
<form id="form1" name="form1" method="post" action="enviar.php">
<p>Nombre y Apellido<br>
  <input name="nombre" type="text" id="nombre" size="50" maxlength="50"  required="" />
  <br />
  
  Telefono<br>
  <input name="telefono" type="text" id="telefono" size="50" maxlength="50"  required="" />
  <br />
  E-mail<br>
  <input name="email" type="text" id="email" size="50" maxlength="100"  required=""/>
  <br />
</p>
<p>Seleccion el area correspondiente</p>
<p>
<select name="Departamento" required="">
<option value="[email protected]" id="Departamento_0" /> 
HOTMAIL
<option value="[email protected]" id="Departamento_1" /> GMAIL</p>
</select>
<p> <br />
Mensaje<br>
<textarea name="mensaje" id="mensaje" cols="49" rows="5"  required=""></textarea>
<br />
<br />
<input type="submit" name="enviar" id="enviar" value="Enviar" /> 
</label>
</form>
  </div>
  <span class="footer">
  <footer>
  Moreno 800 <strong> | </strong>Álvarez<strong> |</strong> Santa Fe <strong>|</strong> Argentina<br>
  Tel: 03402 461801
 
</body>
</html>

Alexis88 · #2 (**permalink**) 13/06/2014, 16:13

Para casos de incompatibilidad del diseño con el navegador, te recomiendo utilizar la librería Modernizr.

Saludos

mkiramu · #3 (**permalink**) 15/06/2014, 03:47

Por qué colocas la palabra public en la declaración de tipo de documento?

Código HTML:

Ver original<!DOCTYPE html PUBLIC>....

¿No será eso lo que te causa problemas?

martinmiranda90 · #4 (**permalink**) 09/01/2015, 04:41

Hola!.Una pregunta, porque razón metes la etiqueta footer dentro de una etiqueta span?. Ya que estas haciendo la página en html5 te recomendaría utilizar el contenedor <nav> para el menú ya que google te lo agradecería en el alma.
Un saludo!

Sarlit · #5 (**permalink**) 09/01/2015, 07:18

¿¿¿Estas intentando meterle compatibilidad con IE6???

No te calientes tanto la cabeza y borra esas líneas, todo lo anterior a IE8 no lo va a usar ningún posible usuario de tu web (si recibes visitas lo normal es que sean de algún bot o de algún informático megafriki del que deberías alejarte...)

Lo que si que te veo es problemas centrando los objetos y dándoles un ancho fijo, para eso lo mejor es usar la propiedad flex de CSS, aunque no funciona en versiones anteriores a IE10, no se si con modernizr como te recomiendan antes podrás solucionarlo...

Un saludo

figoberto · #6 (**permalink**) 11/04/2015, 12:00

Por eso nadie quiere a IE pero lastima que la mayoria lo usa, de cualquier manera gracias por la ayuda

pzin · #7 (**permalink**) 11/04/2015, 12:56

Cita:

Iniciado por figoberto

Por eso nadie quiere a IE pero lastima que la mayoria lo usa, de cualquier manera gracias por la ayuda

Una afirmación muy errada.

NueveReinas · #8 (**permalink**) 11/04/2015, 21:37

Cita:

Iniciado por pzin

Una afirmación muy errada.

El otro día leí, haciendo scroll por Facebook, que IE sigue siendo muy utilizado.
Esperando que no sea así, ¿podrías citar tu(s) fuente(s)?
Gracias.

pzin · #9 (**permalink**) 12/04/2015, 01:49

Cita:

Iniciado por NueveReinas

El otro día leí, haciendo scroll por Facebook, que IE sigue siendo muy utilizado.
Esperando que no sea así, ¿podrías citar tu(s) fuente(s)?
Gracias.

Estadísticas de cualquier sitio web. Chrome es el más usado con diferencia e IE lleva en caída continua desde hace años. Porque de lo que se habla es de la mayoría.

De todas formas Facebook es una maquinaria de datos falsos y estupidez en general.

NueveReinas · #10 (**permalink**) 12/04/2015, 05:39

Cita:

Iniciado por pzin

De todas formas Facebook es una maquinaria de datos falsos y estupidez en general.

PHPeros · #11 (**permalink**) 12/04/2015, 07:27

A pesar de eso, IE es por estadística más usado que Firefox, Opera etc.

Mientras tanto, esperaremos con ilusión al nuevo proyecto de microsoft (Spartan), que se lanzará con Windows 10 este año