Foros del Web » Creando para Internet » HTML »

HTML5 y CSS3 se ve mal en IE

 Estas en el tema de HTML5 y CSS3 se ve mal en IE en el foro de HTML en Foros del Web. Buenos días para todos Se que esta pregunta la han hecho muchas veces y también he encontrado muchas respuestas, pero a mi no me funciona ...
  #1 (permalink)  
Antiguo 02/05/2013, 08:21
Avatar de ceaped  
Fecha de Ingreso: febrero-2004
Mensajes: 2.185
Antigüedad: 20 años, 2 meses
Puntos: 9
Pregunta HTML5 y CSS3 se ve mal en IE
Buenos días para todos
Se que esta pregunta la han hecho muchas veces y también he encontrado muchas respuestas, pero a mi no me funciona bien ninguna de ellas.

Creo que la mejor manera de explicarlo es poner el HTML5 y los CSS3.

HTML:
Código HTML: 
Ver original
  1. <!--html5-->
  2. <!DOCTYPE html>
  3.  
  4. <html lang="es">
  5.  
  6.     <head>
  7.         <title>TÍTULO</title>
  8.         
  9.         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  10.         
  11.         <link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />
  12.         
  13.     </head>
  14.     
  15.     <body>
  16.     
  17.     <header>
  18.         <h1>TÍTULO</h1>
  19.         
  20.         <section class="menu_superior">
  21.         <ul>  
  22.         <li><a href="#">botón 1</a></li>
  23.         <li><a href="#">botón 2</a></li>
  24.         <li><a href="#">botón 3</a></li>
  25.         <li><a href="#">botón 4</a></li>
  26.         <li><a href="#">botón 5</a></li>  
  27.         </ul> 
  28.     </section>
  29.     </header>
  30.     
  31.     <section class="marco_video">
  32.         <video controls="controls" widht="400" height="300">
  33.         <source src="video/mivideo.webm" type="video/webm">
  34.         </video>
  35.     </section>
  36.         
  37.     <nav>
  38.     <div id="menu">
  39.             <div id="centro">
  40.             <div class="item_btn_1"><a href="#"><div class="titulo">Botón 1</div></a></div>
  41.             <div class="item_btn_2"><a href="#"><div class="titulo">Botón 2</div></a></div>
  42.             <div class="item_btn_3"><a href="#"><div class="titulo">Botón 3</div></a></div>
  43.             <div class="item_btn_4"><a href="#"><div class="titulo">Botón 4</div></a></div>
  44.             <div class="item_btn_5"><a href="#"><div class="titulo">Botón 5</div></a></div>
  45.             </div>
  46.       </div>
  47.     </nav>
  48.         
  49.     <section class="menu_inferior">
  50.         <ul>  
  51.         <li><a href="#">Botón 1</a></li>
  52.         <li><a href="#">Botón 2</a></li>
  53.         <li><a href="#">Botón 3</a></li>
  54.         <li><a href="#">Botón 4</a></li>
  55.         </ul> 
  56.     </section>
  57.     
  58.     <footer>pie de pagina</footer>
  59.         
  60.     </body>
  61. </html>

