TODOPIC

Misceláneas - Interés General => Off Topic => Mensaje iniciado por: RedPic en 08 de Agosto de 2009, 06:48:23

Título: HTML, PHP y una diferencia inexplicable entre Firefox e IExplorer
Publicado por: RedPic en 08 de Agosto de 2009, 06:48:23
Maestros del Web necesito vuestro consejo.

Dado un mismo código html (aplicado sin Hojas de Estilo que puedan interferir)  ...

Código: HTML
  1. <div align="center">
  2.   <center>
  3.     <table style="border-collapse: collapse;" border="0" bordercolor="#111111" cellpadding="0" cellspacing="0" width="75%">
  4.       <tbody>
  5.         <tr>
  6.           <td rowspan="2"><img src="../common/images/boxes/sbar_blue_l.gif" alt="" width="28" height="28"></td>
  7.           <td background="../common/images/boxes/sbar_blue_bg.gif" bgcolor="#90acc7" width="100%" align="left"><font face="Verdana" color="white"><b>Título en Gris (Grey-Blue)</b></font></td>
  8.           <td rowspan="2"><img src="../common/images/boxes/sbar_blue_r.gif" alt="" width="47" height="28"></td>
  9.           <td><img src="../common/images/boxes/s.gif" alt="" width="1" height="24"></td>
  10.         </tr>
  11.         <tr>
  12.           <td><img src="../common/images/boxes/sbar_blue_b.gif" alt="" width="100%" height="4"></td>
  13.           <td><img src="../common/images/boxes/s.gif" alt="" width="1" height="4"></td>
  14.         </tr>
  15.       </tbody>
  16.     </table>
  17.   </center>
  18. </div>

Lo muestro respectivamente en Firefox e IExplorer tanto desde un fichero HTML como desde un script PHP mediante un simple echo($HtmlCode); donde $HtmlCode es una variable cuyo contenido es el código HTML anterior.

Los resultados son 3 a 0, como en un partido de fútbol ... y el cuarto que es el que me interesa no hay forma de que salga correcto.

