Question

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:-
in firefox

In chrome

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;}  

and there are its Fiddle

Answer 1

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;
}