title: Website acting strange in Safari
body: <p>I am working on a site/mockup for someone and I have finish it and was testing to make sure it works across several browsers. It works fine in Chrome and Opera, but I was surprised to see that in Safari, every thing is messed up. I don't even know what is wrong, it just looks weird. The website is here: <a href="http://addisonbean.com/site/" rel="nofollow">http://addisonbean.com/site/</a>. Also, when I uploaded to my server, the heading in the footer that says "Find Us" got moved down, and to the left, even in Chrome.</p>
  
  <p>I'd appreciate any help. Here is the source anyone who wants that:</p>
  
  <p>index.html</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
  &lt;meta charset="UTF-8"&gt;
  &lt;title&gt;WEARWELL&lt;/title&gt;
  &lt;link rel="stylesheet" href="css/style.css"&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;header&gt;
      &lt;div id="sub-header"&gt;
          &lt;div class="top"&gt;
              &lt;div id="sub-top"&gt;
                  &lt;input type="text" placeholder="Search by keyword or product number"&gt;
                  &lt;span id="search" class="red-gradient"&gt;
                      &lt;input type="submit" value=""&gt;
                  &lt;/span&gt;
                  &lt;ul class="red-gradient" id="top-nav"&gt;
                      &lt;li&gt;Language&lt;/li&gt;
                      &lt;li id="arrow"&gt;&lt;/li&gt;
                      &lt;li&gt;Where to Buy&lt;/li&gt;
                      &lt;li&gt;Login&lt;/li&gt;
                      &lt;li&gt;0 Items in RFQ Cart&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
              &lt;span class="clearfix"&gt;&lt;/span&gt;
          &lt;/div&gt;
  
          &lt;nav id="pages"&gt;
              &lt;h1&gt;&lt;/h1&gt;
              &lt;ul&gt;
                  &lt;li&gt;Products&lt;/li&gt;
                  &lt;li id="current"&gt;Resources&lt;/li&gt;
                  &lt;li&gt;About&lt;/li&gt;
                  &lt;li&gt;Contact&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/nav&gt;
  
          &lt;h2 id="page-title"&gt;Resources&lt;/h2&gt;
  
      &lt;/div&gt;
  &lt;span class="clearfix"&gt;&lt;/span&gt;
  &lt;/header&gt;
  
  &lt;section&gt;
      &lt;div id="current-page"&gt;Home &gt; &lt;b&gt;Resources&lt;/b&gt;&lt;/div&gt;
  
      &lt;h3&gt;Lorem Ispum Dolor&lt;/h3&gt;
      &lt;nav id="links"&gt;
          &lt;li&gt;Wearwell Warrenty PDF&lt;/li&gt;
          &lt;li&gt;Maintenance &amp;amp; Upkeep Guide&lt;/li&gt;
          &lt;li&gt;Chemical Resistance Guide&lt;/li&gt;
          &lt;li&gt;Installation Guide&lt;/li&gt;
          &lt;li&gt;2013 PDF Catalog&lt;/li&gt;
          &lt;li&gt;Frequently Asked Questions&lt;/li&gt;
          &lt;span class="clearfix"&gt;&lt;/span&gt;
      &lt;/nav&gt;
  
      &lt;h3&gt;Amet Lacinia Nec Hendrer&lt;/h3&gt;
      &lt;p id="info"&gt;Aenean rhoncus, urna quis faucibus cursus, nunc leo rhoncus velit, vitae aliquam justo lectus eu nunc. Ut elit massa, commodo eget blandit eu, consectetur quis neque. Fusce consectetur libero quis velit mattis dignissim. Sed nibh dui, lacinia nec hendrer vitae turpis.&lt;/p&gt;
  &lt;/section&gt;
  
  &lt;h3 id="bottom"&gt;
      We develop working surfaces for industrial athletes
  &lt;/h3&gt;
  
  &lt;footer&gt;
      &lt;div id="footer-center"&gt;
          &lt;table&gt;
              &lt;tbody&gt;
                  &lt;tr&gt;
                      &lt;th&gt;Products&lt;/th&gt;
                      &lt;th&gt;Resources&lt;/th&gt;
                      &lt;th&gt;About Us&lt;/th&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td&gt;ErgoDeck&lt;/td&gt;
                      &lt;td&gt;Warranty&lt;/td&gt;
                      &lt;td&gt;Capabilities&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td&gt;Rejuvenator&lt;/td&gt;
                      &lt;td&gt;Maintenance Guide&lt;/td&gt;
                      &lt;td&gt;News&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td&gt;Diamond Plate&lt;/td&gt;
                      &lt;td&gt;Chemical Resistance Guide&lt;/td&gt;
                      &lt;td&gt;Innovation&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td&gt;Grit Shield&lt;/td&gt;
                      &lt;td&gt;Installation Guide&lt;/td&gt;
                      &lt;td&gt;Request a Demo&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td&gt;Rover&lt;/td&gt;
                      &lt;td&gt;Download Catalog&lt;/td&gt;
                      &lt;td&gt;Request A Site Survey&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td&gt;Invision&lt;/td&gt;
                      &lt;td&gt;Videos&lt;/td&gt;
                      &lt;td&gt;Contact Us&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td&gt;Fit Kits&lt;/td&gt;
                      &lt;td&gt;&lt;/td&gt;
                      &lt;td&gt;Terms and Conditions&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td&gt;&lt;/td&gt;
                      &lt;td&gt;&lt;/td&gt;
                      &lt;td&gt;Legal&lt;/td&gt;
                  &lt;/tr&gt;
              &lt;/tbody&gt;
          &lt;/table&gt;
          &lt;aside&gt;
              &lt;span id="line"&gt;
                  &lt;img src="img/line.png" alt=""&gt;
              &lt;/span&gt;
              &lt;span id="content"&gt;
                  &lt;h4&gt;Find Us&lt;/h4&gt;
                  &lt;p class="footer-info"&gt;
                      Wearwell Inc.
                  &lt;/p&gt;
                  &lt;p class="footer-info"&gt;
                      199 Threet Industrial Road &lt;br&gt;
                      Smyrna, Tennessee 37167
                  &lt;/p&gt;
                  &lt;p class="footer-info"&gt;
                      Email: &lt;a href="mailto:floors@wearwell.com"&gt;floors@wearwell.com&lt;/a&gt;
                  &lt;/p&gt;
  
                  &lt;div id="icons"&gt;
                      &lt;a href=""&gt;&lt;/a&gt;
                      &lt;a href=""&gt;&lt;/a&gt;
                      &lt;a href=""&gt;&lt;/a&gt;
                      &lt;a href=""&gt;&lt;/a&gt;
                      &lt;a href=""&gt;&lt;/a&gt;
                  &lt;/div&gt;
              &lt;/span&gt;
          &lt;/aside&gt;
          &lt;span class="clearfix"&gt;&lt;/span&gt;
      &lt;/div&gt;
  &lt;/footer&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>css/style.css</p>
  
  <pre><code>* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  }
  
  body {
  margin: 0;
  font-family: helvetica;
  background: url('../img/bg.jpg');
  }
  
  .clearfix:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0;
  }
  *:first-child+html .clearfix { zoom: 1; }
  
  .red-gradient {
  background: #c33221;
  background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPHJhZGlhbEdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iNzUlIj4KICAgIDxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiNjMzMyMjEiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjOGUyNDE4IiBzdG9wLW9wYWNpdHk9IjEiLz4KICA8L3JhZGlhbEdyYWRpZW50PgogIDxyZWN0IHg9Ii01MCIgeT0iLTUwIiB3aWR0aD0iMTAxIiBoZWlnaHQ9IjEwMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
  background: -moz-radial-gradient(center, ellipse cover,  #c33221 0%, #8e2418 100%);
  background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#c33221), color-stop(100%,#8e2418)); 
  background: -webkit-radial-gradient(center, ellipse cover,  #c33221 0%,#8e2418 100%);
  background: -o-radial-gradient(center, ellipse cover,  #c33221 0%,#8e2418 100%);
  background: -ms-radial-gradient(center, ellipse cover,  #c33221 0%,#8e2418 100%);
  background: radial-gradient(ellipse at center,  #c33221 0%,#8e2418 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c33221', endColorstr='#8e2418',GradientType=1 );
  color: white;
  display: inline-block;
  }
  
  
  header {
  background: url('../img/header.jpg');
  color: white;
  -webkit-box-shadow: 2px 0 6px black;
  -moz-box-shadow: 2px 0 6px black;
  box-shadow: 2px 0 6px black;
  }
  
  #sub-header {
      width: 1200px;
      margin: 0 auto;
  }
  
  
      .top {
          position: relative;
          right: 0;
          padding-bottom: 20px;
          font-size: 12px;
          font-weight: 200;
      }
  
          .top input[type=text] {
              margin: 0 1px 0 0;
              border: none;
              padding: 12px;
              height: 28px;
              width: 230px;
              background: rgba(255, 255, 255, .7);
              float: left;
          }
  
              .top input[type=text]::-webkit-input-placeholder {
                  color: black;
  
              }
  
              .top input[type=text]::-ms-input-placeholder {
                  color: black;
              }
  
              .top input[type=text]::-moz-placeholder {
                  color: black;
              }
  
          span#search {
              width: 28px;
              height: 28px;
              padding: 12px;
              float: left;
              margin-right: 5px;
  
          }
  
          .top input[type=submit] {
              border: none;
              background: url('../img/search.png') 50% 50% no-repeat;
              width: 15px;
              height: 15px;
              padding: 0px;
              float: left;
              position: relative;
              top: -7.5px;
              left: -7.5px;
          }
  
      #top-nav {
          height: 28px;
          list-style: none;
          padding: 0;
          margin: 0;
      }
  
          #sub-top {
              float: right;
          }
  
              #top-nav li {
                  list-style: none; /* for IE8 */
                  display: inline-block;
                  height: 28px;
                  float: left;
                  padding: 8px;
                  border-left: 1px solid black;
              }
  
              #top-nav li:first-child {
                  border: none;
              }
  
              #arrow {
                  background: url('../img/nav-arrow.png') 50% 50% no-repeat;
                  width: 28px;
                  margin: 0;
              }
  
      nav#pages {
          background: rgba(0, 0, 0, .8);
          height: 64px;
          margin-bottom: 80px;
      }
  
          nav#pages h1 {
              background: url('../img/logo.png') 50% 50% no-repeat;
              width: 340px;
              height: inherit;
              margin: 0;
              display: inline-block;
          }
  
          nav#pages ul {
              list-style: none;
              text-transform: uppercase;
              float: right;
              padding: 0;
              margin: 0;
              height: inherit;
              display: inline-block;
          }
  
              nav#pages li {
                  list-style: none; /* for IE8 */
                  display: inline-block;
                  padding: 20px;
                  height: inherit;
                  line-height: 34px;
              }
  
              nav#pages li#current {
                  background: #cc3423;
              }
  
      #page-title {
          float: right;
          background: rgba(0, 0, 0, .8);
          text-align: left;
          padding: 30px;
          padding-left: 40px;     
          padding-right: 375px;
          text-transform: uppercase;
          margin: 75px 0;
      }
  
  section {
  background: white;
  width: 1220px;
  margin: 0 auto;
  padding: 15px 25px 100px;
  -webkit-box-shadow: 0 3px 10px #555;
  -moz-box-shadow: 0 3px 10px #555;
  box-shadow: 0 3px 10px #555;
  }
  
  #current-page {
      font-size: 12px;
  }
  
  section h3 {
      text-transform: uppercase;
      margin: 25px 15px 10px;
  }
  
  nav#links {
      list-style: none;
      margin: 0 auto;
      width: 1170px;
      color: #eb6852;
      font-weight: bold;
      font-size: 20px;
      text-transform: uppercase;
  }
  
      nav#links li {
          background: #eaeaea;
          background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPHJhZGlhbEdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iNzUlIj4KICAgIDxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiNlYWVhZWEiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjYjRiNGI0IiBzdG9wLW9wYWNpdHk9IjEiLz4KICA8L3JhZGlhbEdyYWRpZW50PgogIDxyZWN0IHg9Ii01MCIgeT0iLTUwIiB3aWR0aD0iMTAxIiBoZWlnaHQ9IjEwMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
          background: -moz-radial-gradient(center, ellipse cover, #eaeaea 0%, #b4b4b4 100%);
          background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#eaeaea), color-stop(100%,#b4b4b4));
          background: -webkit-radial-gradient(center, ellipse cover, #eaeaea 0%,#b4b4b4 100%);
          background: -o-radial-gradient(center, ellipse cover, #eaeaea 0%,#b4b4b4 100%);
          background: -ms-radial-gradient(center, ellipse cover, #eaeaea 0%,#b4b4b4 100%);
          background: radial-gradient(ellipse at center, #eaeaea 0%,#b4b4b4 100%);
          filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eaeaea', endColorstr='#b4b4b4',GradientType=1 );
  
          line-height: 75px;
          width: 382px;
          margin: 4px;
          text-align: center;
          float: left;
          height: 75px;
      }
  
      nav#links li:nth-child(5) {
          background: #c33221;
          background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPHJhZGlhbEdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iNzUlIj4KICAgIDxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiNjMzMyMjEiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjOGUyNDE4IiBzdG9wLW9wYWNpdHk9IjEiLz4KICA8L3JhZGlhbEdyYWRpZW50PgogIDxyZWN0IHg9Ii01MCIgeT0iLTUwIiB3aWR0aD0iMTAxIiBoZWlnaHQ9IjEwMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
          background: -moz-radial-gradient(center, ellipse cover,  #c33221 0%, #8e2418 100%);
          background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#c33221), color-stop(100%,#8e2418)); 
          background: -webkit-radial-gradient(center, ellipse cover,  #c33221 0%,#8e2418 100%);
          background: -o-radial-gradient(center, ellipse cover,  #c33221 0%,#8e2418 100%);
          background: -ms-radial-gradient(center, ellipse cover,  #c33221 0%,#8e2418 100%);
          background: radial-gradient(ellipse at center,  #c33221 0%,#8e2418 100%);
          filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c33221', endColorstr='#8e2418',GradientType=1 );
          color: white;
      }
  
  #info {
      margin-left: 15px;
  }
  
  h3#bottom {
  text-align: center;
  color: #4d4d4d;
  font-size: 40px;
  font-weight: 200;
  }
  
  footer {
  background: url('../img/footer.jpg');
  color: white;
  }
  
  #footer-center {
      margin: 0 auto;
      padding: 30px 0;
      width: 809px;
  }
  
      footer table {
          float: left;
      }
  
          footer tr {
              text-align: right;
          }
  
              footer td {
                  padding: 4px;
                  padding-left: 30px;
                  padding-right: none;
                  font-size: 15px;
              }
  
              footer th {
                  text-transform: uppercase;
                  padding: 7px;
                  padding-left: 30px;
                  padding-right: none;
              }
  
      aside {
          float: left;
      }
  
          #line {
              margin: 0 35px;
              display: inline-block;
              float: left;
          }
  
          aside #content {
              float: left;
          }
  
          aside h4 {
              text-transform: uppercase;
              margin: 7px;
          }
  
          aside p.footer-info {
              margin: 7px;
              font-size: 15px;
              line-height: 20px;
          }
  
              aside p.footer-info a {
                  color: #cc3524;
                  text-decoration: none;
              }
  
              #icons a {
                  height: 34px;
                  width: 37px;
                  display: inline-block;
                  background-repeat: no-repeat;
              }
  
              #icons a:nth-child(1) {
                  background-image: url('../img/icons/fb.png');
              }
  
              #icons a:nth-child(2) {
                  background-image: url('../img/icons/google.png');
              }
  
              #icons a:nth-child(3) {
                  background-image: url('../img/icons/twitter.png');
              }
  
              #icons a:nth-child(4) {
                  background-image: url('../img/icons/youtube.png');
              }
  
              #icons a:nth-child(5) {
                  background-image: url('../img/icons/in.png');
              }
  </code></pre>