Foros del Web » Creando para Internet » HTML »

Página HTML5 CSS3 problemas con IE

Estas en el tema de Página HTML5 CSS3 problemas con IE en el foro de HTML en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 13/06/2014, 09:38
 
Fecha de Ingreso: enero-2010
Mensajes: 116
Antigüedad: 14 años, 10 meses
Puntos: 0
Página HTML5 CSS3 problemas con IE

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
  1. <!DOCTYPE html PUBLIC>
  2. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  3. <title>Contacto - Sitio Oficial Localidad de Álvarez</title>
  4. <style type="text/css">
  5. article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{
  6.     display: block;
  7. }
  8.  
  9. body{
  10. background: url(http://www.alvarezweb.com.ar/Fotosaereas/alvarez_003_fondo.jpg) no-repeat center center fixed;
  11. -webkit-background-size: cover;
  12. -moz-background-size: cover;
  13. -o-background-size: cover;
  14. background-size: cover;
  15. }
  16. .contenedor
  17.             {
  18.     width: 100%;
  19.     max-width: 1200px;
  20.     height: 100%;
  21.     position: relative;
  22.     margin:0 auto;
  23.     vertical-align: middle;
  24.     left: auto;
  25.     top: auto;
  26.     right: auto;
  27.     bottom: auto;
  28.     clip: rect(auto,auto,auto,auto);
  29.                 }
  30. .cabecera
  31.     {
  32.     width: 100%;
  33.     height: 30%;
  34.     background-color:#FFF;
  35.     position: relative;
  36.     margin: auto;
  37.     vertical-align: middle;
  38.     clip: rect(auto,auto,auto,auto);
  39.                 }
  40. #logo
  41.     {
  42.     position: relative;
  43.     margin-left:3%;
  44.     margin-top: 3%;
  45.     float:left;
  46.     z-index:3;
  47.             }
  48. #frente
  49.     {
  50.     position: relative;
  51.     margin-right:3%;
  52.     float:right;
  53.     z-index:3;
  54.     }
  55.    
  56. #menu
  57. {
  58.     width: 100%;
  59.     height:12%;
  60.     background-color:#FFF;
  61.     z-index:0;
  62.     position:absolute;
  63.     overflow:hidden;
  64.     margin-left:auto;
  65.     margin-right:auto;
  66.  
  67.     }
  68.  
  69.    
  70. ul#menu-horizontal li {
  71. margin-top:3%;
  72. margin-right:4%;
  73. float: right;
  74. display: inline;
  75. position: relative;
  76. z-index:3;
  77. overflow:hidden;
  78.  
  79. }
  80.  
  81.  
  82. #menu-horizontal {
  83. width:100%;
  84. margin:auto;
  85. position:absolute;
  86.  
  87.  
  88. }
  89.  
  90. #menu-horizontal li {
  91. margin:auto;
  92. width:12%;
  93. text-align:center;
  94. list-style:none;
  95. font:0.95em Arial;
  96.  
  97. }
  98.  
  99. /* y otro poquito por aquí.. */
  100.  
  101. #menu-horizontal li:hover {
  102. border-bottom:#09C solid 10px;
  103.  
  104.  
  105. }
  106.  
  107. #menu-horizontal li a {
  108. color:#09C;
  109. text-decoration:none;
  110.  
  111. }
  112.  
  113. #formulario
  114. {
  115.     width: 90%;
  116.     height: auto;
  117.     background-color:#fff;
  118.     background-color: rgba(255,255,255,0.8);
  119.     position: relative;
  120.     font:Arial, Helvetica, sans-serif;
  121.     size: 1.3em;
  122.     margin: auto;
  123.     margin-top:5%;
  124.     clear: both;
  125.     padding: 2%;
  126.     padding-top:10%;
  127.     text-align: left;
  128.     z-index:1;
  129. }
  130. footer
  131. {
  132.     width:100%;
  133.     height: auto;
  134.     background:#09C;
  135.     position: relative;
  136.     font:Arial, Helvetica, sans-serif;
  137.     color:#FFF;
  138.     size: 0.9em;
  139.     margin: auto;
  140.     padding: 2%;
  141.     text-align: center;
  142. }
  143.  
  144. .contactotitulo {
  145.     color: #999;
  146.     text-align:left;
  147.     font-family: Arial, Helvetica, sans-serif;
  148.     font-size: 2em;
  149.  
  150. }
  151. .footer {
  152.     font-family: Arial, Helvetica, sans-serif;
  153. }
  154. <!--[if !IE 6]>
  155.  <link rel="stylesheet" type="text/css" media="screen, projection" href="css-comun.css" />
  156. <!--<![endif]-->
  157.  
  158. <!--[if gte IE 7]>
  159.  <link rel="stylesheet" type="text/css" media="screen, projection" href="css-ie.css" />
  160. <![endif]-->
  161.  
  162. <!--[if lte IE 6]>
  163.  <link rel="stylesheet" type="text/css" media="screen, projection" href="http://universal-ie6-css.googlecode.com/files/ie6.0.3.css" />
  164. <![endif]-->
  165. </head>
  166.  
  167. <div class="contenedor">
  168. <div class="cabecera">
  169. <div id="logo"><img src="../logopagina.png" width="100" height="101" alt="Comuna de Alvarez"></div>
  170. <div id="frente"><img src="bannerpagina2.png" width="1024" height="200" alt="frente comuna"></div>
  171. <hr color="#0099CC" size="50%" width="100%" align="center" />
  172. </div>
  173. <div id="menu"></div>
  174. <ul id="menu-horizontal">
  175. <li><a href="#" title="Texto">CONTACTO</a></li>
  176. <li><a href="#" title="Texto">INSTITUCIONALES</a></li>
  177. <li><a href="#" title="Texto">INFO. GENERAL</a>
  178. <li><a href="#" title="Texto">HISTORIA</a></li>
  179. <li><a href="#" title="Texto">BIENVENIDO</a></li>
  180. </ul>
  181.  
  182. <div id="formulario">
  183. <span class="contactotitulo">Contacto</span>
  184. <form id="form1" name="form1" method="post" action="enviar.php">
  185. <p>Nombre y Apellido<br>
  186.   <input name="nombre" type="text" id="nombre" size="50" maxlength="50"  required="" />
  187.   <br />
  188.  
  189.   Telefono<br>
  190.   <input name="telefono" type="text" id="telefono" size="50" maxlength="50"  required="" />
  191.   <br />
  192.   E-mail<br>
  193.   <input name="email" type="text" id="email" size="50" maxlength="100"  required=""/>
  194.   <br />
  195. </p>
  196. <p>Seleccion el area correspondiente</p>
  197. <p>
  198. <select name="Departamento" required="">
  199. <option value="[email protected]" id="Departamento_0" />
  200. HOTMAIL
  201. <option value="[email protected]" id="Departamento_1" /> GMAIL</p>
  202. <p> <br />
  203. Mensaje<br>
  204. <textarea name="mensaje" id="mensaje" cols="49" rows="5"  required=""></textarea>
  205. <br />
  206. <br />
  207. <input type="submit" name="enviar" id="enviar" value="Enviar" />
  208. </form>
  209.   </div>
  210.   <span class="footer">
  211.   <footer>
  212.   Moreno 800 <strong> | </strong>Álvarez<strong> |</strong> Santa Fe <strong>|</strong> Argentina<br>
  213.   Tel: 03402 461801
  214.  
  215. </body>
  216. </html>
  #2 (permalink)  