CSS:
Código CSS: 
Ver original
  1. /* Propiedades generales */
  2. h1 {
  3.     font-size: 28px;
  4.     line-height: 30px;
  5.     padding: 10px 0;
  6. }
  7.  
  8. h2 {
  9.     font-size: 23px;
  10.     line-height: 25px;
  11.     padding: 10px 0;
  12. }
  13.  
  14. h3 {
  15.     font-size: 18px;
  16.     line-height: 20px;
  17.     padding: 11px 0;
  18. }
  19.  
  20. p {
  21.     padding-bottom: 22px;
  22. }
  23.  
  24. {
  25.     margin: 0;
  26.     padding: 0;
  27. }
  28. /* Fin Propiedades generales */
  29.  
  30.  
  31. /* Render los elementos HTML5 como un bloque */
  32. header, footer, aside, nav, article {
  33.     display: block;
  34. }
  35.  
  36.  
  37. header {
  38.     display: block;
  39. }
  40.  
  41. header h1 {
  42.     font-family: Arial, Helvetica, sans-serif;
  43.     font-size: 2.5em;
  44.     color: #000000;
  45. }
  46.  
  47. /* Menú superior horizontal */
  48. .menu_superior {
  49.     position: absolute;
  50.     margin-left: 290px;
  51.     top: 25px;
  52. }
  53.  
  54. .menu_superior ul {
  55.     margin: 0 auto;
  56.     width: 960px;
  57.     list-style: none;
  58. }
  59.  
  60. .menu_superior ul li {
  61.     float: left;
  62. }
  63.  
  64. .menu_superior ul li a {
  65.     width: 120px;
  66.     font-size: 12px;
  67.     line-height: 44px;
  68.     text-align: right;
  69.     text-decoration: none;
  70.     color: #543F2A;
  71.     display: block;
  72. }
  73.  
  74. .menu_superior ul li a:hover {
  75.     color: #CE4646;
  76. }
  77.  
  78. .menu_superior ul li.selected a {
  79.     color: #fff;
  80. }
  81. /* Fin Menú superior horizontal */
  82.  
  83. body {
  84.     width: 940px;
  85.     font: 13px/22px Helvetica, Arial, sans-serif;
  86.     background: #EEEDE5;
  87.     margin-top: 0;
  88.     margin-right: auto;
  89.     margin-bottom: 0;
  90.     margin-left: auto;
  91. }
  92.  
  93. /* Menú principal home */
  94. nav {
  95.     width: 300px;
  96.     height: 300px;
  97.     background-color: #EEEDE5;
  98.     float: left;
  99.     margin-top: 100px;
  100. }
  101. /* Fin Menú principal home */
  102.  
  103. /* Marco video home */
  104. .marco_video{
  105.     background-color: #666666;
  106.     height: 300px;
  107.     width: 450px;
  108.     float: right;
  109.     margin-top: 100px;
  110. }
  111. /* Fin Marco video home */
  112.  
  113.  
  114. #centro{
  115.     background-color: #EEEDE5;
  116.     background-repeat: no-repeat;
  117.     background-position: center center;
  118.     height: 276px;
  119.     width: 276px;
  120.     position: relative;
  121.  
  122.     -webkit-border-radius: 300px;
  123.     -moz-border-radius: 300px;
  124.     -o-border-radius: 300px;
  125.     border-radius: 300px;
  126.     border: 12px solid #CCCCCC; 
  127.     /*-webkit-box-shadow: 0 0 50px rgba(0,0,0,0.5);
  128.     -moz-box-shadow: 0 0 50px rgba(0,0,0,0.5);
  129.     -o-box-shadow: 0 0 50px rgba(0,0,0,0.5);
  130.     box-shadow: 0 0 50px rgba(0,0,0,0.5);
  131.     */
  132. }
  133.  
  134. /* Botón 1 */
  135. .item_btn_1{
  136.     background-color: #F9A63E;
  137.     width: 80px;
  138.     height: 80px;
  139.     position: absolute;
  140.     opacity: 100;
  141.     -webkit-border-radius: 100px;
  142.     -moz-border-radius: 100px;
  143.     -o-border-radius: 100px;
  144.     border-radius: 100px;
  145. }
  146.  
  147. .item_btn_1 img{
  148.     border: 0;
  149.     margin: 15px;
  150. }
  151.  
  152. .item_btn_1 a{
  153.     text-decoration: none;
  154. }
  155. /* Fin Botón 1 */
  156.  
  157. /* Botón 2 */
  158. .item_btn_2{
  159.     background-color: #6FC6B0;
  160.     width: 80px;
  161.     height: 80px;
  162.     position: absolute;
  163.     opacity: 100;
  164.     -webkit-border-radius: 100px;
  165.     -moz-border-radius: 100px;
  166.     -o-border-radius: 100px;
  167.     border-radius: 100px;
  168.     margin: 88px;
  169. }
  170.  
  171. .item_btn_2 img{
  172.     border: 0;
  173.     margin: 15px;
  174. }
  175.  
  176. .item_btn_2 a{
  177.     text-decoration: none;
  178. }
  179. /* Fin Botón 2 */
  180.  
  181. /* Botón 3 */
  182. .item_btn_3{
  183.     background-color: #C5D163;
  184.     width: 80px;
  185.     height: 80px;
  186.     position: absolute;
  187.     opacity: 100;
  188.     -webkit-border-radius: 100px;
  189.     -moz-border-radius: 100px;
  190.     -o-border-radius: 100px;
  191.     border-radius: 100px;
  192.     margin: 88px;
  193. }
  194.  
  195. .item_btn_3 img{
  196.     border: 0;
  197.     margin: 15px;
  198. }
  199.  
  200. .item_btn_3 a{
  201.     text-decoration: none;
  202. }
  203. /* Fin Botón 3 */
  204.  
  205. /* Botón 4 */
  206. .item_btn_4{
  207.     background-color: #CE4646;
  208.     width: 80px;
  209.     height: 80px;
  210.     position: absolute;
  211.     opacity: 100;
  212.     -webkit-border-radius: 100px;
  213.     -moz-border-radius: 100px;
  214.     -o-border-radius: 100px;
  215.     border-radius: 100px;
  216.     margin: 88px;
  217. }
  218.  
  219. .item_btn_4 img{
  220.     border: 0;
  221.     margin: 15px;
  222. }
  223.  
  224. .item_btn_4 a{
  225.     text-decoration: none;
  226. }
  227. /* Fin Botón 4 */
  228.  
  229. /* Botón 5 */
  230. .item_btn_5{
  231.     background-color: #543F2A;
  232.     width: 80px;
  233.     height: 80px;
  234.     position: absolute;
  235.     opacity: 100;
  236.     -webkit-border-radius: 100px;
  237.     -moz-border-radius: 100px;
  238.     -o-border-radius: 100px;
  239.     border-radius: 100px;
  240.     margin: 88px;
  241. }
  242.  
  243. .item_btn_5 img{
  244.     border: 0;
  245.     margin: 15px;
  246. }
  247.  
  248. .item_btn_5 a{
  249.     text-decoration: none;
  250. }
  251. /* Fin Botón 5 */
  252.  
  253. .titulo{
  254.     background-color: black;
  255.     color: white;
  256.     font-family: Arial;
  257.     margin-top:-125px;
  258.     opacity: 0;
  259.     
  260.     text-align: center;
  261.     -webkit-border-radius: 100px;
  262.     -moz-border-radius: 100px;
  263.     -o-border-radius: 100px;
  264.     border-radius: 100px;
  265.     -webkit-transition: all 1s;
  266.     -moz-transition: all 1s;
  267.     -o-transition: all 1s;
  268.     -ms-transition: all 1s;
  269.     transition: all 1s;
  270. }
  271.  
  272. /* Opacidad para los títulos */
  273. .item_btn_1:hover .titulo{
  274.     opacity: 0.8;
  275. }
  276.  
  277. .item_btn_2:hover .titulo{
  278.     opacity: 0.8;
  279. }
  280.  
  281. .item_btn_3:hover .titulo{
  282.     opacity: 0.8;
  283. }
  284.  
  285. .item_btn_4:hover .titulo{
  286.     opacity: 0.8;
  287. }
  288.  
  289. .item_btn_5:hover .titulo{
  290.     opacity: 0.8;
  291. }
  292. /* Fin Opacidad para los títulos */
  293.  
  294. /* Posición para cada botón */
  295. .item_btn_1:nth-child(1){
  296.     margin: -50px 0 0 90px;
  297. }
  298.  
  299. .item_btn_2:nth-child(2){
  300.     margin: 20px 0 0 220px;
  301. }
  302.  
  303. .item_btn_3:nth-child(3){
  304.     margin: 200px 0 0 185px;
  305. }
  306.  
  307. .item_btn_4:nth-child(4){
  308.     margin: 200px 0 0 15px;
  309. }
  310.  
  311. .item_btn_5:nth-child(5){
  312.     margin: 20px 0 0 -20px;
  313. }
  314. /* Fin Posición para cada botón */
  315.  
  316.  
  317. /* Menú inferior horizontal */
  318. .menu_inferior {
  319.     width: auto;
  320.     position: relative;
  321.     height: 50px;
  322.     margin-top: 500px;
  323. }
  324.  
  325. .menu_inferior  ul {
  326.     margin: 0 auto;
  327.     width: 960px;
  328.     list-style: none;
  329. }
  330.  
  331. .menu_inferior  ul li {
  332.     float: left;
  333. }
  334.  
  335. .menu_inferior  ul li a {
  336.     width: auto;
  337.     font-size: 12px;
  338.     line-height: 50px;
  339.     text-decoration: none;
  340.     color: #543F2A;
  341.     display: block;
  342.     padding-right: 10px;
  343.     padding-left: 50px;
  344.     height: 50px;
  345.     margin-right: 42px;
  346.     margin-left: 10px;
  347. }
  348.  
  349. .menu_inferior  img {
  350.     position: absolute;
  351.     clip: rect(auto,auto,auto,-20px);
  352.     margin-left: -50px;
  353. }
  354.  
  355. .menu_inferior  ul li a:hover {
  356.     color: #CE4646;
  357. }
  358.  
  359. .menu_inferior  ul li.selected a {
  360.     color: #fff;
  361. }
  362. /* Fin Menú inferior horizontal */
  363.  
  364. /* Pie de página */
  365. footer{
  366.     height: 40px;
  367.     width: 940px;
  368.     margin-top: 25px;
  369.     font-family: Arial, Helvetica, sans-serif;
  370.     font-size: 0.9em;
  371.     color: #AF875F;
  372.     text-align: right;
  373.     line-height: 40px;
  374. }
  375. /* Fin Pie de página */

Gracias por su ayuda
__________________
Diseñador Gráfico publicitario
  #2 (permalink)  
Antiguo 02/05/2013, 08:39
Avatar de ceaped  
Fecha de Ingreso: febrero-2004
Mensajes: 2.185
Antigüedad: 20 años, 2 meses
Puntos: 9
Respuesta: HTML5 y CSS3 se ve mal en IE
Hola
Problema solucionado en gran parte.
Como apenas es mis primeros pasos en HTML5 con CSS3 surgen problemas.

Código HTML: 
Ver original
  1. <!--html5-->
Al quitar esta etiqueta que está al principio de la página se arregló todo.
__________________
Diseñador Gráfico publicitario
  #3 (permalink)  
Antiguo 02/05/2013, 09:37
Avatar de Triby
Mod on free time
  
Fecha de Ingreso: agosto-2008
Ubicación: $MX->Gto['León'];
Mensajes: 10.106
Antigüedad: 15 años, 8 meses
Puntos: 2237
Respuesta: HTML5 y CSS3 se ve mal en IE
Se arregló?... dúdolo mucho, porque esa etiqueta le dice al navegador el juego de reglas que estás usando en el documento y, si la eliminas, es posible que los problemas aparezcan en navegadores reales.

IE no es conocido por respetar las reglas, principalmente en versiones previas a la 9.

