2 replies [Last post]
eelucid8
eelucid8's picture
Offline
Regular
Chicago
Last seen: 4 years 51 weeks ago
Chicago
Timezone: GMT-6
Joined: 2011-10-26
Posts: 18
Points: 28

Hi there,
I'm embarking on my first responsive design site, and am running into a totally basic issue that I can't figure out. I have a wrapper div, and a header div inside it, but there is a space above the header that I can't account for. The page is at: http://aquariphone.com/demo/ and the desktop.css is the style I've built first (and where the problem is). Any tips would be greatly appreciated. Firebug seems to be pointing at the wrapper as the culprit. I'm having a similar problem with extra space below the footer tag. Thanks for your time,
Bill

Here is my html:

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 
<!--[if lt IE 9]>
	<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
 
<title>SEO to Go</title>
 
<meta name="viewport" content="width=device-width, initial-scale=1">
 
<link rel="stylesheet" type="text/css" href="global.css">
 
<link href="desktop.css" type="text/css" media="screen and (min-device-width: 769px)" rel="stylesheet"/>
<link href="tablet.css" type="text/css" media="screen and (min-width:481px) and (max-device-width: 768px)" rel="stylesheet"/>
<link href="mobile.css" type="text/css" media="screen and (max-device-width: 480px)" rel="stylesheet"/>
 
</head>
 
<body>
<div id="wrapper">
<header>
<h1>SEO to Go</h1>
</header>
 
<div id="navCol">
<nav>
<ul>
<li><a href="index.html">Welcome</a></li>
<li><a href="optimizing-content-for-seo.html">Content</a></li>
<li><a href="inbound-links.html">Inbound Links</a></li>
<li><a href="seo-keyword-research.html">Keyword Research</a></li>
<li><a href="local-page-placement.html">Local Pages</a></li>
<li><a href="seo-roi-tools.html">Gauging ROI</a></li>
</ul>
</nav>
</div><!-- end navcol -->
 
<div id="contentCol">
<section>
<h2>Welcome to SEO to Go</h2>
<article>
<h3>What is SEO?</h3>
<p>So you've constructed your website, but the days of 'build it and they will come' are long gone. What good is your website if nobody knows it exists? SEO is an acronym for <strong>Search Engine Optimization</strong>. This website will introduce you to the basics of how to optimize your site so it will rank well in search engines such as Google, Bing, Ask, and many others. After you've optimized your site, there are several necessary steps to take to ensure that the search engines believe that your site is relevant to the scope of the information you're providing.</p>
<p>The algorhythms of the search engines are constantly changing and these tips mentioned here are far from exhaustive, but the tecniques will give you an excellent starting point for reaching your intended marketing goals.</p>
</article>
</section>
</div><!-- end contentCol -->
<footer>
<p>&copy;2013 This is a demonstration website which employs responsive design based on screen resolution</p>
<aside>Bill Steffey<br/>4637 N. Spaulding Ave.<br/>Chicago, IL 60625</aside>
</footer>
</div><!-- end wrapper -->
</body>
</html> 

and here is the CSS:

@charset "utf-8";
/* CSS Document */
 
#wrapper {
	width: 85%;
	margin: 5em auto 0;
	border: black 2px solid;
}
 
header {
	width: 100%;
	height: 35px;
	background-color: #09F;
	margin: 0;
}
 
h1 {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 1.5em;
	color: #000;
	margin-left: 1em;
}
 
h2 {
	font-family: Arial, Helvetica, sans-serif; 
	font-size: 1.2em;
	color: #000;
	border-bottom: 1px solid #000;
	margin-bottom: 2em;
}
 
h3 {
	font-family: Arial, Helvetica, sans-serif; 
	font-size: 1em;
	color: #000;
	margin-bottom: .7em;
}
 
p {
	line-height: 1.8em;
	margin-bottom: 1em;
}
 
#navCol {
	width: 28%;
	background: #ccc;
	float: left;
}
 
nav {
	font-family: Arial, Helvetica, sans-serif;
	margin-top: 3.5em;
}
 
ul {list-style-type: none;}
li {line-height: 1.7em;}
 
a {
	display: block;
	width: 80%;
}
 
#contentCol {
	width: 68%;
	background: #fff;
	padding: 2%;
	float: right;
}
 
footer {
	width: 100%;
	clear: both;
	background-color: #09F;
}
 
aside {
	float: right;
	line-height: 2em;
}

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 39 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Margins

To begin, you have a top margin of 5em on #wrapper, which computes to 80px. Further the margin on h1 adds 16px within #wrapper. Then there's the 8px margin on body, for a total of 104px empty space at the top.

At the bottom, there is the 8px body margin and 16px from the p in the footer for a 24px gap.

IE's gaps may have different numbers as IE has never done margin collapse correctly.

The border on #wrapper prevents the h1's and p's margins from collapsing.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

eelucid8
eelucid8's picture
Offline
Regular
Chicago
Last seen: 4 years 51 weeks ago
Chicago
Timezone: GMT-6
Joined: 2011-10-26
Posts: 18
Points: 28

Thanks Gary... I never

Thanks Gary... I never realized a border prevented collapse. Great to know!
-Bill