Antiguo 13/06/2014, 16:13
Avatar de Alexis88
Philosopher
 
Fecha de Ingreso: noviembre-2011
Ubicación: Tacna, Perú
Mensajes: 5.552
Antigüedad: 13 años
Puntos: 977
Respuesta: Pagina Html5 css3 problemas con IE

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

Saludos
__________________
«Juro por mi vida y mi amor por ella, que jamás viviré para el provecho de otro hombre, ni le pediré a otro hombre que viva para el mío».

Ayn Rand
  #3 (permalink)  
Antiguo 15/06/2014, 03:47
Avatar de mkiramu  
Fecha de Ingreso: octubre-2011
Ubicación: Distrito Federal
Mensajes: 18
Antigüedad: 13 años, 1 mes
Puntos: 4
Respuesta: Página HTML5 CSS3 problemas con IE

Por qué colocas la palabra public en la declaración de tipo de documento?
Código HTML:
Ver original
  1. <!DOCTYPE html PUBLIC>....
¿No será eso lo que te causa problemas?
  #4 (permalink)  
Antiguo 09/01/2015, 04:41
 
Fecha de Ingreso: agosto-2013
Ubicación: A Coruña
Mensajes: 54
Antigüedad: 11 años, 3 meses
Puntos: 14
Respuesta: Página HTML5 CSS3 problemas con IE

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!
  #5 (permalink)  
