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