title: Anomaly on CSS code, varying positions regarding browser/resolution
body: <p>I'm using this same CSS code on a website since months. And it works perfectly, keeping image and text positions regardless of browser and screen resolution.</p>
  
  <p>I have now just moved this same identical code into another site, and it looks it's giving issues with CSS since both browsers and screen res is moving img and text in different positions.</p>
  
  <p>May you please report me the error I may have typed in the code? Thx.</p>
  
  <pre><code>.up { display: block; position: relative; margin: auto; }
  
  .left { display: inline-block; position:absolute; top: 75%; left: 0; }
  
  .right { display: inline-block; position:absolute; top: 75%; left:71.35%; }
  
  .down { display: inline-block; position:absolute; top: 2223%; left: 0; }
  
  .middle { display: inline-block; position:absolute; top: 830%; left: 1.5%; }
  
  .logo { display: inline-block; position:absolute; top: 30%; left: 21.5%; }
  
  .folder { display: inline-block; position:absolute; top: 120%; left: 3%; }
  
  .title { display: block; font: 1.3rem/1.0 Verdana; position: absolute; top: 340%; left: 23.6%; }
  
  .text { display: block; font: 1.05rem/1.2 Arial; color: white; position: absolute; top: 1010%; left: 2.3%; }
  
  .moretext { display: block; font: 0.95rem/1.1 Tahoma; position: absolute; top: 1280%; left: 2.75%; }
  
  .signup { display: block; font: 1.2rem/0.7 Arial Black; color: red; position: absolute; top: 720%; left: 32%; }
  
  .object1 { display: inline-block; position:absolute; top: 305px; left: 32px; }
  
  .object2 { display: inline-block; position:absolute; top: 305px; left: 171px; }
  
  .object3 { display: inline-block; position:absolute; top: 305px; left: 309px; }
  
  .object4 { display: inline-block; position:absolute; top: 305px; left: 448px; }
  </code></pre>