Código HTML visto con IExplorer
(http://publi.garcia-cuervo.net/titulo_en_gris_02_html_iexplorer.gif)

Código HTML visto con Firefox
(http://publi.garcia-cuervo.net/titulo_en_gris_01_html_firefox.gif)

Código PHP visto con IExplorer
(http://publi.garcia-cuervo.net/titulo_en_gris_03_php_iexplorer.gif)

Código PHP visto con Firefox
(http://publi.garcia-cuervo.net/titulo_en_gris_04_php_firefox.gif)

En nombre de todos los dioses de internet y mas allá del espacio profundo ¿podría alguno de ustedes decirme por qué me ocurre esto?

Estoy desconcertado  :shock:

Título: Re: HTML, PHP y una diferencia inexplicable entre Firefox e IExplorer
Publicado por: RedPic en 08 de Agosto de 2009, 09:26:05
Bueno, mientras encuentro la diferencia entre el tratamiento HTML PHP Firefox e IExplorer he solucionado el tema modificando el HTML y dejándome de rowspan y ajustes extraños.

He dejado las imágenes como background puros y duros ...

... pero me gustaría saber por qué funciona bien en tres casos y mal en el último.

En fin, con este código HTML va correctamente en los cuatro casos.

Código: HTML
  1. <div align="center">
  2.   <center>
  3.     <table style="border-collapse: collapse;" border="0" bordercolor="#111111" cellpadding="0" cellspacing="0" width="75%">
  4.       <tbody>
  5.         <tr>
  6.           <td background="../common/images/boxes/blue/sbar_blue_l.gif" width="27" height="27"></td>
  7.           <td background="../common/images/boxes/blue/sbar_blue_bg.gif" bgcolor="#90acc7" width="92%" align="left"><font face="Verdana" color="white"><b>This One is in Gray-Blue</b></font></td>
  8.           <td background="../common/images/boxes/blue/sbar_blue_r.gif" width="50" height="27">&nbsp;</td>
  9.         </tr>
  10.       </tbody>
  11.     </table>
  12.   </center>
  13. </div>

Para poder adoptar esta solución he tenido que modificar la imagen sbar_blue_bg.gif para que contenga tanto a ella misma como la sombra de sbar_blue_b.gif, las dos en una sola imagen, así las tres columnas son iguales en altura.

Título: Re: HTML, PHP y una diferencia inexplicable entre Firefox e IExplorer
Publicado por: Nocturno en 08 de Agosto de 2009, 13:25:34
Con este test puedes ver cuánto de compatibles son tus navegadores respecto al HTML estándar.

http://acid3.acidtests.org/

En mi caso uso Chrome e Internet Explorer, el primero me ha conseguido un 100% mientras que el segundo no pasa del 20%.
Título: Re: HTML, PHP y una diferencia inexplicable entre Firefox e IExplorer
Publicado por: xocas en 08 de Agosto de 2009, 16:01:27
Internet Explorer nos ayuda mucho a solucionar unos problemas que no tendríamos si no existiese Internet Explorer. un amigo de Jaume Perich

ya hace bastante tiempo que no tengo una de estas peleas de güebero, tan divertidas ellas... y que básicamente se deben a lo que te comenta Nocturno: IE es el navegador más incompatible de todos los navegadores y su forma de interpretar el código es algo solo al alcance de microsoft. como dijo Pilatos: 'por favor, que alguien me traiga una toalla pa secarme las manos'

las recomendaciones que se encuentran por la red coinciden bastante en estos puntos:
- crea tu web para que funcione bien en Firefox ya que es el que más se aproxima a los estándares, y de ser necesario usa los hacks adecuados para solucionar los problemas que se te presenten con IE.
- separa claramente continente de contenido. usa css para construir el entorno y añádele el contenido con html o php
- las tablas se usan únicamente para mostrar datos tabulados. usarlas para crear el continente es una forma segura de sumar algún que otro pecado
- procura validar siempre el código y trata de visualizarlo en las últimas versiones de los principales navegadores

si vieras el test acid2 con IE6 sabrías lo que es no dar crédito. http://acid2.acidtests.org/

tengo bastante info sobre este tema, de manera que si lo quieres no tienes más que decirlo, y ya sabes que cualquier ayuda que pueda darte... pos pa eso estamos !!

un saludo
Título: Re: HTML, PHP y una diferencia inexplicable entre Firefox e IExplorer
Publicado por: RedPic en 08 de Agosto de 2009, 20:22:46
Buff ... después de escribir casi una novela para este post se ha ido todo al güano  :5]

Lo rehago pero solo como un resumen del mismo.

Ya lo estoy haciendo para Firefox; PHP muestra HTML formateado con CSS  :mrgreen:

(http://publi.garcia-cuervo.net/titulo_en_gris_05_php_html_css_firefox.gif)

Código: PHP
  1. <?
  2.        draw_TitleBar_GrayBlue('This One is  Gray-Blue (default 75%)');
  3.        draw_TitleBar_GrayBlue('This another Gray-Blue (500 pixeles)','500px');
  4.  
  5.  
  6.         /* Genera un Titular en GRAY-BLUE */
  7.         function insert_TitleBar_GrayBlue($title, $witdh='75%', $center=true){
  8.           $ret=insert_TitleBar($title,'grayblue',$witdh,$center);
  9.     return $ret;       
  10.         }
  11.         /* Muestra un Titular en GRAY-BLUE */
  12.         function draw_TitleBar_GrayBlue($title, $witdh='75%', $center=true){
  13.     $content=insert_TitleBar_GrayBlue($title,$witdh,$center);
  14.     echo $content;
  15.         }
  16.  
  17.  
  18.         /* Muestra un TitleBar */
  19.         function draw_TitleBar($title, $subclass, $witdh='75%', $center=true){
  20.     $content=insert_TitleBar($title,$subclass,$witdh,$center);
  21.     echo $content;
  22.         }
  23.         /* Genera un TitleBar */
  24.         function insert_TitleBar($title, $subclass, $witdh='75%', $center=true){
  25.                
  26.           $ret='';
  27.           if($center){
  28.             $ret.='
  29.      <div>
  30.        <center>
  31.      ';
  32.     }
  33.     $localWidth='';
  34.     if($witdh!=''){
  35.       $localWidth='width="'.$witdh.'"';
  36.     }
  37.     $tableclass='titlebartable'.$subclass;
  38.     $tabletdlclass='titlebartdl'.$subclass;
  39.     $tabletdcclass='titlebartdc'.$subclass;
  40.     $tabletdrclass='titlebartdr'.$subclass;
  41.           $ret.='
  42.             <table class="'.$tableclass.'" '.$localWidth.'>
  43.          <tr>
  44.                   <td class="'.$tabletdlclass.'" ></td>
  45.                 <td class="'.$tabletdcclass.'" >'.$title.'</td>
  46.                 <td class="'.$tabletdrclass.'" ></td>
  47.          </tr>
  48.      </table>
  49.      ';
  50.           if($center){
  51.             $ret.='
  52.        </center>
  53.      </div>
  54.      ';
  55.     }
  56.     return $ret;       
  57.         }
  58.  
  59. ?>

Código: CSS
  1. .titlebartablegrayblue{
  2.         border-collapse:collapse;
  3.         border-style:none;
  4.         border-color:#111111;
  5.         padding: 0px 0px 0px 0px;
  6. }
  7. .titlebartdlgrayblue{
  8.         background-image: url('/common/images/boxes/blue/sbar_l_blue.gif');
  9.         width: 25px;
  10.         height: 27px;
  11.         text-align: right;     
  12. }
  13. .titlebartdcgrayblue{
  14.         background-image: url('/common/images/boxes/blue/sbar_bg_blue.gif');
  15.         background-color : #90acc7;
  16.         font-family: Verdana, "Times New Roman";
  17.         font-style: normal;
  18.         font-weight: bold;
  19.         text-align: left;
  20.         vertical-align: middle;
  21.         color: #ffffff;
  22. }
  23. .titlebartdrgrayblue{
  24.         background-image: url('/common/images/boxes/blue/sbar_r_blue.gif');
  25.         width: 45px;
  26.         height: 27px;
  27.         text-align: left;      
  28. }
Título: Re: HTML, PHP y una diferencia inexplicable entre Firefox e IExplorer
Publicado por: xocas en 09 de Agosto de 2009, 11:31:11
hola

te dejo unos enlaces que me parecen interesantes a la hora de enfrentarse al trabajo de güebero:

********************************
http://www.maestrosdelweb.com/temas/
http://www.desarrolloweb.com/index.php
http://www.cleancss.com/
http://www.mezzoblue.com/zengarden/resources/
http://www.cssplay.co.uk/menu/
http://webnova.com.ar/index.php
http://www.torresburriel.com/weblog/2005/02/02/buenas-practicas-trabajando-con-css-traduccion-de-css-crib-sheet-de-dave-shea/

http://browsershots.org/

http://enespanol.com.ar/2008/01/28/ie-podra-cumplir-estandares-pero-no-lo-hara/

http://msdn.microsoft.com/en-us/library/ms537512(VS.85).aspx

http://www.menorcaon.com/2008/03/26/mapas-calor-web/
http://www.feng-gui.com/
http://goldenratiocalculator.com/

http://www.smashingmagazine.com/2008/05/29/applying-divine-proportion-to-web-design/
http://www.mexside.com/diseno-web/la-divina-proporcion-y-el-diseno-web

http://www.forosdelweb.com/
********************************

un saludo

pd: la intención no es que te pases los próximos once días leyendo, si no que probablemente encuentres ideas y soluciones a dudas que te irán surgiendo  8)
Título: Re: HTML, PHP y una diferencia inexplicable entre Firefox e IExplorer
Publicado por: RedPic en 09 de Agosto de 2009, 15:32:25
Si, Xoaquim, maestrosdelweb.com y desarrolloweb.com son referencias constantes y las consulto muy a menudo.

Bueno, fijaos el PHP -> HTML -> CSS que me he montado por colores y el resultado que dan ..

(http://publi.garcia-cuervo.net/titulo_en_colores_php_html_css_firefox.gif)

El PHP llama a sus funciones PHP con:
Código: PHP
  1. draw_TitleBar('This One is  Gray-Blue ',  'grayblue','35%');
  2.           draw_TitleBar('This One is  Red (Type 1)','red1','45%');
  3.           draw_TitleBar('This One is  Red (Type 2)','red2','55%');
  4.           draw_TitleBar('This One is  Red (Type 3)','red3','65%');
  5.           draw_TitleBar('This One is  Yellow',      'yellow1');

La función draw_TitleBar llama al insert_TitleBar que crea el contenido para emitirlo con un echo()
así puedo enviarlo directamente al navegador o recibirlo sobre una variable para inyectarlo en otro código PHP:
Código: PHP
  1. /* Muestra un TitleBar */
  2.     function draw_TitleBar($title, $subclass, $witdh='75%', $center=true){
  3.       $content=insert_TitleBar($title,$subclass,$witdh,$center);
  4.       echo $content;
  5.     }
  6.  
  7.     /* Genera un TitleBar */
  8.     function insert_TitleBar($title, $subclass, $witdh='75%', $center=true){
  9.                
  10.      $ret='';
  11.      if($center){
  12.        $ret.='
  13.       <div>
  14.        <center>
  15.      ';
  16.      }
  17.      $localWidth='';
  18.      if($witdh!=''){
  19.        $localWidth='width="'.$witdh.'"';
  20.      }
  21.      $tableclass    ='titlebartable';
  22.      $tabletdlclass ='titlebartdl tbtdl'.$subclass;
  23.      $tabletdcclass ='titlebartdc tbtdc'.$subclass;
  24.      $tabletdrclass ='titlebartdr tbtdr'.$subclass;
  25.      $ret.='
  26.     <table class="'.$tableclass.'" '.$localWidth.'>
  27.       <tr>
  28.         <td class="'.$tabletdlclass.'" ></td>
  29.         <td class="'.$tabletdcclass.'" >'.$title.'</td>
  30.         <td class="'.$tabletdrclass.'" ></td>
  31.       </tr>
  32.     </table>
  33.     ';
  34.      if($center){
  35.        $ret.='
  36.       </center>
  37.      </div>
  38.       ';
  39.      }
  40.      return $ret;      
  41.    }

Este código PHP genera el HTML con una simple tabla de tres columnas cuyos backgrounds conforman el titular, solo la columna central contiene el texto del mismo (aquí el HTML del primer titular en GrayBlue):
Código: HTML
  1. <div>
  2.  <center>
  3.   <table class="titlebartable" width="35%">
  4.    <tr>
  5.     <td class="titlebartdl tbtdlgrayblue" ></td>
  6.     <td class="titlebartdc tbtdcgrayblue" >This One is  Gray-Blue </td>
  7.     <td class="titlebartdr tbtdrgrayblue" ></td>
  8.    </tr>
  9.   </table>
  10.  </center>
  11. </div>

Y por último el CSS que realmente dibuja el titular:
Código: CSS
  1. .titlebartable{
  2.         border-collapse:collapse;
  3.         border-style:none;
  4.         border-color:#111111;
  5.         padding: 0px 0px 0px 0px;
  6. }
  7. .titlebartdl{
  8.         width: 25px;
  9.         height: 27px;
  10.         text-align: right;     
  11. }
  12. .titlebartdc{
  13.         font-style: normal;
  14.         font-weight: bold;
  15.         text-align: left;
  16.         vertical-align: middle;
  17.         color: #ffffff;
  18. }
  19. .titlebartdr{
  20.         width: 45px;
  21.         height: 27px;
  22.         text-align: left;      
  23. }
  24.  
  25. .tbtdlgrayblue{ background-image: url('/common/images/boxes/grayblue/sbar_l_grayblue.gif'); }
  26. .tbtdcgrayblue{ background-image: url('/common/images/boxes/grayblue/sbar_bg_grayblue.gif'); background-color : #90acc7;}
  27. .tbtdrgrayblue{ background-image: url('/common/images/boxes/grayblue/sbar_r_grayblue.gif'); }
  28.  
  29. .tbtdlred1{ background-image: url('/common/images/boxes/red1/sbar_l_red1.gif'); }
  30. .tbtdcred1{ background-image: url('/common/images/boxes/red1/sbar_bg_red1.gif'); background-color : #fc0204; }
  31. .tbtdrred1{ background-image: url('/common/images/boxes/red1/sbar_r_red1.gif'); }
  32.  
  33. .tbtdlred2{ background-image: url('/common/images/boxes/red2/sbar_l_red2.gif'); }
  34. .tbtdcred2{ background-image: url('/common/images/boxes/red2/sbar_bg_red2.gif'); background-color : #c40204; }
  35. .tbtdrred2{ background-image: url('/common/images/boxes/red2/sbar_r_red2.gif'); }
  36.  
  37. .tbtdlred3{ background-image: url('/common/images/boxes/red3/sbar_l_red3.gif'); }
  38. .tbtdcred3{ background-image: url('/common/images/boxes/red3/sbar_bg_red3.gif'); background-color : #550000; }
  39. .tbtdrred3{ background-image: url('/common/images/boxes/red3/sbar_r_red3.gif'); }
  40.  
  41. .tbtdlyellow1{ background-image: url('/common/images/boxes/yellow1/sbar_l_yellow1.gif'); }
  42. .tbtdcyellow1{ background-image: url('/common/images/boxes/yellow1/sbar_bg_yellow1.gif'); background-color : #ffff00; color : #ff0000;}
  43. .tbtdryellow1{ background-image: url('/common/images/boxes/yellow1/sbar_r_yellow1.gif'); }

La verdad es que me encanta esta forma de hacer las cosas.  :mrgreen:
Título: Re: HTML, PHP y una diferencia inexplicable entre Firefox e IExplorer
Publicado por: PalitroqueZ en 10 de Agosto de 2009, 13:06:10
Hola Diego.

Me alegra que lo hayas resuelto. A ver si aprendo PHP para quitarme esos dolores de alma que produce cuando se intenta hacer algo bien y luego viene el I.E. con inexplicable forma de leer las paginas.




Título: Re: HTML, PHP y una diferencia inexplicable entre Firefox e IExplorer
Publicado por: RedPic en 10 de Agosto de 2009, 15:51:23
Pedro, si sabes C sabes PHP con la increible locura de que las variables no hay que declararlas sino solo usarlas donde te de la gana (como los antiguos BASIC) ... y entonces solo te hace falta la biblioteca de funciones built-in en PHP.net (http://es2.php.net/manual/en/ref.strings.php)