Member Avatar for Member #321605

How would I rid this design of the white space at the top and sides of the page? My code is set out as below:

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" lang="en" xml:lang="en">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Further Flight</title>
<link rel="stylesheet" type="text/css" href=""/>
</head>

<body>

<div id="secondary"><?php include($_SERVER['DOCUMENT_ROOT'].'/style/20080820_secondary.php');?></div>
<div id="logo"><?php include($_SERVER['DOCUMENT_ROOT'].'/style/20080820_logo.php');?></div>
<div id="navigation"><?php include($_SERVER['DOCUMENT_ROOT'].'/style/20080820_main.php');?></div>

</html></head></body>

CSS

#secondary{
	margin: 0px 0px 0px 0px;
	width: 100%;
	height: 15px;
	font-family: arial, verdana, sans-serif;
	font-size: 70%;
	background-color: #494949;
	padding: 5px 0px 5px 0px;
}

#logo{
	margin: 0px 0px 0px 0px;
	width: 100%;
	height: 80px;
	font-family: arial, verdana, sans-serif;
	font-size: 80%;
	background-color: #000000;
}

/*------  MAIN NAVIGATION  ------*/
/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */

.solidblockmenu{
margin: 0;
padding: 0;
float: left;
font: bold 13px Arial;
width: 100%;
overflow: hidden;
margin-bottom: 1em;
border: 1px solid #625e00;
border-width: 1px 0;
background: black url(/images/blockdefault.gif) center center repeat-x;
}

.solidblockmenu li{
display: inline;
}

.solidblockmenu li a{
float: left;
color: white;
padding: 9px 11px;
text-decoration: none;
border-right: 1px solid white;
}

.solidblockmenu li a:visited{
color: white;
}

.solidblockmenu li a:hover, .solidblockmenu li .current{
color: white;
background: transparent url(/images/blockactive.gif) center center repeat-x;
}

Any assistance would be greatly appreciated.

  • 2 Contributors
  • 1 Reply
  • 128 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by omol

Dani AI

Generated

Two likely causes here: the browser’s default page margin and a malformed HTML document. The quick, safe fixes are to reset the page margins and stop “nudging” elements with relative positioning — ’s top/left tweak will hide the symptom but not the root cause. Also check the HTML: the closing tags in the posted markup are out of order (head/body/html). Fixing that stops odd rendering quirks.

Apply a small, targeted reset and a couple of layout tweaks:

html, body {
  margin: 0;
  padding: 0;
}

/* make logo images sit flush */
#logo img {
  display: block;
}

/* a full-width navigation container does not need to float */
.solidblockmenu {
  float: none;
  width: 100%;
}

/* optional: make width math include padding/border */
* { box-sizing: border-box; }

Debugging tips: use the browser inspector to look at computed margins and the box model for body and the first child element — that will immediately show whether the gap comes from body margin, a top margin on the first element, or an overflowing floated item. Temporarily outline elements (or give them distinct background colors) so you can see which box creates the white strip. If the horizontal gap persists, check for anchors/images in the nav that cumulatively exceed the viewport (reduce padding or switch anchors to display:block to control sizing).

Final note: validate and correct the HTML structure (close head before body, then close body then html) and avoid using position offsets to fix spacing — fixes should come from correct flow, reset rules, and proper box-sizing.

Member Avatar for omol

Ok first the logo, include this.

#logo {
	position: relative;
	top: -11px;
	left: -9px;
}

The rest is the same problem, you should be able to see whats happening now? If not post back and i will explain.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.