Different margins between Firefox and Chrome

Question

The margins with a div box is different between Chrome and Firefox. I have printed one picture with chrome, and one with firefox.

css:

.maincontent{
    margin: 0px auto;
    width: 960px;
    height: 900px;
    border: 1px solid #000;
    margin-top: 50px;
    background-color: #F8F8F8;
    margin-bottom: 50px;
}
.mainbottomcorner{
    margin-top: 87px;
    width: 962px;
    height: 30px;
    margin-bottom: 50px;
}

h1{
    font-weight: 100;
    font-size: 25px;
    font-family:furoreregular;
    color: #5B5B5B;
    margin: 0 auto;
    text-shadow: 1px 2px #C9C9C9;
}
.welcometext{
    margin: 0 auto;
    margin-top: -40px;
}

    .maintopcorner{
        margin-left: -1px;
    }
    .copyright p{
    font-family:Arial, Helvetica, sans-serif;
    color: #9F9F9F;
    font-size: 13px;
    margin-top: 18px;   
    margin-left: -530px;
    }
    .footer{
        height: 50px;
        width: 960px;
        background-color: #353535;
        border: 1px solid #000;
        margin-bottom: 30px;
    }

        .codebyadam p{
    font-family:Arial, Helvetica, sans-serif;
    color: #373737;
    opacity: 0.7;
    font-size: 13px;
    margin-top:-10px;
    }

    .footer a{
        color:#F00;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 13px;
        text-decoration:none;
    }
    .genrelinks{
        margin-left: 600px;
        margin-top: -32px;
    }
    .footer a:hover{
        color:#FFF;
    }
    .artist1{
        margin-left: -570px;
        margin-top: -180px;

    }
        .artist2{
        margin-left: 570px;
        margin-top: -130px;

    }
    .artist1 a{
        font-weight: 100;
        font-size: 25px;
        font-family:furoreregular;
        color: #5B5B5B;
        text-shadow: 1px 2px #C9C9C9;
        text-decoration: none;
    }
    .artist2 a{
        font-weight: 100;
        font-size: 25px;
        font-family:furoreregular;
        color: #5B5B5B;
        text-shadow: 1px 2px #C9C9C9;
        text-decoration: none;
    }
    .artist1 a:hover{
        color:#F00;
    }
    .artist2 a:hover{
        color:#F00;
    }
    table.artister{
        border-spacing: 30px;
        margin-top: -50px;
    }
    table.fairbank img{
        -webkit-transform:scale(1); /*Webkit: Scale down image to 0.8x original size*/
        -moz-transform:scale(1); /*Mozilla scale version*/
        -o-transform:scale(1); /*Opera scale version*/
        -webkit-transition-duration: 0.5s; /*Webkit: Animation duration*/
        -moz-transition-duration: 0.5s; /*Mozilla duration version*/
        -o-transition-duration: 0.5s; /*Opera duration version*/
        opacity: 1; /*initial opacity of images*/       

    }
table.fairbank img:hover{
        -webkit-transform:scale(1.1); /*Webkit: Scale up image to 1.2x original size*/
        -moz-transform:scale(1.1); /*Mozilla scale version*/
        -o-transform:scale(1.1); /*Opera scale version*/
        box-shadow:0px 0px 30px gray; /*CSS3 shadow: 30px blurred shadow all around image*/
        -webkit-box-shadow:0px 0px 30px gray; /*Safari shadow version*/
        -moz-box-shadow:0px 0px 30px gray; /*Mozilla shadow version*/
        opacity: 1;
    }

Code:

