CODEWITHSUNDEEP
html
Adam Zacke Erlandsson
Adam Zacke Erlandsson

Reputation: 117

Different margins between Firefox and Chrome

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

Upvotes: 3

Views: 15328

Answers (2)

Giorgio25b
Giorgio25b

Reputation: 416

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

Upvotes: 4

Juan Guerrero
Juan Guerrero

Reputation: 613

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

Upvotes: 0

Related Questions