CODEWITHSUNDEEP
jqueryhtmlcss
AbhishekSaha
AbhishekSaha

Reputation: 745

Whitespace appears in HTML file but not JSFiddle

When I'm running this HTML file in my browser, there's 18px of whitespace at the top of my first div. This bug appears in my HTML file when I run it locally on my browser but works fine in JSFiddle. Not sure why this is happening.

JSFiddle

CSS code:

/* CSS Document */
 * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
#slide-1 .bcg {
    background-image:url('http://wanderingdanny.com/oxford/images/p/b4242667-wytham-woods-avenue.jpg');
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    height: 750px;
    width: 100%;
    position:relative;
}
#slide-1 .hsContainer {
    display: table;
    table-layout: fixed;
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: fixed;
    -webkit-transform: translateZ(0)
}
#slide-1 .hsContent {
    max-width: 450px;
    margin: -150px auto 0 auto;
    display: table-cell;
    vertical-align: middle;
    color: #ebebeb;
    padding: 0 8%;
    text-align: center;
}
#title {
    font-family:'Futura', sans-serif;
    font-size:3em;
}
#slide-1 ul {
    display: inline;
    width: 400px;
    margin: 0 auto;
}
ul {
    list-style: none;
}
.entry:hover {
    text-decoration: underline;
}
#menu a {
    color: #b2b2b2;
    text-decoration:none;
}
#slide-1 li {
    display: inline;
    width: 400px;
    color: #b2b2b2;
    font-family:'Arial', sans-serif;
}
#App {
    background-image:url('img/taxi.jpg');
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    height: 800px;
    width: 100%;
}
#App p {
    width: 30%;
    height: 800px;
    background-color:#FFF;
    opacity: .8;
    padding-top: 80px;
    padding-left: 20px;
    padding-right: 20px;
    font-family:"HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
}
#resume {
    display:block;
    font-family:'Cabin', sans-serif;
    padding-top: 70px;
    padding-bottom: 30px;
    font-size: medium;
    position:relative;
}
.container {
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
    max-width: 1170px;
}
.container:before, .container:after {
    display: table;
    content:" ";
}
#resume h3 {
    font-family:'Lobster', cursive;
    font-size:63px;
}
.wohrd {
    padding-right: 60px;
    padding-left: 60px;
    border-radius: 6px;
    padding-top: 48px;
    width: 500px;
    padding-bottom: 48px;
    padding: 30px;
    margin-bottom: 30px;
    font-size: 18px;
    font-weight: 200;
    float:left;
    color: inherit;
    background-color: #eee;
    overflow:auto;
}
.hire {
    float:left;
    position: relative;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
}
.hire p {
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 10px;
    display: block;
    -webkit-margin-before: 1em;
    -webkit-margin-after: 1em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
    padding-top: 100px;
}
.hire img {
    vertical-align: middle;
    border-top-width: 0px;
    width: 100%;
}
.helper {
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

EDIT: FULL HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
   <head>
      <meta charset="UTF-8">
      <title>Untitled Document</title>
      <link href="par.css" rel="stylesheet" type="text/css" />
      <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
      <link href="//fonts.googleapis.com/css?family=Oswald:300,400,700" rel="stylesheet" type="text/css">
   </head>
   <body>
      <section id="slide-1" class="homeSlide">
         <div class="bcg" >
            <div class="hsContainer">
               <div id ="bill" class="hsContent" >
                  <h2 id="title">
                     ABHISHEK SAHA
                  </h2>
                  <div id="menu">
                     <ul>
                        <li class="entry">Resume</li>
                        <li>&bullet;</li>
                        <li class="entry"><a href="https://github.com/AbhishekSaha">Github</a></li>
                        <li>&bullet;</li>
                        <li class="entry">Android Application</li>
                     </ul>
                  </div>
               </div>
            </div>
         </div>
      </section>

Upvotes: 0

Views: 154

Answers (1)

Umut D.
Umut D.

Reputation: 1846

I think it's strongly an encoding problem. Please open your HTML file with Notepad++ and in Format menu choose encode in utf-8 without BOM.

Upvotes: 2

Related Questions