<div class="maincontent">
    <div class="maintopcorner">
        <img src="Images/corners/topcorner.png" />
    </div>
    <div class="maincontentwrap">
    <center>
    <div class="welcometext">
        <img src="Images/thu_artist_pic.png" />
    </div>
        </br></br>
        <table class="artister">
        <tr>
        <td><img src="Images/artists/fairbank.png" />
        <table class="fairbank">
            <tr>
            <td> <a href="#"><img src="Images/socialsbuttons/soundcloud.png" /> </a> </td>
            <td> <a href="#"><img src="Images/socialsbuttons/fb.png" /> </a> </td>
            <td> <a href="#"><img src="Images/socialsbuttons/twitter.png" /> </a> </td>
            </tr>
        </table>
        </td>
        <td> <img src="Images/artists/devultra.png" />
        <table class="fairbank">
            <tr>
            <td> <a href="#"><img src="Images/socialsbuttons/soundcloud.png" /> </a> </td>
            <td> <a href="#"><img src="Images/socialsbuttons/fb.png" /> </a> </td>
            <td> <a href="#"><img src="Images/socialsbuttons/twitter.png" /> </a> </td>
            </tr>
        </table>
        </td>
        <td> <img src="Images/artists/kryptex.png" />
        <table class="fairbank">
            <tr>
            <td> <a href="#"><img src="Images/socialsbuttons/soundcloud.png" /> </a> </td>
            <td> <a href="#"><img src="Images/socialsbuttons/fb.png" /> </a> </td>
            <td> <a href="#"><img src="Images/socialsbuttons/twitter.png" /> </a> </td>
            </tr>
        </table>
        </td>
        </tr>
        <tr>
        <td> <img src="Images/artists/toltex.png" />
        <table class="fairbank">
            <tr>
            <td> <a href="#"><img src="Images/socialsbuttons/soundcloud.png" /> </a> </td>
            <td> <a href="#"><img src="Images/socialsbuttons/fb.png" /> </a> </td>
            <td> <a href="#"><img src="Images/socialsbuttons/twitter.png" /> </a> </td>
            </tr>
        </table>
        </td>
        <td> <img src="Images/artists/dubtherapy.png" />
        <table class="fairbank">
            <tr>
            <td> <a href="#"><img src="Images/socialsbuttons/soundcloud.png" /> </a> </td>
            <td> <a href="#"><img src="Images/socialsbuttons/fb.png" /> </a> </td>
            <td> <a href="#"><img src="Images/socialsbuttons/twitter.png" /> </a> </td>
            </tr>
        </table>
        </td>
          <td> <img src="Images/artists/dubwood.png" />
        <table class="fairbank">
            <tr>
            <td> <a href="#"><img src="Images/socialsbuttons/soundcloud.png" /> </a> </td>
            <td> <a href="#"><img src="Images/socialsbuttons/fb.png" /> </a> </td>
            <td> <a href="#"><img src="Images/socialsbuttons/twitter.png" /> </a> </td>
            </tr>
        </table>
        </td>
        </tr>
        </table>
        <table class="artistdubber">
        <tr>
          <td> <img src="Images/artists/dubber.png" />
        <table class="fairbank">
            <tr>
            <td> <a href="#"><img src="Images/socialsbuttons/soundcloud.png" /> </a> </td>
            <td> <a href="#"><img src="Images/socialsbuttons/fb.png" /> </a> </td>
            <td> <a href="#"><img src="Images/socialsbuttons/twitter.png" /> </a> </td>
            </tr>
        </table>
        </td>
        </tr>
        </table>
        <div class="artist1">
            <a href="#"> cryphead </a>
            </br></br>
            <a href="#"> eudorix </a>
            </br></br>
            <a href="#"> Witrix </a>
        </div>
        <div class="artist2">       
            <a href="#"> Oskri </a>
            </br></br>
            <a href="#"> Topki </a>
            </br></br>
            <a href="#"> Lök </a>
        </div>
    </center>

<center>
    <div class="mainbottomcorner">
        <img src="Images/corners/bottomcorner.png" />
    </div>
</center>
</div>

</div>
<center>
<div class="footer">
    <div class="copyright">
        <p> All content copyright THU Records 2013 © All Rights Reserved. </p> 
     </div>
        <div class="genrelinks">
            <a href="#" class="link"> Dubstep </a>
            &nbsp; | &nbsp;
            <a href="#" class="musiclink"> Hard Style </a>
            &nbsp; | &nbsp;
            <a href="#" class="musiclink"> Glitch Hop </a>
            &nbsp; | &nbsp;
            <a href="#" class="musiclink"> Chillstep </a>
        </div>


</div>
<div class="codebyadam">
    <p> Design by HUS0_o, Coded by zackÉ</p>
</div>
</center>
</div>
</body>
</html>

Firefox:

http://imageshack.us/a/img834/5770/jnz.png

Chrome:

http://imageshack.us/a/img18/2084/mh7.png

Could please someone explain why is this happening? Thanks

Answer 1

This does the trick with a Media Query for -webkit-:

/*css declaration generic for firefox and other browsers*/

.main-wrapper .container {
    margin-top: 5px;
}

/*css declaration only for Chrome/Safari*/

@media screen and (-webkit-min-device-pixel-ratio:0) { 
      .main-wrapper .container {
            margin-top: 20px;
      }
}

Answer 2

Probably you have bumped into browser default styles conflicts. Check out this article on this matter and a way to solve it.

In case you didn't know, every browser has its own default 'user agent' stylesheet, that it uses to make unstyled websites appear more legible.

Another way to solve this is using something like normalize.css

Answer 3

Don't adj your webpage just because these jokers say so, nothing wrong with tables. Not everyone has access to the adv software to create all these fancy CSS pages that constantly need adjusting every time you want to change one thing. Firefox is a terrible browser, our web pages all look the same on all browsers outside of Firefox and i'm for one tired of making special exceptions for it so i just tell user not to use FF on our page. You'll drive yourself nuts trying to get everything to look the same from browser to browser.