Antiguo 09/01/2015, 07:18
 
Fecha de Ingreso: diciembre-2014
Mensajes: 111
Antigüedad: 10 años
Puntos: 9
Respuesta: Página HTML5 CSS3 problemas con IE

¿¿¿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
  #6 (permalink)  
Antiguo 11/04/2015, 12:00
Avatar de figoberto  
Fecha de Ingreso: octubre-2010
Mensajes: 20
Antigüedad: 14 años, 2 meses
Puntos: 0
Respuesta: Página HTML5 CSS3 problemas con IE

Por eso nadie quiere a IE pero lastima que la mayoria lo usa, de cualquier manera gracias por la ayuda
  #7 (permalink)  
Antiguo 11/04/2015, 12:56
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.489
Antigüedad: 22 años, 4 meses
Puntos: 2114
Respuesta: Página HTML5 CSS3 problemas con IE

Cita:
Iniciado por figoberto Ver Mensaje
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.
__________________
(:
  #8 (permalink)  
Antiguo 11/04/2015, 21:37
Avatar de NueveReinas  
Fecha de Ingreso: septiembre-2013
Ubicación: No tan Buenos Aires
Mensajes: 1.101
Antigüedad: 11 años, 3 meses
Puntos: 145
Respuesta: Página HTML5 CSS3 problemas con IE

Cita:
Iniciado por pzin Ver Mensaje
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.

__________________
¿Te sirvió la respuesta? Deja un +1
  #9 (permalink)  
Antiguo 12/04/2015, 01:49
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.489
Antigüedad: 22 años, 4 meses
Puntos: 2114
Respuesta: Página HTML5 CSS3 problemas con IE

Cita:
Iniciado por NueveReinas Ver Mensaje
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.
__________________
(:
  #10 (permalink)  
Antiguo 12/04/2015, 05:39
Avatar de NueveReinas  
Fecha de Ingreso: septiembre-2013
Ubicación: No tan Buenos Aires
Mensajes: 1.101
Antigüedad: 11 años, 3 meses
Puntos: 145
Respuesta: Página HTML5 CSS3 problemas con IE

Cita:
Iniciado por pzin Ver Mensaje
De todas formas Facebook es una maquinaria de datos falsos y estupidez en general.
__________________
¿Te sirvió la respuesta? Deja un +1
  #11 (permalink)  
Antiguo 12/04/2015, 07:27
Colaborador
 
Fecha de Ingreso: septiembre-2013
Ubicación: España
Mensajes: 3.648
Antigüedad: 11 años, 3 meses
Puntos: 578
Respuesta: Página HTML5 CSS3 problemas con IE

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

Etiquetas: css3, formulario, html5, input, link, php, todo, url
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

SíEste tema le ha gustado a 1 personas




La zona horaria es GMT -6. Ahora son las 09:24.