Reputation: 22760

Mystery gap at the top of a webpage

I have a website that is here: http://www.southwoldholidayhomes.com/ and as you may see there is a ~25px gap at the top of the page before the content begins.

The original code / layout has been inherited from the previous web design company, and is not up to my standard but works well enough, aside from this issue.

I want to reduce this top-of-page gap, but I can't find what is declaring it.

I have set rules in place on the body / html elements to give margin/padding of zero.
I have viewed various similar questions on SO which all seem to state it is setting of the margin/padding as per point one. I do not see that this is the cause, in this case.
FireBug can not select that area of the screen but does confirm my DIV, Body and HTML elements have padding/margin of zero.
The Gap is cross browser appearing on Chrome, Firefox and IE (so it's not a firebug / firefox specific issue)
I have removed various hidden elements such as <script> for google analytics at the top of the page and <div> for microdata content at the top of the page, but these do not change this layout issue.

Below is the CSS and HTML layout in a slightly simplified form. The page layout does use lightbox but that CSS does not appear to interfere with the page layout CSS which is in a single file.

CSS

html {
        margin: 0 !important; ///used for problem solving, not on original.
}
body {
    font-family: 'Source Sans Pro', sans-serif;
    margin:0;
    padding: 0;
    color: #111F35;
    font-size: 16px;
    font-weight:400;
    /*line-height: 1.4;*/
    background-color:  #BACDC7;
}
.containX, .container {
    width: 61.875em;
    max-width:990px;
    background: #FFF;
    margin:0 auto; ///used for problem solving, not on original.
    padding: 0;
}

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" xml:lang="en-GB" lang="en-GB">
<head>
...
</head>
<body>
** GAP APPEAR HERE **
<div class="containX" id="container">
<script type="text/javascript">
/** Google analytics stuff only ***/
</script>
<div itemscope itemtype="http://schema.org/LocalBusiness" style="display:none;">
<span itemprop="image">http://www.southwoldluxuryholidayhomes.co.uk/images/head1.jpg</span>
<span itemprop="name">Far View Holiday Homes Southwold</span>
<span itemprop="description">Far View are a high quality 4 star experience, with a Gold Award from Visit England. These Self-catering apartments overlook Southwold Common, on the Suffolk Heritage Coast.</span>
</div>
  <div class="header" >

EDIT: I knew it was something silly that I missed, but for future readers - check the top-margin CSS of all lower page elements!!

Upvotes: 1

Answers (4)

pii_ke

Reputation: 2901

style rule margin-top: 0.6em; for selector .header h1 at http://www.southwoldholidayhomes.com/css/stylesdw2.css line 73

Upvotes: 1

Saad

Reputation: 53879

If you inspect with Chrome dev tools, you can see that there is margin being applied to the h1 in the .header. Removing that margin fixed it for me.

Put this in your CSS: