Databases
StackOverflow2013
Postsdbo
PODifferent margins between Firefox and Chrome
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PODifferent margins between Firefox and Chrome
    text
    copied!<p>The margins with a div box is different between Chrome and Firefox. I have printed one picture with chrome, and one with firefox.</p> <p>css:</p> <pre><code>.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></pre> <p>Code: </p> <pre><code>&lt;div class="maincontent"&gt; &lt;div class="maintopcorner"&gt; &lt;img src="Images/corners/topcorner.png" /&gt; &lt;/div&gt; &lt;div class="maincontentwrap"&gt; &lt;center&gt; &lt;div class="welcometext"&gt; &lt;img src="Images/thu_artist_pic.png" /&gt; &lt;/div&gt; &lt;/br&gt;&lt;/br&gt; &lt;table class="artister"&gt; &lt;tr&gt; &lt;td&gt;&lt;img src="Images/artists/fairbank.png" /&gt; &lt;table class="fairbank"&gt; &lt;tr&gt; &lt;td&gt; &lt;a href="#"&gt;&lt;img src="Images/socialsbuttons/soundcloud.png" /&gt; &lt;/a&gt; &lt;/td&gt; &lt;td&gt; &lt;a href="#"&gt;&lt;img src="Images/socialsbuttons/fb.png" /&gt; &lt;/a&gt; &lt;/td&gt; &lt;td&gt; &lt;a href="#"&gt;&lt;img src="Images/socialsbuttons/twitter.png" /&gt; &lt;/a&gt; &lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; &lt;/td&gt; &lt;td&gt; &lt;img src="Images/artists/devultra.png" /&gt; &lt;table class="fairbank"&gt; &lt;tr&gt; &lt;td&gt; &lt;a href="#"&gt;&lt;img src="Images/socialsbuttons/soundcloud.png" /&gt; &lt;/a&gt; &lt;/td&gt; &lt;td&gt; &lt;a href="#"&gt;&lt;img src="Images/socialsbuttons/fb.png" /&gt; &lt;/a&gt; &lt;/td&gt; &lt;td&gt; &lt;a href="#"&gt;&lt;img src="Images/socialsbuttons/twitter.png" /&gt; &lt;/a&gt; &lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; &lt;/td&gt; &lt;td&gt; &lt;img src="Images/artists/kryptex.png" /&gt; &lt;table class="fairbank"&gt; &lt;tr&gt; &lt;td&gt; &lt;a href="#"&gt;&lt;img src="Images/socialsbuttons/soundcloud.png" /&gt; &lt;/a&gt; &lt;/td&gt; &lt;td&gt; &lt;a href="#"&gt;&lt;img src="Images/socialsbuttons/fb.png" /&gt; &lt;/a&gt; &lt;/td&gt; &lt;td&gt; &lt;a href="#"&gt;&lt;img src="Images/socialsbuttons/twitter.png" /&gt; &lt;/a&gt; &lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; &lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt; &lt;img src="Images/artists/toltex.png" /&gt; &lt;table class="fairbank"&gt; &lt;tr&gt; &lt;td&gt; &lt;a href="#"&gt;&lt;img src="Images/socialsbuttons/soundcloud.png" /&gt; &lt;/a&gt; &lt;/td&gt; &lt;td&gt; &lt;a href="#"&gt;&lt;img src="Images/socialsbuttons/fb.png" /&gt; &lt;/a&gt; &lt;/td&gt; &lt;td&gt; &lt;a href="#"&gt;&lt;img src="Images/socialsbuttons/twitter.png" /&gt; &lt;/a&gt; &lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; &lt;/td&gt; &lt;td&gt; &lt;img src="Images/artists/dubtherapy.png" /&gt; &lt;table class="fairbank"&gt; &lt;tr&gt; &lt;td&gt; &lt;a href="#"&gt;&lt;img src="Images/socialsbuttons/soundcloud.png" /&gt; &lt;/a&gt; &lt;/td&gt; &lt;td&gt; &lt;a href="#"&gt;&lt;img src="Images/socialsbuttons/fb.png" /&gt; &lt;/a&gt; &lt;/td&gt; &lt;td&gt; &lt;a href="#"&gt;&lt;img src="Images/socialsbuttons/twitter.png" /&gt; &lt;/a&gt; &lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; &lt;/td&gt; &lt;td&gt; &lt;img src="Images/artists/dubwood.png" /&gt; &lt;table class="fairbank"&gt; &lt;tr&gt; &lt;td&gt; &lt;a href="#"&gt;&lt;img src="Images/socialsbuttons/soundcloud.png" /&gt; &lt;/a&gt; &lt;/td&gt; &lt;td&gt; &lt;a href="#"&gt;&lt;img src="Images/socialsbuttons/fb.png" /&gt; &lt;/a&gt; &lt;/td&gt; &lt;td&gt; &lt;a href="#"&gt;&lt;img src="Images/socialsbuttons/twitter.png" /&gt; &lt;/a&gt; &lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; &lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; &lt;table class="artistdubber"&gt; &lt;tr&gt; &lt;td&gt; &lt;img src="Images/artists/dubber.png" /&gt; &lt;table class="fairbank"&gt; &lt;tr&gt; &lt;td&gt; &lt;a href="#"&gt;&lt;img src="Images/socialsbuttons/soundcloud.png" /&gt; &lt;/a&gt; &lt;/td&gt; &lt;td&gt; &lt;a href="#"&gt;&lt;img src="Images/socialsbuttons/fb.png" /&gt; &lt;/a&gt; &lt;/td&gt; &lt;td&gt; &lt;a href="#"&gt;&lt;img src="Images/socialsbuttons/twitter.png" /&gt; &lt;/a&gt; &lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; &lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; &lt;div class="artist1"&gt; &lt;a href="#"&gt; cryphead &lt;/a&gt; &lt;/br&gt;&lt;/br&gt; &lt;a href="#"&gt; eudorix &lt;/a&gt; &lt;/br&gt;&lt;/br&gt; &lt;a href="#"&gt; Witrix &lt;/a&gt; &lt;/div&gt; &lt;div class="artist2"&gt; &lt;a href="#"&gt; Oskri &lt;/a&gt; &lt;/br&gt;&lt;/br&gt; &lt;a href="#"&gt; Topki &lt;/a&gt; &lt;/br&gt;&lt;/br&gt; &lt;a href="#"&gt; Lök &lt;/a&gt; &lt;/div&gt; &lt;/center&gt; &lt;center&gt; &lt;div class="mainbottomcorner"&gt; &lt;img src="Images/corners/bottomcorner.png" /&gt; &lt;/div&gt; &lt;/center&gt; &lt;/div&gt; &lt;/div&gt; &lt;center&gt; &lt;div class="footer"&gt; &lt;div class="copyright"&gt; &lt;p&gt; All content copyright THU Records 2013 © All Rights Reserved. &lt;/p&gt; &lt;/div&gt; &lt;div class="genrelinks"&gt; &lt;a href="#" class="link"&gt; Dubstep &lt;/a&gt; &amp;nbsp; | &amp;nbsp; &lt;a href="#" class="musiclink"&gt; Hard Style &lt;/a&gt; &amp;nbsp; | &amp;nbsp; &lt;a href="#" class="musiclink"&gt; Glitch Hop &lt;/a&gt; &amp;nbsp; | &amp;nbsp; &lt;a href="#" class="musiclink"&gt; Chillstep &lt;/a&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="codebyadam"&gt; &lt;p&gt; Design by HUS0_o, Coded by zackÉ&lt;/p&gt; &lt;/div&gt; &lt;/center&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>Firefox:</p> <p><a href="http://imageshack.us/a/img834/5770/jnz.png" rel="nofollow">http://imageshack.us/a/img834/5770/jnz.png</a></p> <p>Chrome:</p> <p><a href="http://imageshack.us/a/img18/2084/mh7.png" rel="nofollow">http://imageshack.us/a/img18/2084/mh7.png</a></p> <p>Could please someone explain why is this happening? Thanks</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload