Website looks different on Mac than PC (using same browser)

For whatever reason, various elements on my site look totally different on Mac than they do on PC. Some are in the wrong place, and some just don't show up at all.

I have validated and closely examined my HTML and CSS and can't seem to identify the issue. Here is a link to screenshots of the site using several major browsers on both Mac and PC. (The most accurate depiction of what the site should look like is shown by Chrome on PC).

Below are the CSS and HTML for the webpage shown in the screenshots:

/* Font reference for IE */  @font-face {      font-family: "Font Awesome";    src: url('../fonts/fontawesome-webfont.eot')  }    @font-face {     font-family: 'Gotham';      src: url('../fonts/gotham-bold.eot')  }    @font-face {     font-family: 'Gotham Ultra';    src: url('../fonts/gotham-ultra.eot')  }    @font-face {    font-family: Din;   src: url('../fonts/din-regular.eot')  }    @font-face {     font-family: "Din Bold";    src: url('../fonts/din-bold.eot')  }    /* Font reference for most other browsers */  @font-face {      font-family: "Font Awesome";    src: url('../fonts/fontawesome-webfont.woff')  }    @font-face {    font-family: 'Gotham';      src: url('../fonts/gotham-bold.woff')  }    @font-face {    font-family: 'Gotham Ultra';    src: url('../fonts/gotham-ultra.woff')  }    @font-face {   font-family: Din;   src: url('../fonts/din-regular.ttf')  }    @font-face {     font-family: "Din Bold";    src: url('../fonts/din-bold.ttf')  }    body { margin: 0px; background-color: #d5d5d5; height: 100%; font-family: Din, "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 14px; display: block; }    #pageTop {     display: block;     background-color:#FFFFFF;   height:60px;    border-bottom:#ffd800 2px solid;    position: fixed;    top: 0px;   left: 0px;      right: 0px;  }    /* Logo styling */  #pageTopLogo {    display: inline;    position: absolute;     z-index: 1;     left: 50%;      margin-left: -135px;  }    #pageTopLogo > a {    margin: auto;  }    /* Nav bar styling */  #pageTop > #navBar {      float:left;     display: inline;  }    #pageTop > #navBar > ul {      position: absolute;     z-index: 0;     list-style-type: none;      margin: 0px;    padding: 0px;  }    #pageTop > #navBar > ul > li {     float: left;    display: inline;    margin-top: 22px;  }    #pageTop > #navBar > ul > li > a {      text-decoration: none;      font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;    font-weight: bold;      font-size: 14px;    color: #b0b0b0;     /*border: #FF0004 1px dashed;*/     padding: 22px 35px;  }    #pageTop > #navBar > ul > li > a:hover {      color: #ffd800;  }    #pageTop ul {     list-style-type: none;  }    #pageTop a {   text-decoration: none;  }    #become {      font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;    font-weight: bold;      font-size: 14px;    color: #b0b0b0;     /*border: #FF0004 1px dashed;*/     padding: 22px 35px;  }    #become:hover {   color: #ffd800;  }    /* Sign in styling */  #signinBar {   float:right;    display: inline;  }    #signinBar > ul {     z-index: 0;     list-style-type: none;      margin: 0px;    padding: 0px;  }    #signinBar > ul > li {    float: left;    display: inline;    margin-top: 22px;  }    #signinButton {     margin: 0 20px;     background-color: #ffd800;      border-radius: 5px;     padding: 8px 0px;   box-shadow: 0px 1px 0px #ceae00;    text-decoration: none;  }    #signinButton:hover {      background-color: #ffe242;  }    #signinText {      text-decoration: none;      font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;    font-weight: bold;      font-size: 14px;    color: #FFFFFF;     padding: 8px 20px;      text-shadow: 0px -1px 0px #ceae00;  }    #wrapper {     height: 100%;  }    #content {      margin-top: 62px;   display: block;     width: 1000px;      margin-left: auto;      margin-right: auto;     margin-bottom: 50px;  }    #footer {    display: block;     position: absolute;     height: 100px;      background-color: white;    border-top: #ffd800 2px solid;      bottom: 0;      width: 100%;  }    #footerContent {     width: 1000px;      margin: 10px auto;  }    #footer_copyright {    float: left;    font-size: 14px;    font-weight: 500;   margin-top: 0px;    clear: both;    color: #b0b0b0;  }    #logo_small {     float: left;    width: 160px;   height: auto;  }    #LLC {      font-size: 12px;    font-weight: bold;      font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;    float: left;    margin-top: 15px;   margin-left: 5px;   color: #ffd800;  }    #footerHelp {     list-style: none;   margin-left: 150px;     margin-top: -32px;      float: left;  }    #footerContent > ul {     font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;    font-weight: bold;      color: #808080;  }    #footerExplore_col1 {     list-style: none;   float: left;    margin-top: -32px;      margin-left: 15px;  }    #footerExplore_col2 {      list-style: none;   float: left;    margin-top: -32px;      margin-left: -15px;  }    #footerExplore_col3 {     list-style: none;   float: left;    margin-top: -32px;      margin-left: -15px;  }    #footerExplore_col4 {     list-style: none;   float: left;    margin-top: -32px;      margin-left: -15px;  }    #footerContent > ul > li > a {   text-decoration: none;      color: #b0b0b0;     font-family: Din, "Helvetica Neue", Helvetica, Arial, sans-serif;   font-weight: normal;  }    #footerContent > ul > li > a:hover {    text-decoration: none;      color: #ffd800;  }    #footerSocial {   list-style: none;   float: right;   margin-top: -32px;  }    #footerSocialHeader {      margin-bottom: 15px;  }    .socialIcons {   float: right;   margin-left: 10px;  }    .usericonsmall {   border-radius: 50%;     margin: -10px 20px;  }    #signupbox {      background-color: white;    padding: 10px;      margin-top: 73px;   margin-left: auto;      margin-right: auto;     width: 350px;   border-radius: 5px;     box-shadow: 0px 2px 0px #c5c5c5;    text-align: center;  }    #signupform{      margin-top:20px;    margin-left: auto;      margin-right: auto;     width: 220px;   text-align: left;  }    .inputheader {      margin-top: 12px;   margin-bottom: 5px;     text-align:left;    font-weight: bold;  }    .inputheader > span {   color: #808080;  }    .textinput {      height: 20px;   width: 220px;  }    input[type="password"] {    margin-bottom: 15px;  }    #signupform > input[type="text"] {    font-family: Din, "Helvetica Neue", Helvetica, Arial, sans-serif;   font-size: 16px;  }    #signupform > input[type="password"] {    font-family: Din, "Helvetica Neue", Helvetica, Arial, sans-serif;   font-size: 16px;  }    #signupform > input,select,option {   font-family: Din, "Helvetica Neue", Helvetica, Arial, sans-serif;   font-size: 16px;  }    #signupform > input,select {      width: 200px;   padding: 3px;   background: #FFFFFF;  }    #signupform > input[type=text], textarea {    -webkit-transition: all 0.20s ease-in-out;    -moz-transition: all 0.20s ease-in-out;    -ms-transition: all 0.20s ease-in-out;    -o-transition: all 0.20s ease-in-out;    outline: none;    border: 1px solid #DDDDDD;  }     #signupform > input[type=text]:focus, textarea:focus {    box-shadow: 0 0 5px #ffd800;    border: 1px solid #ffd800;  }    #signupform > input[type=password], textarea {    -webkit-transition: all 0.20s ease-in-out;    -moz-transition: all 0.20s ease-in-out;    -ms-transition: all 0.20s ease-in-out;    -o-transition: all 0.20s ease-in-out;    outline: none;    border: 1px solid #DDDDDD;  }     #signupform > input[type=password]:focus, textarea:focus {    box-shadow: 0 0 5px #ffd800;    border: 1px solid #ffd800;  }    #loginbtn {    font-size:18px;     width: 220px;   height: 30px;   background-color: #ffd800;      cursor: pointer;    border-radius: 5px;     padding-top: 10px;      padding-bottom: 5px;    box-shadow: 0px 1px 0px #ceae00;    text-align: center;     margin-left: auto;      margin-right: auto;     margin-bottom: 30px;  }    #loginbtn > span {    margin-top: 20px;   font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;    font-weight: bold;      color: white;   text-shadow: 0px -1px 0px #ceae00;  }    #loginbtn:hover {      background-color: #ffe242;  }    #signupheader {    text-align: center;     font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;    font-weight: bold;      font-size: 20px;    color: #808080;  }    #forgotpass {     margin-bottom: 20px;  }    label {      cursor: pointer;    display: none;  }    #stayloggedtext {      color: #808080;  }    input[type="checkbox"] {      display: none;  }    input[type="checkbox"] + #stayloggedtext:before {      content: "\f096";   color: #808080;     font-family: "Font Awesome";    speak: none;    font-size: 14px;    font-style: normal;     font-weight: normal;    font-variant: normal;   text-transform: none;   line-height: 1;     -webkit-font-smoothing: antialiased;    width: 1em;     margin-right: 5px;  }    input[type="checkbox"]:checked + #stayloggedtext:before {      content: "\f14a";   color: #ffd800;     font-size: 13px;  }    #divider {   height: 1px;    background-color: #b0b0b0;      width: 250px;   margin-right: auto;     margin-left: auto;      margin-bottom: 20px;  }    #signup {    color: #808080;  }    #signup > a {      color: #3c9bcd;     font-weight: bold;      text-decoration: none;  }    #signup > a:hover {     text-decoration: underline;  }    #forgotpass {     color: #808080;  }    #forgotpass > a {      color: #3c9bcd;     font-weight: bold;      text-decoration: none;  }    #forgotpass > a:hover {     text-decoration: underline;  }    #submit {     display: none;      position: absolute;     visibility: hidden;  }
<html lang="en"><head>  <meta charset="utf-8">  <title>Log In - Competifund</title>  <link rel="icon" type="image/png" href="favicon.png">  <link rel="stylesheet" type="text/css" href="style/style.css">  <script src="js/main.js"></script>  <script src="js/ajax.js"></script>  <script>  function emptyElement(x){     _(x).innerHTML = "";  }  function login(){      var e = _("email").value;   var p = _("password").value;    if(e == "" || p == ""){         _("status").innerHTML = "<strong style='color:#f00'>Please complete all fields.</strong><br />";      } else {        _("loginbtn").style.display = "none";       _("status").innerHTML = '<strong style="color:#808080">...</strong><br><br>';       var ajax = ajaxObj("POST", "login.php");          ajax.onreadystatechange = function() {            if(ajaxReturn(ajax) == true) {                  if(ajax.responseText == "login_failed"){                    _("status").innerHTML = "<strong style='color:#f00'>Log in failed. Please try again.</strong><br />";                     _("loginbtn").style.display = "block";                  } else if(ajax.responseText == "$p"){                   _("status").innerHTML = "<strong style='color:#f00'>$p</strong><br />";                   _("loginbtn").style.display = "block";                  } else {                    window.location = "user.php?u="+ajax.responseText;                  }           }          }          ajax.send("e="+e+"&p="+p);    }  }  </script>  </head>    <body>  <div id="wrapper">    <div id="pageTop">      <div id="navBar">         <ul>              <li><a href="#">How It Works</a></li>              <li><a href="#">Explore</a></li>              <li><a href="#">Contact</a></li>          </ul>      </div>            <div id="pageTopLogo">        <a href="home.php"><img src="http://competifund.com/images/logo_center.png" alt="competifund_logo" id="logo" title="Competifund Home"></a>    </div>            <div id="signinBar">          <ul>              <li>                  <a href="#" id="become">Become a Creator</a>            </li>              <li>                 <a href="login.php" id="signinButton"><span id="signinText">Log In</span></a>                             </li>          </ul>      </div>  </div>  <div id="content">  <div id="signupbox">    <h3 id="signupheader">Log In</h3>       <form name="signupform" id="signupform" onsubmit="return false;">             <div class="inputheader"><span>Email Address</span></div>               <input id="email" class="textinput" type="text" onfocus="emptyElement('status')" onkeyup="restrict('email')" maxlength="88" placeholder="Email Address">              <div class="inputheader"><span>Password</span></div>                <input id="password" class="textinput" type="password" onfocus="emptyElement('status')" maxlength="100" placeholder="Password">           <label>               <input class="binaryinput" type="checkbox" name="check" id="check"><span id="stayloggedtext">Stay logged in</span>            </label>              <input id="submit" type="submit" onclick="login()">    </form>    <span id="status"></span><br>      <div id="loginbtn" onclick="login()"><span>Log In</span></div>      <div id="divider"></div>      <div id="signup">        Not a member yet? <br><a href="signup.php">Create an Account</a>      </div>      <br>      <div id="forgotpass">       Having trouble logging in? <br><a href="forgotpassword.php">Forgot Password</a>      </div>  </div>  </div>    <div id="footer">      <div id="footerContent">          <img src="http://competifund.com/images/logo_center.png" alt="competifund_logo_small" id="logo_small"><span id="LLC">LLC</span>          <p id="footer_copyright"> 2016</p>          <script src="js/year.js"></script>          <ul id="footerHelp">           <li class="footerExploreHeader">Help</li>           <li><a href="#">How It Works</a></li>              <li><a href="#">Contact</a></li>              <li><a href="#">Privacy / Terms</a></li>          </ul>          <ul id="footerExplore_col1">              <li class="footerExploreHeader">Explore</li>            <li><a href="#">Art</a></li>              <li><a href="#">Beauty</a></li>           <li><a href="#">Comedy</a></li>          </ul>          <ul id="footerExplore_col2">            <li><br></li>              <li><a href="#">Education</a></li>              <li><a href="#">Fashion</a></li>           <li><a href="#">Film</a></li>       </ul>          <ul id="footerExplore_col3">             <li><br></li>              <li><a href="#">Journalism</a></li>              <li><a href="#">Music</a></li>              <li><a href="#">Photography</a></li>          </ul>          <ul id="footerExplore_col4">             <li><br></li>              <li><a href="#">Science</a></li>              <li><a href="#">Sports</a></li>              <li><a href="#">Theatre</a></li>          </ul>          <ul id="footerSocial">             <li id="footerSocialHeader">Stay in the Loop</li>              <li class="socialIcons"><a href="http://instagram.com/competifund" target="_blank"><img src="images/instagram-logo.png" alt="instagram_logo" width="30" height="30" title="Follow Competifund on Instagram"></a></li>              <li class="socialIcons"><a href="http://twitter.com/competifund" target="_blank"><img src="images/twitter-logo.png" alt="twitter_logo" width="30" height="30" title="Follow Competifund on Twitter"></a></li>              <li class="socialIcons"><a href="http://facebook.com/competifund" target="_blank"><img src="images/facebook-logo.png" alt="facebook_logo" width="30" height="30" title="Like Competifund on Facebook"></a></li>          </ul>      </div>  </div>  </div>    </body></html>

Any help would be greatly appreciated. Thanks!

Replay

Category: html Time: 2016-07-28 Views: 0
Tags: osx html css safari

Related post

iOS development

Android development

Python development

JAVA development

Development language

PHP development

Ruby development

search

Front-end development

Database

development tools

Open Platform

Javascript development

.NET development

cloud computing

server

Copyright (C) avrocks.com, All Rights Reserved.

processed in 0.244 (s). 12 q(s)