Autor Tema: HTML, PHP y una diferencia inexplicable entre Firefox e IExplorer (Leído 3333 veces)

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

<div align="center">
  <center>
    <table style="border-collapse: collapse;" border="0" bordercolor="#111111" cellpadding="0" cellspacing="0" width="75%">
      <tbody>
        <tr> 
          <td rowspan="2"><img src="../common/images/boxes/sbar_blue_l.gif" alt="" width="28" height="28"></td>
          <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>
          <td rowspan="2"><img src="../common/images/boxes/sbar_blue_r.gif" alt="" width="47" height="28"></td>
          <td><img src="../common/images/boxes/s.gif" alt="" width="1" height="24"></td>
        </tr>
        <tr> 
          <td><img src="../common/images/boxes/sbar_blue_b.gif" alt="" width="100%" height="4"></td>
          <td><img src="../common/images/boxes/s.gif" alt="" width="1" height="4"></td>
        </tr>
      </tbody>
    </table>
  </center>
</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

Código HTML visto con Firefox

Código PHP visto con IExplorer

Código PHP visto con Firefox

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

RedPic · « **Respuesta #1 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

<div align="center">
  <center>
    <table style="border-collapse: collapse;" border="0" bordercolor="#111111" cellpadding="0" cellspacing="0" width="75%">
      <tbody>
        <tr> 
          <td background="../common/images/boxes/blue/sbar_blue_l.gif" width="27" height="27"></td>
          <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>
          <td background="../common/images/boxes/blue/sbar_blue_r.gif" width="50" height="27">&nbsp;</td>
        </tr>
      </tbody>
    </table>
  </center>
</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.

Nocturno · « **Respuesta #2 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%.

xocas · « **Respuesta #3 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

RedPic · « **Respuesta #4 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

Lo rehago pero solo como un resumen del mismo.

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

Código: PHP

<?
       draw_TitleBar_GrayBlue('This One is  Gray-Blue (default 75%)');
       draw_TitleBar_GrayBlue('This another Gray-Blue (500 pixeles)','500px');
 
 
        /* Genera un Titular en GRAY-BLUE */
        function insert_TitleBar_GrayBlue($title, $witdh='75%', $center=true){
          $ret=insert_TitleBar($title,'grayblue',$witdh,$center);
    return $ret;        
        }
        /* Muestra un Titular en GRAY-BLUE */
        function draw_TitleBar_GrayBlue($title, $witdh='75%', $center=true){
    $content=insert_TitleBar_GrayBlue($title,$witdh,$center);
    echo $content;
        }
 
 
        /* Muestra un TitleBar */
        function draw_TitleBar($title, $subclass, $witdh='75%', $center=true){
    $content=insert_TitleBar($title,$subclass,$witdh,$center);
    echo $content;
        }
        /* Genera un TitleBar */
        function insert_TitleBar($title, $subclass, $witdh='75%', $center=true){
                
          $ret='';
          if($center){
            $ret.='
      <div>
        <center>
      ';
    }
    $localWidth=''; 
    if($witdh!=''){
      $localWidth='width="'.$witdh.'"';
    }
    $tableclass='titlebartable'.$subclass;
    $tabletdlclass='titlebartdl'.$subclass;
    $tabletdcclass='titlebartdc'.$subclass;
    $tabletdrclass='titlebartdr'.$subclass;
          $ret.='
            <table class="'.$tableclass.'" '.$localWidth.'>
          <tr> 
                  <td class="'.$tabletdlclass.'" ></td>
                <td class="'.$tabletdcclass.'" >'.$title.'</td>
                <td class="'.$tabletdrclass.'" ></td>
          </tr>
      </table>
      ';
          if($center){
            $ret.='
        </center>
      </div>
      ';
    }
    return $ret;        
        }
 
?>

Código: CSS

.titlebartablegrayblue{
        border-collapse:collapse;
        border-style:none;
        border-color:#111111;
        padding: 0px 0px 0px 0px; 
}
.titlebartdlgrayblue{
        background-image: url('/common/images/boxes/blue/sbar_l_blue.gif');
        width: 25px;
        height: 27px;
        text-align: right;      
}
.titlebartdcgrayblue{
        background-image: url('/common/images/boxes/blue/sbar_bg_blue.gif');
        background-color : #90acc7;
        font-family: Verdana, "Times New Roman";
        font-style: normal;
        font-weight: bold;
        text-align: left;
        vertical-align: middle; 
        color: #ffffff;
}
.titlebartdrgrayblue{
        background-image: url('/common/images/boxes/blue/sbar_r_blue.gif');
        width: 45px;
        height: 27px;
        text-align: left;       
}

xocas · « **Respuesta #5 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

RedPic · « **Respuesta #6 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 ..

El PHP llama a sus funciones PHP con:

Código: PHP

draw_TitleBar('This One is  Gray-Blue ',  'grayblue','35%');
          draw_TitleBar('This One is  Red (Type 1)','red1','45%');
          draw_TitleBar('This One is  Red (Type 2)','red2','55%');
          draw_TitleBar('This One is  Red (Type 3)','red3','65%');
          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