Vuelve a poner la etiqueta como estaba y, antes de </head> agrega esto:

Código HTML: 
Ver original
  1. <!--[if lt IE 9]>
  2. <script type="text/javascript">
  3.     "'article aside footer header nav section time'".replace(/\w+/g,function(n){document.createElement(n)});
  4. </script>
  5. <![endif]-->
__________________
- León, Guanajuato
- GV-Foto
  #4 (permalink)  
Antiguo 02/05/2013, 10:21
Avatar de ceaped  
Fecha de Ingreso: febrero-2004
Mensajes: 2.185
Antigüedad: 20 años, 2 meses
Puntos: 9
Respuesta: HTML5 y CSS3 se ve mal en IE
Hola Triby
Gracias por tu ayuda.
Tengo otro problema y es con el video en IE no se me ve el video.
Así lo tengo:

Código HTML: 
Ver original
  1. <video controls="controls" widht="400" height="300">
  2. <source src="video/nombre_video.webm" type='video/webm; codecs="vp8, vorbis"' />
  3. <source src="video/nombre_video.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
  4. </video>

¿Nó se puede ver en local?. No lo tengo en un servidor.
Sí es el caso, hay alguna forma que se vea?

Gracias por tu ayuda
__________________
Diseñador Gráfico publicitario
  #5 (permalink)  
