title: layout doesn't render well in different browsers
body: <p>I am making a layout for a website. It's still in development anyway it is displayed good enough on Google Chrome and Opera but not on Firefox and Internet Explorer. In Chrome it looks okay but maybe the positioning isn't done correctly anyway. Can you help me to fix it? </p>
  
  <p><strong>HTML body</strong></p>
  
  <pre><code>&lt;div id="wrapper"&gt;
  &lt;header id="top-header"&gt;
  &lt;div id="logo1"&gt;
  scritta
  &lt;img src="CS-G-100.png" class="logo" /&gt;
  &lt;/div&gt;
  &lt;nav id="top-nav"&gt;
  &lt;ul&gt;
  &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;Pulsante2&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;Pulsante3&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;Pulsante4&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;Pulsante5&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/nav&gt;
  &lt;div id="kenburns" class="slideshow"&gt;
      &lt;img src="images/1.jpg" alt="1"&gt;
  &lt;/div&gt;
  &lt;/header&gt;
  &lt;section id="main-section"&gt;
  &lt;aside id="left"&gt;
  &lt;/aside&gt;
  &lt;article id="main-content"&gt;
  &lt;/article&gt;
  &lt;aside id="right"&gt;
  &lt;/aside&gt;
  &lt;footer id="the-footer"&gt;
  &lt;div id="center-footer"&gt;
  Centro fisioterapico San Giusto Via Romana Est 78/2 Porcari p. iva : 01532540463
  &lt;/div&gt;
  &lt;/footer&gt;
  &lt;/section&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>body {
  
  width:100%;
  margin:18px 20px 20px 20px;
  display: box;                     /* As specified */
  display: -moz-box;                /* Mozilla */
  display: -webkit-box;             /* WebKit */
  box-pack: center;                  /* As specified */
  -moz-box-pack: center;             /* Mozilla */
  -webkit-box-pack: center;          /* WebKit */
  background-attachment: fixed;
  background-image: url(sfondo-6.png);
  background-repeat: repeat;
  }
  
  #wrapper {
  border: 1px solid black;
  width:1024px;
  height:768px;
  padding: 20px;
  background: rgb(238,238,238); /* Old browsers */
  background: -moz-linear-gradient(-45deg, rgba(238,238,238,1) 0%, rgba(238,238,238,1)  100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, right bottom, color- stop(0%,rgba(238,238,238,1)), color-stop(100%,rgba(238,238,238,1))); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(-45deg, rgba(238,238,238,1) 0%,rgba(238,238,238,1) 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(-45deg, rgba(238,238,238,1) 0%,rgba(238,238,238,1) 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(-45deg, rgba(238,238,238,1) 0%,rgba(238,238,238,1) 100%); /* IE10+ */
  background: linear-gradient(135deg, rgba(238,238,238,1) 0%,rgba(238,238,238,1) 100%); /* W3C */
  
  }
  #top-header {
  position:absolute;
  width:1022px;
  height:234px;
  display:block;
  border:1px solid black; 
  z-index:1;
  background-color:#d2e5e3;
  }
  
  #top-nav {
  position:relative;
  width:700px;
  display:block;
  border:1px solid black;
  top:-119px;
  right:-321px;
  z-index:2;
  background-color:#d2e4e8;
  }
  
  #top-nav li {
  display: inline;
  /* Align children to the horizontal center of this box */
  box-align: center;              /* As specified */
  -moz-box-align: center;         /* Mozilla */
  -webkit-box-align: center;      /* WebKit */
  list-style:none;
  text-align:center;
  width:120px;
  height:25px;
  background:#5DBCD2;
  opacity:0.7;
  border-radius:10px;
  -moz-border-radius:10px;
  -o-border-radius:10px;
  transition:transform 2s, opacity 2s, background 2s;
  -webkit-transition::transform 2s, opacity 2s, background 2s;
  -moz-transition:transform 2s, opacity 2s, background 2s;
  -o--transform 2s, opacity 2s, background 2s;
  }
  
  #top-nav-li:hover {
  transform-rotate:(360deg);
  -webkit-transform:(360deg);
  -moz-transform:rotate(360deg);
  opacity:1px;
  background:#0F3;
  }
  
  #top-nav li {
  display:inline-block;   
  }
  
  #left-nav {
  position:absolute;
  border:1px solid black;
  padding:0px;
  left:0px;
  top:0px;
  z-index:2;
  text-decoration:none;
  
  
  }
  
  #left-nav ul {
  position:relative;
  left:0px;
  display:block;  
  }
  
  #left-nav li {
  margin:0px opx 10px 0px;
  display:block;
  position:relative;
  border-radius:0px 10px 0px 10px;
  -webkit-border-radius:0px 10px 0px 10px;
  -o-border-radius:0px 10px 0px 10px;
  -moz-border-radius:0px 10px 0px 10px;
  -ms-border-radius:0px 10px 0px 10px;
  background-color:#9ED09D;
  transition:opacity 2s;
  -moz-transition:opacity 2s;
  -o-transition:opacity 2s;
  -webkit-transition:opacity 2s;
  }
  
  #left-nav li:hover {
  opacity:1;  
  }
  
  
  #left {
  position:relative;
  float:left;
  border: 1px solid black;
  padding: 20px;
  width:256px;
  height:620px;
  
  }
  
  #right {
  float:left;
  border: 1px solid black;
  padding:20px;
  width:256px;
  height:620px;
  }
  
  
  #main-content {
  float:left;
  border: 1px solid black;
  padding:20px;
  width:386px;
  height:620px;
  }
  
  #the-footer {
  display:table;
  clear:both;
  width:100%;
  height:50px;
  border:1px solid black;
  }
  
  #rollover {
  position:relative;
  top:-112px;
  left:490px;
  border:1px solid black;
  width:500px;
  height:200px;
  background-color:#FFFFFF;
  
  }
  
  #logo1{
  position:relative;
  top:47px;
  left:20px;
  }
  
  .logo {
  
  }
  
  .center-text {
  vertical-align:middle;
  text-align:center;  
  }
  
  #center-footer {
  display:table-cell;
  vertical-align:middle;
  text-align:center;
  margin:0px auto;
  }
  </code></pre>
  
  <p>Here is a screenshot of how it is displayed on Google Chrome: (the best rendering of the 3)
  <img src="https://i.stack.imgur.com/sCocs.png" alt="Google Chrome"></p>
  
  <p>Here is a screenshot of how it is displayed on Firefox:
  <img src="https://i.stack.imgur.com/QBGu3.png" alt="enter image description here">
  <img src="https://i.stack.imgur.com/IxEnh.png" alt="enter image description here"></p>
  
  <p>Here is a screenshot of how it is displayed on Internet Explorer: (better than firefox but not centered like in Google Chrome)</p>
  
  <p><img src="https://i.stack.imgur.com/RuE3L.png" alt="enter image description here"></p>
  
  <p>I give you the jfiddle:</p>
  
  <p>Here it is with the code:</p>
  
  <p><a href="http://jsfiddle.net/Gwpbk/" rel="nofollow noreferrer">http://jsfiddle.net/Gwpbk/</a></p>
  
  <p>And here the full screen view:</p>
  
  <p><a href="http://jsfiddle.net/Gwpbk/embedded/result/" rel="nofollow noreferrer">http://jsfiddle.net/Gwpbk/embedded/result/</a></p>
  
  <p>I thank you in advance.</p>