Safari，Opera，IE的CSS问题

Question

 input.searchbox{-webkit-border-radius:10px;-moz-border-radius:10px;background-color:#af5354;border:1px solid #af5354;background-color:#AF5354;border:1px solid #AF5354;border-radius:5px;color:#FFF;float:left;height:17px;margin-left:0.5em;margin-top:1.4em;outline:0px none;padding-left:0.5em;padding-top:0.4em;text-align:left;width:170px;} input.searchbox:focus{background:#e87476;background:-moz-linear-gradient(top, #e87476 0%, #e87476 20%);background:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #e87476), color-stop(20%, #e87476));outline:0;color:#FFF;} *::-webkit-input-placeholder{color:#FFF;} *:-moz-placeholder{color:#FFF;} *::-moz-placeholder{color:#FFF;} *:-ms-input-placeholder{color:#FFF;} input.button{background:url("../../assets/images/sprite.png") -142px -7px;border:none;float:left;height:28px;margin:16px 0px 0px -28px;overflow:hidden;padding:0;width:38px;} input.button:hover{background:url("../../assets/images/sprite.png") -142px -47px;border:none;float:left;height:28px;margin:16px 0px 0px -28px;overflow:hidden;padding:0;width:38px;} input[type=search]{-webkit-appearance:none;} input.searchbox{border-radius:10px;} @-moz-document url-prefix() {.container {top: 00px;} 

 <form id=header-search> <input class=searchbox placeholder="Search Spout TV"> <input type=submit class=button value=""/> </form> 

I am currently building a web site and on my index page I am having some rendering issues.

The issues I am having is in Safari, the search bar image which is coming of a sprite image, is out by a pixel and every time I have readjusted it in my css, the issue is fixed yet on other browsers, the buttons are placed 1px above.

The second issue I have, When running the page in Chrome and Firefox, the slider carousels are centered, yet when running the page in IE, Opera and Safari, the slider carousels are more on the left side of the page. I have put in my code margin-left: auto; and margin-right: auto; which I know centers everything within the div.

I am puzzled as to why these errors are occurring and would like help fixing them.

If you would like to see the page running, you can go to spouttv.com/spout/index.php that way you will get a better understanding of what I am talking about.

Below is the code for the html page and the css.

 @charset "UTF-8";article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section{display: block;} fieldset{margin:0;padding:0;border:0;} input:focus,textarea:focus{outline:none;} body{background:#000;font-family:Arial, Helvetica, sans-serif;color:#444;margin:0;font-size:1.2em;} #logo{border:none;float:left;height:50px;margin:-5px 5px 0px 0px;width:130px;} #navmenu{color:#FFF;font-size:18px;list-style:outside none none;margin:20px 5px 5px 5px;text-decoration:none;} input.searchbox{-webkit-border-radius:10px;-moz-border-radius:10px;background-color:#af5354;border:1px solid #af5354;background-color:#AF5354;border:1px solid #AF5354;border-radius:5px;color:#FFF;float:left;height:19px;margin-left:0.5em;margin-top:1.3em;outline:0px none;padding-left:0.5em;padding-top:0.3em;text-align:left;width:170px;} input.searchbox:focus{background:#e87476;background:-moz-linear-gradient(top, #e87476 0%, #e87476 20%);background:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #e87476), color-stop(20%, #e87476));outline:0;color:#FFF;} *::-webkit-input-placeholder{color:#FFF;} *:-moz-placeholder{color:#FFF;} *::-moz-placeholder{color:#FFF;} *:-ms-input-placeholder{color:#FFF;} input.button{padding:0px;margin:15px 0px 0px -28px;width:38px;height:28px;border:0;float:left;border:none;background:url("../../assets/images/sprite.png") -142px -7px;overflow:hidden;} input.button:hover{border:0;padding:0;margin:15px 0px 0px -28px;width:38px;height:28px;background:url("../../assets/images/sprite.png") -142px -47px;float:left;border:none;} input[type=search]{-webkit-appearance:none;} #navmenu a{color:#FFF;text-decoration:none;} #navmenu a:hover{text-decoration:none;} .cf:before, .cf:after{content:"";display:table;} .cf:after{clear:both;} .cf{zoom:1;} #header-nav{padding:8px;background-color:#8C080A;background-image:-webkit-gradient(linear, left top, left bottom, from(#a8090c), to(#8c080a));background-image:-webkit-linear-gradient(top, #a8090c, #8c080a);background-image:-moz-linear-gradient(top, #a8090c, #8c080a);background-image:-ms-linear-gradient(top, #a8090c, #8c080a);background-image:-o-linear-gradient(top, #a8090c, #8c080a);background-image:linear-gradient(top, #a8090c, #8c080a);-moz-box-shadow:0 -3px 3px rgba(0,0,0,.5) inset;-webkit-box-shadow:0 -3px 3px rgba(0,0,0,.5) inset;box-shadow:0 -3px 3px rgba(0,0,0,.5) inset;height:50px;position:fixed;width:100%; z-index:999;} nav{font-size:16px;font-weight:bold;margin-left:auto;margin-right:auto;width:1024px;} nav ul{margin:20px 0px 0px;padding:0;list-style:none;position:relative;float:right;background:from(#a8090c), to(#8c080a);-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;} nav li{float:left;} nav #login{border-right:1px solid #fff;-moz-box-shadow:1px 0 0 #fff;-webkit-box-shadow:1px 0 0 #fff;box-shadow:1px 0 0 #fff;} nav #login-trigger, nav #signup a{display:inline-block;*display:inline;*zoom:1;height:25px;line-height:25px;font-weight:bold;padding:0 8px;text-decoration:none;color:#FFF;} nav #signup a{-moz-border-radius:0 3px 3px 0;-webkit-border-radius:0 3px 3px 0;border-radius:0 3px 3px 0;} nav #login-trigger{-moz-border-radius:3px 0 0 3px;-webkit-border-radius:3px 0 0 3px;border-radius:3px 0 0 3px;} nav #login-trigger:hover, nav #login .active, nav #signup a:hover{background:from(#a8090c), to(#8c080a);} nav #login-content{display:none;position:absolute;top:35px;right:0;z-index:999;background:#444343;background-image:-webkit-gradient(linear, left top, left bottom, from(#444343), to(#444343));background-image:-webkit-linear-gradient(top, #444343, #444343);background-image:-moz-linear-gradient(top, #444343, #444343);background-image:-ms-linear-gradient(top, #444343, #444343);background-image:-o-linear-gradient(top, #444343, #444343);background-image:linear-gradient(top, #444343, #444343);padding:15px;-moz-box-shadow:0 2px 2px -1px rgba(0,0,0,.9);-webkit-box-shadow:0 2px 2px -1px rgba(0,0,0,.9);box-shadow:0 2px 2px -1px rgba(0,0,0,.9);-moz-border-radius:3px 0 3px 3px;-webkit-border-radius:3px 0 3px 3px;border-radius:3px 0 3px 3px;} nav li #login-content{right:0;width:250px;} #inputs input{background:#7c7c7c;padding:6px 5px;margin:0 0 5px 0;width:238px;border:1px solid #ccc;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;-moz-box-shadow:0 1px 1px #ccc inset;-webkit-box-shadow:0 1px 1px #ccc inset;box-shadow:0 1px 1px #ccc inset;color:#FFF;} #inputs input:focus{background-color:#7c7c7c;border-color:#e8c291;outline:none;-moz-box-shadow:0 0 0 1px #e8c291 inset;-webkit-box-shadow:0 0 0 1px #e8c291 inset;box-shadow:0 0 0 1px #e8c291 inset;} #inputs input{background:#7c7c7c;padding:6px 5px;margin:0 0 5px 0;width:238px;border:1px solid #ccc;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;-moz-box-shadow:0 1px 1px #ccc inset;-webkit-box-shadow:0 1px 1px #ccc inset;box-shadow:0 1px 1px #ccc inset;color:#FFF;} #inputs input:focus{background-color:#7c7c7c;border-color:#e8c291;outline:none;-moz-box-shadow:0 0 0 1px #e8c291 inset;-webkit-box-shadow:0 0 0 1px #e8c291 inset;box-shadow:0 0 0 1px #e8c291 inset;} #login #actions{margin:10px 0 0 0;} #login #submit{background-color:#d14545;background-image:-webkit-gradient(linear, left top, left bottom, from(#e97171), to(#d14545));background-image:-webkit-linear-gradient(top, #e97171, #d14545);background-image:-moz-linear-gradient(top, #e97171, #d14545);background-image:-ms-linear-gradient(top, #e97171, #d14545);background-image:-o-linear-gradient(top, #e97171, #d14545);background-image:linear-gradient(top, #e97171, #d14545);-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;text-shadow:0 1px 0 rgba(0,0,0,.5);-moz-box-shadow:0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset;-webkit-box-shadow:0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset;box-shadow:0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset;border:1px solid #7e1515;float:left;height:30px;padding:0;width:100px;cursor:pointer;font:bold 14px Arial, Helvetica;color:#fff;margin-right:3px;} #login #submit:hover, #login #submit:focus{background-color:#e97171;background-image:-webkit-gradient(linear, left top, left bottom, from(#d14545), to(#e97171));background-image:-webkit-linear-gradient(top, #d14545, #e97171);background-image:-moz-linear-gradient(top, #d14545, #e97171);background-image:-ms-linear-gradient(top, #d14545, #e97171);background-image:-o-linear-gradient(top, #d14545, #e97171);background-image:linear-gradient(top, #d14545, #e97171);} #login #submit:active{outline:none;-moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.5) inset;-webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.5) inset;box-shadow:0 1px 4px rgba(0, 0, 0, 0.5) inset;} #login #submit::-moz-focus-inner{border:none;} #login #forgot{background-color:#d14545;background-image:-webkit-gradient(linear, left top, left bottom, from(#e97171), to(#d14545));background-image:-webkit-linear-gradient(top, #e97171, #d14545);background-image:-moz-linear-gradient(top, #e97171, #d14545);background-image:-ms-linear-gradient(top, #e97171, #d14545);background-image:-o-linear-gradient(top, #e97171, #d14545);background-image:linear-gradient(top, #e97171, #d14545);-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;text-shadow:0 1px 0 rgba(0,0,0,.5);-moz-box-shadow:0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset;-webkit-box-shadow:0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset;box-shadow:0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset;border:1px solid #7e1515;float:left;height:30px;padding:0;width:144px;cursor:pointer;font:bold 14px Arial, Helvetica;color:#fff;margin-left:3px;} #login #forgot:hover, #login #forgot:focus{background-color:#e97171;background-image:-webkit-gradient(linear, left top, left bottom, from(#d14545), to(#e97171));background-image:-webkit-linear-gradient(top, #d14545, #e97171);background-image:-moz-linear-gradient(top, #d14545, #e97171);background-image:-ms-linear-gradient(top, #d14545, #e97171);background-image:-o-linear-gradient(top, #d14545, #e97171);background-image:linear-gradient(top, #d14545, #e97171);} #login #forgot:active{outline:none;-moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.5) inset;-webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.5) inset;box-shadow:0 1px 4px rgba(0, 0, 0, 0.5) inset;} #login #forgot::-moz-focus-inner{border:none;} #login #passwordbtn{background-color:#d14545;background-image:-webkit-gradient(linear, left top, left bottom, from(#e97171), to(#d14545));background-image:-webkit-linear-gradient(top, #e97171, #d14545);background-image:-moz-linear-gradient(top, #e97171, #d14545);background-image:-ms-linear-gradient(top, #e97171, #d14545);background-image:-o-linear-gradient(top, #e97171, #d14545);background-image:linear-gradient(top, #e97171, #d14545);-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;text-shadow:0 1px 0 rgba(0,0,0,.5);-moz-box-shadow:0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset;-webkit-box-shadow:0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset;box-shadow:0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset;border:1px solid #7e1515;float:left;height:30px;padding:0;width:144px;cursor:pointer;font:bold 14px Arial, Helvetica;color:#fff;margin-right:3px;} #login #passwordbtn:hover, #login #passwordbtn:focus{background-color:#e97171;background-image:-webkit-gradient(linear, left top, left bottom, from(#d14545), to(#e97171));background-image:-webkit-linear-gradient(top, #d14545, #e97171);background-image:-moz-linear-gradient(top, #d14545, #e97171);background-image:-ms-linear-gradient(top, #d14545, #e97171);background-image:-o-linear-gradient(top, #d14545, #e97171);background-image:linear-gradient(top, #d14545, #e97171);} #login #passwordbtn:active{outline:none;-moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.5) inset;-webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.5) inset;box-shadow:0 1px 4px rgba(0, 0, 0, 0.5) inset;} #login #passwordbtn::-moz-focus-inner{border:none;} #login label{color:#fff;float:left;line-height:30px;} #login label input{position:relative;top:2px;right:2px;} #about{margin:15px;} #about a{color:#555;} .body_container{margin:0 auto;padding:40px 15px;width:1024px; } p.adds { margin: 0 auto; width: 100%; } p.add-one { float: left; margin: 5px 14px; } p.add-two { float: left; margin: 5px 14px; } p.add-three { float: left; margin: 5px 14px; } p.add-four { float: left; margin: 5px 14px; } p.add-five { float: left; margin: 5px 14px; } .headertext { margin: 5px 0 5px 0; padding-top: 5px; } #carousel { margin-left: auto; margin-right: auto; width: 960px; } #carousel img{height:100px;width:100px;padding:5px; margin: 0 5px; background-color:#522424;background-image:-webkit-gradient(linear, left top, left bottom, from(#a8090c), to(#8c080a));background-image:-webkit-linear-gradient(top, #a8090c, #8c080a); } .next, .next2, .next3, .next4 {float:right;color:#FFF;background:none;text-decoration:underline;border:0px;} .prev, .prev2, .prev3, .prev4 {float:left;color:#FFF;background:none;text-decoration:underline;border:0px;} #entertainment { list-style-type: none; margin-left: auto; margin-right: auto; width: 1024px; } #entertainment img{float: left;height:235px;width:235px;padding:5px; margin: 0 5px; background-color:#522424;background-image:-webkit-gradient(linear, left top, left bottom, from(#a8090c), to(#8c080a));background-image:-webkit-linear-gradient(top, #a8090c, #8c080a); } section{ float: left; margin: 5px 14px; width: 100%; } section h2 { font: Helvetica,"Helvetica neue", Arial, sans-serif; font-size: 1.25em; color: #FFF; padding-bottom: 10px; margin: 0; } footer{ clear:both !important; width:100%; height: 20px; padding: 10px; color:#FFF ; border-top: 1px solid #fff; } #footertext { margin: 0 auto; width: 1024px; } p.footertext, .footertext { text-decoration: none; color: #FFF; margin: 0px 10px; float: left; font-size: 0.8em; } 

 <!DOCTYPE html> <html> <head> <title>Welcome to Spout TV</title> <link rel=stylesheet href="scripts/css/main.css" type="text/css"> <link rel="stylesheet" href="scripts/css/style.css" type="text/css"> <link rel="stylesheet" href="scripts/css/advanced-carousel.css" type="text/css"> <!--[if lt IE 9]> <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> <script src="scripts/js/login.js"></script> <script src="scripts/js/functions.js"></script> <script src="scripts/js/jquery1.9.0.js"></script> <script src="scripts/js/advanced-carousel.js"></script> <script src="scripts/js/custom.js"></script> <script type="text/javascript" src="scripts/js/jquery.js"></script> <script type="text/javascript" src="scripts/js/jcarousel.js"></script> <script>document.createElement('article');document.createElement('section');document.createElement('aside');document.createElement('hgroup');document.createElement('nav');document.createElement('header');document.createElement('footer');document.createElement('figure');document.createElement('figcaption');</script> <script type="text/javascript"> $(function(){ $(".carousel1").jCarouselLite({ btnNext: ".next", btnPrev: ".prev", visible: 7, speed: 1000, }); $(".carousel2").jCarouselLite({ btnNext: ".next2", btnPrev: ".prev2", visible: 7, speed: 1000, }); $(".carousel3").jCarouselLite({ btnNext: ".next3", btnPrev: ".prev3", visible: 7, speed: 1000, }); $(".carousel4").jCarouselLite({ btnNext: ".next4", btnPrev: ".prev4", visible: 7, speed: 1000, }) }) </script> </head> <body> <header> <div id="header-nav"> <nav> <a href="http://www.spouttv.com/"><img src="assets/images/logo.png" id=logo height="50" width="130" alt="Spout TV"></a> <li id=navmenu><a href="#">TV Shows</a></li> <li id=navmenu><a href="#">Movies</a></li> <li id=navmenu><a href="#">Documentaries</a></li> <li id=navmenu><a href="#">Kids Shows</a></li> <li id=navmenu><a href="#">Favourites</a></li> <form id=header-search> <input class=searchbox placeholder="Search Spout TV"> <input type=submit class=button value=""/> </form> <ul> <li id=login> <a id=login-trigger href="#"> Log in <span>&#x25BC;</span> </a> <div id=login-content> <form id=userlogin role=search class=input-group action=login.php onsubmit="dologin(document.getElementById('user').value, document.getElementById('pass').value); return false;"> <fieldset id=inputs> <label>Email:</label> <input id=username type=email name=Email placeholder="Your Email address" required> <label>Password:</label> <input id=password type=password name=Password placeholder=Password required> </fieldset> <fieldset id=actions> <input type=submit id=submit value="Log in"><input type=button onclick="f_p();" id=forgot value="Forgot Password"> <label><input type=checkbox checked> Keep me signed in</label> </fieldset> </form> <form method=post style='display:none;' name=forgot_pwd id=forgot_pwd action=forgot_password.php> <fieldset id=inputs> <label>Enter Email address:</label> <input id=username type=email name=Email placeholder="Your Email address" required> </fieldset> <fieldset id=actions> <input type=submit id=passwordbtn name=for_pwd value="Send Password"/> <input type=button onclick='p_f();' id=submit value=Back /> </fieldset> </form> </div> </li> <li id=signup> <a href=register.html>Sign Up</a> </li> </ul> </nav> </div> </header> </div> <div class="body_container"> <div class="page"> <div class="carousel-outer"> <div class="left-transparent"> <span>Left Transparent</span> </div> <div class="carousel-inner"> <a class="left-link" href="#"><img src="assets/images/leftLink.png" alt="" width="26" height="47"></a> <div class="wrapper"> <img class="carousel-item" src="assets/banner/banner1.jpg" alt="" width="660" height="384"> <img class="carousel-item" src="assets/banner/banner2.jpg" alt="" width="660" height="384"> <img class="carousel-item" src="assets/banner/banner3.jpg" alt="" width="660" height="384"> <img class="carousel-item" src="assets/banner/banner4.jpg" alt="" width="660" height="384"> <img class="carousel-item" src="assets/banner/banner5.jpg" alt="" width="660" height="384"> </div> <a class="right-link" href="#"><img src="assets/images/rightLink.png" alt="" width="26" height="47"></a> <ul class="scroll-buttons"></ul> </div> <div class="right-transparent"> <span>Right transparent</span> </div> </div> </div> <article> <p class="adds"> <p class="add-one"> <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <!-- main page 1 --> <ins class="adsbygoogle" style="display:inline-block;width:100px;height:100px;" data-ad-client="ca-pub-7465953501337362" data-ad-slot="1331107995"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </p> <p class="add-two"> <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <!-- main page 1 --> <ins class="adsbygoogle" style="display:inline-block;width:100px;height:100px;" data-ad-client="ca-pub-7465953501337362" data-ad-slot="1331107995"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </p> <p class="add-three"> <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <!-- main page 1 --> <ins class="adsbygoogle" style="display:inline-block;width:100px;height:100px;" data-ad-client="ca-pub-7465953501337362" data-ad-slot="1331107995"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </p> <p class="add-four"> <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <!-- main page 1 --> <ins class="adsbygoogle" style="display:inline-block;width:100px;height:100px;" data-ad-client="ca-pub-7465953501337362" data-ad-slot="1331107995"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </p> <p class="add-five"> <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <!-- main page 1 --> <ins class="adsbygoogle" style="display:inline-block;width:100px;height:100px;" data-ad-client="ca-pub-7465953501337362" data-ad-slot="1331107995"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </p> </p> </article> <section> <article> <header class="headertext"> <h2>Latest Episodes</h2> </header> <div id="carousel"> <div class="carousel1"> <ul> <li><img src="assets/adds/add1.png" alt="" /></li> <li><img src="assets/adds/add2.png" alt="" /></li> <li><img src="assets/adds/add3.png" alt="" /></li> <li><img src="assets/adds/add4.png" alt="" /></li> <li><img src="assets/adds/add5.png" alt="" /></li> <li><img src="assets/adds/add6.png" alt="" /></li> <li><img src="assets/adds/add1.png" alt="" /></li> <li><img src="assets/adds/add2.png" alt="" /></li> <li><img src="assets/adds/add3.png" alt="" /></li> <li><img src="assets/adds/add4.png" alt="" /></li> </ul> <button class="prev">Back</button><button class="next">Next</button> </div> </div> </article> <article> <header class="headertext"> <h2>Latest Movies</h2> </header> <div id="carousel"> <div class="carousel2"> <ul> <li><img src="assets/adds/add1.png" alt="" /></li> <li><img src="assets/adds/add2.png" alt="" /></li> <li><img src="assets/adds/add3.png" alt="" /></li> <li><img src="assets/adds/add4.png" alt="" /></li> <li><img src="assets/adds/add5.png" alt="" /></li> <li><img src="assets/adds/add6.png" alt="" /></li> <li><img src="assets/adds/add1.png" alt="" /></li> <li><img src="assets/adds/add2.png" alt="" /></li> <li><img src="assets/adds/add3.png" alt="" /></li> <li><img src="assets/adds/add4.png" alt="" /></li> </ul> <button class="prev2">Back</button><button class="next2">Next</button> </div> </div> </article> <article> <header class="headertext"> <h2>Latest Documentaries</h2> </header> <div id="carousel"> <div class="carousel3"> <ul> <li><img src="assets/adds/add1.png" alt="" /></li> <li><img src="assets/adds/add2.png" alt="" /></li> <li><img src="assets/adds/add3.png" alt="" /></li> <li><img src="assets/adds/add4.png" alt="" /></li> <li><img src="assets/adds/add5.png" alt="" /></li> <li><img src="assets/adds/add6.png" alt="" /></li> <li><img src="assets/adds/add1.png" alt="" /></li> <li><img src="assets/adds/add2.png" alt="" /></li> <li><img src="assets/adds/add3.png" alt="" /></li> <li><img src="assets/adds/add4.png" alt="" /></li> </ul> <button class="prev3">Back</button><button class="next3">Next</button> </div> </div> </article> <article> <header class="headertext"> <h2>Latest Kids Shows</h2> </header> <div id="carousel"> <div class="carousel4"> <ul> <li><img src="assets/adds/add1.png" alt="" /></li> <li><img src="assets/adds/add2.png" alt="" /></li> <li><img src="assets/adds/add3.png" alt="" /></li> <li><img src="assets/adds/add4.png" alt="" /></li> <li><img src="assets/adds/add5.png" alt="" /></li> <li><img src="assets/adds/add6.png" alt="" /></li> <li><img src="assets/adds/add1.png" alt="" /></li> <li><img src="assets/adds/add2.png" alt="" /></li> <li><img src="assets/adds/add3.png" alt="" /></li> <li><img src="assets/adds/add4.png" alt="" /></li> </ul> <button class="prev4">Back</button><button class="next4">Next</button> </div> </div> </article> <article> <header class="headertext"> <h2>Entertainment News</h2> </header> <div id="entertainment"> <div class="entertainment"> <li><img src="assets/adds/add1.png" alt="" /></li> <li><img src="assets/adds/add2.png" alt="" /></li> <li><img src="assets/adds/add3.png" alt="" /></li> <li><img src="assets/adds/add4.png" alt="" /></li> </div> </div> </article> </section> </div> <footer> <div id="footertext"> <a href="#" class="footertext">Terms of Use</a> <a href="#" class="footertext">Privacy Policy</a> <a href="#" class="footertext">Advertising</a> <a href="#" class="footertext">Help</a> <a href="#" class="footertext">About Us</a> <p class="footertext">&copy; 2014 - <?php echo date("Y") ?> Spout TV, Inc.</p> </div> </footer> </body> </html> 

Answer 1

This is likely due to using em s for the margin and padding on input.searchbox .

input.searchbox {
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    background-color: #AF5354;
    border: 1px solid #AF5354;
    background-color: #AF5354;
    border: 1px solid #AF5354;
    border-radius: 5px;
    color: white;
    float: left;
    height: 19px;
    margin-left: 0.5em;
    margin-top: 1.3em;
    outline: 0px none;
    padding-left: 0.5em;
    padding-top: 0.4em;
    text-align: left;
    width: 170px;
}

Safari calculates the margin and padding as:

margin-bottom: 0px;
margin-left: 8px;
margin-right: 0px;
margin-top: 17px;
padding-bottom: 1px;
padding-left: 8px;
padding-right: 0px;
padding-top: 6px;

Chrome calculates the margin and padding as:

margin-bottom: 0px;
margin-left: 8px;
margin-right: 0px;
margin-top: 17.6000003814697px;
padding-bottom: 1px;
padding-left: 8px;
padding-right: 0px;
padding-top: 6.40000009536743px;

em s are based on font size, which is why there can be differences between browsers. It's probably best to use px for the margin and padding in this instance.

More info on em s:

https://css-tricks.com/css-font-size/

http://www.impressivewebs.com/understanding-em-units-css/