My website can be found at: . There seems to be an unusual ~25px gap at the top of the page before the content starts displaying.
The current code/layout was inherited from the previous web design company and doesn't meet my standards, but it functions well except for this issue.
I am trying to minimize this gap at the top of the page, but I haven't been able to identify what is causing it.
- I have already set rules on the body/html elements to ensure zero margin/padding.
- After researching similar queries on SO, the common response seems to be adjusting margin/padding as mentioned in point one. However, that doesn't appear to be the root cause in this instance.
- FireBug is unable to select that specific area of the screen, but it confirms that my DIV, Body, and HTML elements have padding/margin set to zero.
- This gap appears consistently across different browsers like Chrome, Firefox, and IE (ruling out a Firebug/Firefox-specific problem).
- I have removed various hidden elements such as Google Analytics scripts and microdata content at the top of the page, yet these removals do not resolve the layout issue.
Below are simplified versions of the CSS and HTML layout. The page includes lightbox functionality, but its CSS does not seem to affect the main page layout CSS which is contained within 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 APPEARS HERE **
<div class="containX" id="container">
<script type="text/javascript">
/** Only Google analytics stuff ***/
</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 offers 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 simple that I overlooked, but for future reference - check the top-margin CSS of all lower page elements!!