Antiguo 02/05/2013, 10:28
Avatar de Triby
Mod on free time
  
Fecha de Ingreso: agosto-2008
Ubicación: $MX->Gto['León'];
Mensajes: 10.106
Antigüedad: 15 años, 8 meses
Puntos: 2237
Respuesta: HTML5 y CSS3 se ve mal en IE
Lee esto: http://www.sitepoint.com/html5-video...er-fall-backs/
__________________
- León, Guanajuato
- GV-Foto
  #6 (permalink)  
Antiguo 02/05/2013, 10:45
Avatar de ceaped  
Fecha de Ingreso: febrero-2004
Mensajes: 2.185
Antigüedad: 20 años, 2 meses
Puntos: 9
Respuesta: HTML5 y CSS3 se ve mal en IE
Hola Triby
Si lo lei, pero así tengo mi etiquete para ver video en:
Firefox...ok
Safari...ok
Chrome...ok
IE...no
__________________
Diseñador Gráfico publicitario
  #7 (permalink)  
Antiguo 03/05/2013, 10:50
Avatar de ceaped  
Fecha de Ingreso: febrero-2004
Mensajes: 2.185
Antigüedad: 20 años, 2 meses
Puntos: 9
Respuesta: HTML5 y CSS3 se ve mal en IE
Hola
Así pongo el video:

Código HTML: 
Ver original
  1. <video controls="controls" widht="400" height="300">
  2. <source src="video/nombre_video.webm" type='video/webm; codecs="vp8, vorbis"' />
  3. <source src="video/nombre_video.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
  4. </video>

Firefox...ok
Safari...ok
Chrome...ok
IE...no

Para ver los videos en IE tienen que esta en un servidor?

Gracias por su ayuda
__________________
Diseñador Gráfico publicitario
  #8 (permalink)  
Antiguo 03/05/2013, 11:18
Avatar de emprear
Colaborador
  
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 16 años, 9 meses
Puntos: 1567
Respuesta: HTML5 y CSS3 se ve mal en IE
Primero te aclaro una cosa, respecto de tu primer problema, no es aconsejable incluir comentarios html 5 antes del Doctype, y si lo hicieses
<!-- html5 --> --> correcto
<!--html5--> --> incorrecto
El video puede funcionar en local, en cuanto a la no visualización en ie, simplemente usá esto
Código: 
<video controls="controls" widht="400" height="300">
<source src="video/nombre_video.webm" type='video/webm' />
<source src="video/nombre_video.mp4" type='video/mp4' />
</video>
y por supuesto asegurate que tu mp4, efectivamente está codificado en
H.264 (también conocido como MPEG-4 part 10, MPEG-4 AVC,MPEG-4 Advanced Video Coding)
Un detalle extra, el charset en html5 definilo asi
Código: 
<meta charset="utf-8" />
Y por supuesto, hablamos de IE9, en versiones anteriores tenés que hacer el fallback como lo indicó @Triby
Demo
http://foros.emprear.com/html5/test-...est-video.html
Saludos
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.

Etiquetas: css, css3, html5, link, página
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 10:28.