diferentes navegadores dan resultados diferentes para una página web

I am working on a website and i have designed a page but it is giving different results in chrome and firefox. The layout which i want, is giving correctly in chrome but firefox is giving different result..

I also want that all tables should start from top like in firefox they are appearing but chrome is not giving proper result

Please help me to get rid of this problem...I am attaching screen shots as:- enter image description here en Firefox Image in chrome

en cromo

My html file code is as:

  <div id="page">
    <div class="container" >         
      <div style="overflow:hidden;">
            <table width="44%" >
            <tr>
            <th>Todays To-Do</th>
            </tr>
            <tr><td>T-shirts.xls</td></tr>
            <tr><td>Caps.xls</td></tr>
            <tr><td>Mugs.xls</td></tr>
            <tr><td>Pens.xls</td></tr>
            <tr><td>xxx</td></tr>
            <tr><td>xxx</td></tr>
            <tr><td>xxx</td></tr>
            </table>
            <table width="27%" >
            <tr>
            <th>Vendor Contact List</th>
            </tr>
            <tr><td>T-shirts.xls</td></tr>
            <tr><td>Caps.xls</td></tr>
            <tr><td>Mugs.xls</td></tr>
            <tr><td>Pens.xls</td></tr>
            <tr><td>xxx</td></tr>
            </table>
            <table width="27%">
            <tr>
            <th>Price list</th>
            </tr>
            <tr><td>T-shirts.xls</td></tr>
            <tr><td>Caps.xls</td></tr>
            <tr><td>Mugs.xls</td></tr>
            <tr><td>Pens.xls</td></tr>
            <tr><td>xxx</td></tr>
            </table>
            </br>
            </div>
            <table width="45.56%" >
            <tr>
            <th>Add new+</th>
            </tr>
            </table>
              </div>
           </div>
       </div>

My css including in this are as:

body 
{

     background: url(../images/bg-main.jpg)top repeat-x;
     text-align:left;
     color:#333;
     font-family:Arial, Helvetica, sans-serif;
}

   #maincontainer-02 
   {
       background:#ffffff;
       border-left:1px solid #dedede!important;
       border-right:1px solid #dedede!important;
       margin-top:5px;
   }

    table
    {
        display:inline;
        border-collapse: collapse;
        border-spacing: 0px;
    }

    td
    {
        border:solid 1px #bfbfbf;
    }

    th
    {
        background-color:#bfbfbf;
        border:solid 1px black;
        text-align:left;
        font-family:"Times New Roman", Times, serif;
        font-size:1.875em;
    }
    *
    {
        margin: 0;
        padding: 0;
    }

    #content
    {
        width:100%;
    }

    pre
    {
        border:3px solid #ccc;
        padding:5px;
        font-size:12px;
        font-family:arial;
    }
    .bold{font-weight:bold;}
    .blue{color:blue;}
    .red{color:red;}

y there are its Fiddle

preguntado el 12 de junio de 12 a las 10:06

jsFiddle ¡por favor! -

2 Respuestas

Hey used this css for reset your css file 

    html, body, div, span, applet, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    a, abbr, acronym, address, big, cite, code,
    del, dfn, em, img, ins, kbd, q, s, samp,
    small, strike, strong, sub, sup, tt, var,
    b, u, i, center,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td,
    article, aside, canvas, details, embed, 
    figure, figcaption, footer, header, hgroup, 
    menu, nav, output, ruby, section, summary,
    time, mark, audio, video, input[type="checkbox"] {
        margin: 0;
        padding: 0;
        border: 0;
        font-size: 100%;
        font: inherit;
        vertical-align: baseline;
    }
    ol, ul {
        list-style: none;
    }
    img{
        border:0;
        outline:0;
        vertical-align:top;
    }
    a{
        outline:0;
        text-decoration:none;
        display:inline-block;
    }
    table {
        border-collapse: collapse;
        border-spacing: 0;
    }
table tr td{
vertical-align: top;
}

Respondido el 12 de junio de 12 a las 10:06

Thanks..i get the tables are aligning from top now...but can please tell me why ...the structure rendered in firefox not in chrome?? - Neeraj

because every browser some default properties and so than structure rendered . You can used css reset in every projects more in click here meyerweb.com/eric/tools/css/reset - Rohit Azad Malik

try adding a valign=top to your tables.

And in your CSS reset the browser defaults for HTML and body. Like this:

html, body { margin:0; padding:0 }

Respondido el 12 de junio de 12 a las 10:06

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.