bitandbang
Reputation: 51
Oddity: Whitespace at top of HTML
I've got a problem with a site I'm working on where there is whitespace appearing at the top of the file (and 1 px to the right) for apparently no reason. I've added margin: 0; padding:0; to both <body> and <html> to no avail.
When I've inspected it in Chrome DevTools, I can't seem to find any elements that are causing it. If I remember correctly it also appears when there is no CSS present. HTML and CSS are below.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/normalize.min.css">
</head>
<body>
<section id="sec-1">
<header>
<nav class="flo-l">
<a href="#services" class="ed">Services</a>
<a href="#contact" class="ed">Email</a> </nav>
<h1 class="lava">Hillside Insurance Agency</h1>
<nav class="flo-r">
<a href="#contact" class="ed">Phone</a>
<a href="#about" class="ed">About</a>
</nav>
</header>
<div>
<h1 class="fv">Protection, Integrity, Service.</h1>
<h2>We have the protection you need. <br>
Call or email us today.</h2>
</div>
</section>
<section id="sec-2">
<nav>
<a href="#services" class="active ed">Services</a>
<a href="#contact" class="ed">Email</a>
<a href="#contact" class="ed">Phone</a>
<a href="#about" class="ed">About</a>
</nav>
<div>
<section class="flo-l">
<h3 class="fv">Insurance we offer</h3>
<h4>Business coverage in New York and Georgia.</h4>
</section>
<section class="flo-r vertLin">
<p class="fv"><i class="fa fa-users"></i> Martial Arts Centers</p>
<p class="fv"><i class="fa fa-picture-o"></i> Museums</p>
<p class="fv"><i class="fa fa-smile-o"></i> Child Care Centers</p>
<p class="fv"><i class="fa fa-book"></i> Libraries</p>
<p class="fv"><i class="fa fa-ticket"></i> Fairs and Fairgrounds</p>
<p class="fv"><i class="fa fa-male"></i> Adult Care Centers</p>
<p class="fv"><i class="fa fa-sun-o"></i> Religious Organizations</p>
<p class="fv"><i class="fa fa-heart"></i> Yoga Studios</p>
<p class="fv"><i class="fa fa-heart"></i> Dance Studios</p>
<p class="fv"><i class="fa fa-bullhorn"></i> Gymnasiums</p>
</section>
</div>
</section>
<section id="sec-3">
<div id="contact">
<div class="flo-l">
<h3 class="fv">Email</h3>
<p>comprehensive contact</p>
<a href="mailto:[email protected]" class="contact">[email protected]</a>
<p>Get an insurance quote</p>
<p>Get in touch via the internet and get a quote on insurance for your business</p>
</div>
<div class="flo-r">
<h3 class="fv">Phone</h3>
<p>personal contact</p>
<h3>315-747-4544</h3>
<p>Get an insurance quote</p>
<p>Get in touch via the internet and get a quote on insurance for your business</p>
</div>
<div class="flo-bottom"><h3>Let us protect you, so you can focus on your business.</h3></div>
</div>
</section>
<script>
var _gaq=[['_setAccount','UA-XXXXX-X'],['_trackPageview']];
(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
g.src='//www.google-analytics.com/ga.js';
s.parentNode.insertBefore(g,s)}(document,'script'));
</script>
</body>
</html>
And the CSS:
/* ==========================================================================
HTML5 Boilerplate styles - h5bp.com (generated via initializr.com)
========================================================================== */
html,
button,
input,
select,
textarea {
color: #222;
}
body {
font-size: 1em;
line-height: 1.4;
}
::-moz-selection {
background: #b3d4fc;
text-shadow: none;
}
::selection {
background: #b3d4fc;
text-shadow: none;
}
hr {
display: block;
height: 1px;
border: 0;
border-top: 1px solid #ccc;
margin: 1em 0;
padding: 0;
}
img {
vertical-align: middle;
}
fieldset {
border: 0;
margin: 0;
padding: 0;
}
textarea {
resize: vertical;
}
.chromeframe {
margin: 0.2em 0;
background: #ccc;
color: #000;
padding: 0.2em 0;
}
/***************
Webfonts:
***************/
@font-face {
font-family: 'edmondsans';
src: url('edmondsans-regular-webfont.eot');
src: url('edmondsans-regular-webfont.eot?#iefix') format('embedded-opentype'),
url('edmondsans-regular-webfont.woff') format('woff'),
url('edmondsans-regular-webfont.ttf') format('truetype'),
url('edmondsans-regular-webfont.svg#edmondsans') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'fairview';
src: url('fairview_regular-webfont.eot');
src: url('fairview_regular-webfont.eot?#iefix') format('embedded-opentype'),
url('fairview_regular-webfont.woff') format('woff'),
url('fairview_regular-webfont.ttf') format('truetype'),
url('fairview_regular-webfont.svg#fairview') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'lavanderia';
src: url('lavanderia_regular-webfont.eot');
src: url('lavanderia_regular-webfont.eot?#iefix') format('embedded-opentype'),
url('lavanderia_regular-webfont.woff') format('woff'),
url('lavanderia_regular-webfont.ttf') format('truetype'),
url('lavanderia_regular-webfont.svg#lavanderia') format('svg');
font-weight: normal;
font-style: normal;
}
/***************
Content:
***************/
/* Floats: */
.flo-l {
float: left;
}
.flo-r {
float: right;
}
.center {
margin: 0 auto;
}
/* Font settings: */
.ed {
font-family: "edmondsans", sans-serif
}
.fv {
font-family: "fairview", sans-serif
}
.lava {
font-family: "lavanderia", sans-serif
}
/* Sections: */
#sec-1 {
min-width:960px;
height: 438px;
background-image: url(../images/headbg.jpg);
background-repeat: no-repeat;
background-color: #EEE;
background-size: cover;
}
#sec-2 {
margin: 0 auto;
min-width: 960px;
height: 419px;
}
#sec-3 {
margin: 0 auto;
min-width: 960px;
height: 418px;
background: #375e00; /* Old browsers */
background: -moz-linear-gradient(top, #375e00 0%, #0f3201 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#375e00), color-stop(100%,#0f3201)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #375e00 0%,#0f3201 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #375e00 0%,#0f3201 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #375e00 0%,#0f3201 100%); /* IE10+ */
background: linear-gradient(to bottom, #375e00 0%,#0f3201 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#375e00', endColorstr='#0f3201',GradientType=0 ); /* IE6-9 */
background-image: url(../images/stacked_circles.png) repeat;
}
/* Sub-sections: */
#contact {
width: 600px;
height: 300px;
/* Background Gradient: */
background: #d7d7d7; /* Old browsers */
background: -moz-linear-gradient(top, #d7d7d7 0%, #f0f0f0 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#d7d7d7), color-stop(100%,#f0f0f0)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #d7d7d7 0%,#f0f0f0 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #d7d7d7 0%,#f0f0f0 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #d7d7d7 0%,#f0f0f0 100%); /* IE10+ */
background: linear-gradient(to bottom, #d7d7d7 0%,#f0f0f0 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d7d7d7', endColorstr='#f0f0f0',GradientType=0 ); /* IE6-9 */
/* Box-shadow: */
-webkit-box-shadow: inset 5px px rgba(255, 255, 190, 75);
box-shadow: inset 5px px rgba(255, 255, 190, 75);
/* Border: */
border: 1px solid black
}
/* Other: */
.vertLin {
border-left: thick solid #000;
}
/* ==========================================================================
Media Queries
========================================================================== */
@media only screen and (min-width: 35em) {
}
@media print,
(-o-min-device-pixel-ratio: 5/4),
(-webkit-min-device-pixel-ratio: 1.25),
(min-resolution: 120dpi) {
}
/* ==========================================================================
Helper classes
========================================================================== */
.ir {
background-color: transparent;
border: 0;
overflow: hidden;
*text-indent: -9999px;
}
.ir:before {
content: "";
display: block;
width: 0;
height: 150%;
}
.hidden {
display: none !important;
visibility: hidden;
}
.visuallyhidden {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
clip: auto;
height: auto;
margin: 0;
overflow: visible;
position: static;
width: auto;
}
.invisible {
visibility: hidden;
}
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
/* ==========================================================================
Print styles
========================================================================== */
@media print {
* {
background: transparent !important;
color: #000 !important; /* Black prints faster: h5bp.com/s */
box-shadow: none !important;
text-shadow: none !important;
}
a,
a:visited {
text-decoration: underline;
}
a[href]:after {
content: " (" attr(href) ")";
}
abbr[title]:after {
content: " (" attr(title) ")";
}
/*
* Don't show links for images, or javascript/internal links
*/
.ir a:after,
a[href^="javascript:"]:after,
a[href^="#"]:after {
content: "";
}
pre,
blockquote {
border: 1px solid #999;
page-break-inside: avoid;
}
thead {
display: table-header-group; /* h5bp.com/t */
}
tr,
img {
page-break-inside: avoid;
}
img {
max-width: 100% !important;
}
@page {
margin: 0.5cm;
}
p,
h2,
h3 {
orphans: 3;
widows: 3;
}
h2,
h3 {
page-break-after: avoid;
}
}
Upvotes: 1
Views: 220
Answers (4)
quarky
Reputation: 748
I have exactly the same problem when I was floating elements and not using clearfix properly. Check if you use clearfix for every element that contains children element with float: left or float: right property.
for example:
<header class="clearfix">
<nav class="flo-l">
<a href="#services" class="ed">Services</a>
<a href="#contact" class="ed">Email</a>
</nav>
<h1 class="lava">Hillside Insurance Agency</h1>
<nav class="flo-r">
<a href="#contact" class="ed">Phone</a>
<a href="#about" class="ed">About</a>
</nav>
</header>
Check all element in whole document. I works for me.
Upvotes: 0
dougajmcdonald
Reputation: 20037
Have you considered using a CSS Reset sheet? I find it removes most of these frustrations and gives you a blank state to work from.
I tend to use:
http://html5doctor.com/html-5-reset-stylesheet/
Upvotes: 0
bitandbang
Reputation: 51
A friend contacted me and said it's WebKit's fault. If you inspect the H1 in the header, it adds I believe 0.83em to the h1 with
:-webkit-any(article,aside,nav,section) :-webkit-any(article,aside,nav,section) h1
It does the same with H2 and other elements as well. I have no idea why they would do this. A supposition on their part? Seems dumb to me, but I'm not an expert. Anyway, here's the fix for the h1s:
:-webkit-any(article,aside,nav,section) :-webkit-any(article,aside,nav,section) h1 {
margin: 0;
}
Upvotes: 0
John
Reputation: 7329
This has happened to me before. I honestly am looking for a better fix, but it annoys me so much I just end up using absolute positioning on html (or body maybe) and set the top to 0. I know this is a quick fix and probably not what you're looking for.
So you can try the following:
html, body {
position: absolute;
top: 0;
}
That should at least fix the problem.
Upvotes: 1
Related Questions
- unable to resolve html tag creating white space at top of page
- Extra white space at the top of my page
- CSS - What is causing the Whitespace
- Extra whitespace under the HTML tag
- Whitespace at top of webpage
- There's white space on the top of my html page?
- CSS / HTML% Mystery White space issue
- Unexplainable whitespace?
- CSS HTML Strange White Space
- What is causing whitespace on the top & bottom?