/* Muestra un TitleBar */
    function draw_TitleBar($title, $subclass, $witdh='75%', $center=true){
      $content=insert_TitleBar($title,$subclass,$witdh,$center);
      echo $content;
    }
 
    /* Genera un TitleBar */
    function insert_TitleBar($title, $subclass, $witdh='75%', $center=true){
                
     $ret='';
     if($center){
       $ret.='
       <div>
        <center>
      ';
     }
     $localWidth=''; 
     if($witdh!=''){
       $localWidth='width="'.$witdh.'"';
     }
     $tableclass    ='titlebartable';
     $tabletdlclass ='titlebartdl tbtdl'.$subclass;
     $tabletdcclass ='titlebartdc tbtdc'.$subclass;
     $tabletdrclass ='titlebartdr tbtdr'.$subclass;
     $ret.='
     <table class="'.$tableclass.'" '.$localWidth.'>
       <tr> 
         <td class="'.$tabletdlclass.'" ></td>
         <td class="'.$tabletdcclass.'" >'.$title.'</td>
         <td class="'.$tabletdrclass.'" ></td>
       </tr>
     </table>
     ';
     if($center){
       $ret.='
       </center>
      </div>
       ';
     }
     return $ret;       
   }

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

<div>
 <center>
  <table class="titlebartable" width="35%">
   <tr> 
    <td class="titlebartdl tbtdlgrayblue" ></td>
    <td class="titlebartdc tbtdcgrayblue" >This One is  Gray-Blue </td>
    <td class="titlebartdr tbtdrgrayblue" ></td>
   </tr>
  </table>
 </center>
</div>

Y por último el CSS que realmente dibuja el titular:

Código: CSS

.titlebartable{
        border-collapse:collapse;
        border-style:none;
        border-color:#111111;
        padding: 0px 0px 0px 0px; 
}
.titlebartdl{
        width: 25px;
        height: 27px;
        text-align: right;      
}
.titlebartdc{
        font-style: normal;
        font-weight: bold;
        text-align: left;
        vertical-align: middle; 
        color: #ffffff;
}
.titlebartdr{
        width: 45px;
        height: 27px;
        text-align: left;       
}
 
.tbtdlgrayblue{ background-image: url('/common/images/boxes/grayblue/sbar_l_grayblue.gif'); }
.tbtdcgrayblue{ background-image: url('/common/images/boxes/grayblue/sbar_bg_grayblue.gif'); background-color : #90acc7;}
.tbtdrgrayblue{ background-image: url('/common/images/boxes/grayblue/sbar_r_grayblue.gif'); }
 
.tbtdlred1{ background-image: url('/common/images/boxes/red1/sbar_l_red1.gif'); }
.tbtdcred1{ background-image: url('/common/images/boxes/red1/sbar_bg_red1.gif'); background-color : #fc0204; }
.tbtdrred1{ background-image: url('/common/images/boxes/red1/sbar_r_red1.gif'); }
 
.tbtdlred2{ background-image: url('/common/images/boxes/red2/sbar_l_red2.gif'); }
.tbtdcred2{ background-image: url('/common/images/boxes/red2/sbar_bg_red2.gif'); background-color : #c40204; }
.tbtdrred2{ background-image: url('/common/images/boxes/red2/sbar_r_red2.gif'); }
 
.tbtdlred3{ background-image: url('/common/images/boxes/red3/sbar_l_red3.gif'); }
.tbtdcred3{ background-image: url('/common/images/boxes/red3/sbar_bg_red3.gif'); background-color : #550000; }
.tbtdrred3{ background-image: url('/common/images/boxes/red3/sbar_r_red3.gif'); }
 
.tbtdlyellow1{ background-image: url('/common/images/boxes/yellow1/sbar_l_yellow1.gif'); }
.tbtdcyellow1{ background-image: url('/common/images/boxes/yellow1/sbar_bg_yellow1.gif'); background-color : #ffff00; color : #ff0000;}
.tbtdryellow1{ background-image: url('/common/images/boxes/yellow1/sbar_r_yellow1.gif'); }

La verdad es que me encanta esta forma de hacer las cosas.

PalitroqueZ · « **Respuesta #7 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.

RedPic · « **Respuesta #8 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

TODOPIC

Autor Tema: HTML, PHP y una diferencia inexplicable entre Firefox e IExplorer (Leído 3333 veces)

RedPic

HTML, PHP y una diferencia inexplicable entre Firefox e IExplorer

RedPic

Re: HTML, PHP y una diferencia inexplicable entre Firefox e IExplorer

Nocturno

Re: HTML, PHP y una diferencia inexplicable entre Firefox e IExplorer

xocas

Re: HTML, PHP y una diferencia inexplicable entre Firefox e IExplorer

RedPic

Re: HTML, PHP y una diferencia inexplicable entre Firefox e IExplorer

xocas

Re: HTML, PHP y una diferencia inexplicable entre Firefox e IExplorer

RedPic

Re: HTML, PHP y una diferencia inexplicable entre Firefox e IExplorer

PalitroqueZ

Re: HTML, PHP y una diferencia inexplicable entre Firefox e IExplorer

RedPic

Re: HTML, PHP y una diferencia inexplicable entre Firefox e IExplorer