?
Solved

How to eliminate blank space at top in CSS?

Posted on 2008-02-07
4
Medium Priority
?
656 Views
Last Modified: 2010-04-21
Designed in Photoshop, using Dreamweaver, no separate style sheet.
We were able to get page to float and stay centered, but how do I flush entire page all the way to the top eliminating any white space above. I tried zeroing out the margins in the table CSS, but to no avail.


<!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">
<head>
<title>indexmain</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<!-- ImageReady Preload Script (indexmain.psd) -->
<script type="text/javascript">
<!--
 
userAgent = window.navigator.userAgent;
browserVers = parseInt(userAgent.charAt(userAgent.indexOf("/")+1),10);
function newImage(arg) {
	if (document.images) {
		rslt = new Image();
		rslt.src = arg;
		return rslt;
	}
}
 
function findElement(n,ly) {
	if (browserVers < 4)		return document[n];
	var curDoc = ly ? ly.document : document;
	var elem = curDoc[n];
	if (!elem) {
		for (var i=0;i<curDoc.layers.length;i++) {
			elem = findElement(n,curDoc.layers[i]);
			if (elem) return elem;
		}
	}
	return elem;
}
 
function changeImages() {
	if (document.images && (preloadFlag == true)) {
		var img;
		for (var i=0; i<changeImages.arguments.length; i+=2) {
			img = null;
			if (document.layers) {
				img = findElement(changeImages.arguments[i],0);
			}
			else {
				img = document.images[changeImages.arguments[i]];
			}
			if (img) {
				img.src = changeImages.arguments[i+1];
			}
		}
	}
}
 
var preloadFlag = false;
function preloadImages() {
	if (document.images) {
		indexmain_03_over = newImage("images/indexmain_03-over.gif");
		indexmain_05_over = newImage("images/indexmain_05-over.gif");
		indexmain_06_over = newImage("images/indexmain_06-over.gif");
		indexmain_07_over = newImage("images/indexmain_07-over.jpg");
		preloadFlag = true;
	}
}
 
// -->
</script>
<!-- End Preload Script -->
<!-- ImageReady Styles (indexmain.psd) -->
<style type="text/css">
<!--
 
#Table_01 {
	position:absolute;
	left:0px;
	top:0px;
	width:800px;
	height:933px;
}
#entirebody {
	position: relative;
}
 
#indexmaintop_ {
	position:absolute;
	left:0px;
	top:0px;
	width:800px;
	height:150px;
}
 
#indexmainleftstrip_ {
	position:absolute;
	left:0px;
	top:150px;
	width:25px;
	height:783px;
}
 
#indexmain-03_ {
	position:absolute;
	left:25px;
	top:150px;
	width:130px;
	height:27px;
}
 
#indexmainbody_ {
	position:absolute;
	left:155px;
	top:150px;
	width:645px;
	height:783px;
}
 
#indexmain-05_ {
	position:absolute;
	left:25px;
	top:177px;
	width:130px;
	height:27px;
}
 
#indexmain-06_ {
	position:absolute;
	left:25px;
	top:204px;
	width:130px;
	height:26px;
}
 
#indexmain-07_ {
	position:absolute;
	left:25px;
	top:230px;
	width:130px;
	height:30px;
}
 
#indexmainleft_ {
	position:absolute;
	left:25px;
	top:260px;
	width:130px;
	height:673px;
}
 
-->
</style>
<!-- End ImageReady Styles -->
</head>
<body onload="preloadImages();" style="background-color:#FFFFFF;">
<!-- ImageReady Slices (indexmain.psd) -->
<div id="entirebody" style="width: 800px; margin: 20px auto;">
  <div id="Table_01">
	<div id="indexmaintop_">
		<a href="index.php">
			<img id="indexmaintop" src="images/indexmaintop.gif" width="800" height="150" border="0" alt="" /></a>
	</div>
	<div id="indexmainleftstrip_">
		<img id="indexmainleftstrip" src="images/indexmainleftstrip.gif" width="25" height="783" alt="" />
	</div>
	<div id="indexmain-03_">
		<a href="index.php"
			onmouseover="window.status='Return to Home Page'; changeImages('indexmain_03', 'images/indexmain_03-over.gif'); return true;"
			onmouseout="window.status=''; changeImages('indexmain_03', 'images/indexmain_03.gif'); return true;"
			onmousedown="changeImages('indexmain_03', 'images/indexmain_03-over.gif'); return true;"
			onmouseup="changeImages('indexmain_03', 'images/indexmain_03-over.gif'); return true;">
			<img name="indexmain_03" id="indexmain_03" src="images/indexmain_03.gif" width="130" height="27" border="0" alt="" /></a>
	</div>
	<div id="indexmainbody_">
		<img id="indexmainbody" src="images/indexmainbody.gif" width="645" height="783" alt="" />
	</div>
	<div id="indexmain-05_">
		<a href="library.php"
			onmouseover="window.status='Search the Song Library'; changeImages('indexmain_05', 'images/indexmain_05-over.gif'); return true;"
			onmouseout="window.status=''; changeImages('indexmain_05', 'images/indexmain_05.gif'); return true;"
			onmousedown="changeImages('indexmain_05', 'images/indexmain_05-over.gif'); return true;"
			onmouseup="changeImages('indexmain_05', 'images/indexmain_05-over.gif'); return true;">
			<img name="indexmain_05" id="indexmain_05" src="images/indexmain_05.gif" width="130" height="27" border="0" alt="" /></a>
	</div>
	<div id="indexmain-06_">
		<a href="songwriters.php"
			onmouseover="window.status='Songwriters'; changeImages('indexmain_06', 'images/indexmain_06-over.gif'); return true;"
			onmouseout="window.status=''; changeImages('indexmain_06', 'images/indexmain_06.gif'); return true;"
			onmousedown="changeImages('indexmain_06', 'images/indexmain_06-over.gif'); return true;"
			onmouseup="changeImages('indexmain_06', 'images/indexmain_06-over.gif'); return true;">
			<img name="indexmain_06" id="indexmain_06" src="images/indexmain_06.gif" width="130" height="26" border="0" alt="" /></a>
	</div>
	<div id="indexmain-07_">
		<a href="songseekers.php"
			onmouseover="window.status='Seeking Music?'; changeImages('indexmain_07', 'images/indexmain_07-over.jpg'); return true;"
			onmouseout="window.status=''; changeImages('indexmain_07', 'images/indexmain_07.jpg'); return true;"
			onmousedown="changeImages('indexmain_07', 'images/indexmain_07-over.jpg'); return true;"
			onmouseup="changeImages('indexmain_07', 'images/indexmain_07-over.jpg'); return true;">
			<img name="indexmain_07" id="indexmain_07" src="images/indexmain_07.jpg" width="130" height="30" border="0" alt="" /></a>
	</div>
	<div id="indexmainleft_">
		<img id="indexmainleft" src="images/indexmainleft.gif" width="130" height="673" alt="" />
	</div>
</div>
<!-- End ImageReady Slices --></div>
</body>
</html>

Open in new window

0
Comment
Question by:edvinson
  • 2
  • 2
4 Comments
 
LVL 25

Expert Comment

by:Rouchie
ID: 20841019
First get rid of the margin:

<div id="entirebody" style="width: 800px; margin: 0 auto;">

Then get rid of body margin/padding:

body {padding-top:0; margin-top:0;}
0
 
LVL 1

Author Comment

by:edvinson
ID: 20841250
Rouchie, thanks, tried that, wasn't real clear on where to insert the:  
body {padding-top:0; margin-top:0;} but as you can see we're not quite there yet.

http://www.plugasong/indexmainFIX1.html

It moved a little.

<!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">
<head>
<title>indexmain</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<!-- ImageReady Preload Script (indexmain.psd) -->
<script type="text/javascript">
<!--
 
userAgent = window.navigator.userAgent;
browserVers = parseInt(userAgent.charAt(userAgent.indexOf("/")+1),10);
function newImage(arg) {
	if (document.images) {
		rslt = new Image();
		rslt.src = arg;
		return rslt;
	}
}
 
function findElement(n,ly) {
	if (browserVers < 4)		return document[n];
	var curDoc = ly ? ly.document : document;
	var elem = curDoc[n];
	if (!elem) {
		for (var i=0;i<curDoc.layers.length;i++) {
			elem = findElement(n,curDoc.layers[i]);
			if (elem) return elem;
		}
	}
	return elem;
}
 
function changeImages() {
	if (document.images && (preloadFlag == true)) {
		var img;
		for (var i=0; i<changeImages.arguments.length; i+=2) {
			img = null;
			if (document.layers) {
				img = findElement(changeImages.arguments[i],0);
			}
			else {
				img = document.images[changeImages.arguments[i]];
			}
			if (img) {
				img.src = changeImages.arguments[i+1];
			}
		}
	}
}
 
var preloadFlag = false;
function preloadImages() {
	if (document.images) {
		indexmain_03_over = newImage("images/indexmain_03-over.gif");
		indexmain_05_over = newImage("images/indexmain_05-over.gif");
		indexmain_06_over = newImage("images/indexmain_06-over.gif");
		indexmain_07_over = newImage("images/indexmain_07-over.jpg");
		preloadFlag = true;
	}
}
 
// -->
</script>
<!-- End Preload Script -->
<!-- ImageReady Styles (indexmain.psd) -->
<style type="text/css">
<!--
 
#Table_01 {
	position:absolute;
	left:0px;
	top:0px;
	width:800px;
	height:933px;
	padding: 0px;
	
}
#entirebody {
	position: relative;
	
}
 
#indexmaintop_ {
	position:absolute;
	left:0px;
	top:0px;
	width:800px;
	height:150px;
}
 
#indexmainleftstrip_ {
	position:absolute;
	left:0px;
	top:150px;
	width:25px;
	height:783px;
}
 
#indexmain-03_ {
	position:absolute;
	left:25px;
	top:150px;
	width:130px;
	height:27px;
}
 
#indexmainbody_ {
	position:absolute;
	left:155px;
	top:150px;
	width:645px;
	height:783px;
}
 
#indexmain-05_ {
	position:absolute;
	left:25px;
	top:177px;
	width:130px;
	height:27px;
}
 
#indexmain-06_ {
	position:absolute;
	left:25px;
	top:204px;
	width:130px;
	height:26px;
}
 
#indexmain-07_ {
	position:absolute;
	left:25px;
	top:230px;
	width:130px;
	height:30px;
}
 
#indexmainleft_ {
	position:absolute;
	left:25px;
	top:260px;
	width:130px;
	height:673px;
}
 
-->
</style>
<!-- End ImageReady Styles -->
</head>
<body onload="preloadImages();" style="background-color:#FFFFFF;">
<!-- ImageReady Slices (indexmain.psd) -->
<div id="entirebody" style="width: 800px; margin: 0px auto; padding-top:0; 
	margin-top:0;">
  <div id="Table_01">
	<div id="indexmaintop_">
		<a href="index.php">
			<img id="indexmaintop" src="images/indexmaintop.gif" width="800" height="150" border="0" alt="" /></a>
	</div>
	<div id="indexmainleftstrip_">
		<img id="indexmainleftstrip" src="images/indexmainleftstrip.gif" width="25" height="783" alt="" />
	</div>
	<div id="indexmain-03_">
		<a href="index.php"
			onmouseover="window.status='Return to Home Page'; changeImages('indexmain_03', 'images/indexmain_03-over.gif'); return true;"
			onmouseout="window.status=''; changeImages('indexmain_03', 'images/indexmain_03.gif'); return true;"
			onmousedown="changeImages('indexmain_03', 'images/indexmain_03-over.gif'); return true;"
			onmouseup="changeImages('indexmain_03', 'images/indexmain_03-over.gif'); return true;">
			<img name="indexmain_03" id="indexmain_03" src="images/indexmain_03.gif" width="130" height="27" border="0" alt="" /></a>
	</div>
	<div id="indexmainbody_">
		<img id="indexmainbody" src="images/indexmainbody.gif" width="645" height="783" alt="" />
	</div>
	<div id="indexmain-05_">
		<a href="library.php"
			onmouseover="window.status='Search the Song Library'; changeImages('indexmain_05', 'images/indexmain_05-over.gif'); return true;"
			onmouseout="window.status=''; changeImages('indexmain_05', 'images/indexmain_05.gif'); return true;"
			onmousedown="changeImages('indexmain_05', 'images/indexmain_05-over.gif'); return true;"
			onmouseup="changeImages('indexmain_05', 'images/indexmain_05-over.gif'); return true;">
			<img name="indexmain_05" id="indexmain_05" src="images/indexmain_05.gif" width="130" height="27" border="0" alt="" /></a>
	</div>
	<div id="indexmain-06_">
		<a href="songwriters.php"
			onmouseover="window.status='Songwriters'; changeImages('indexmain_06', 'images/indexmain_06-over.gif'); return true;"
			onmouseout="window.status=''; changeImages('indexmain_06', 'images/indexmain_06.gif'); return true;"
			onmousedown="changeImages('indexmain_06', 'images/indexmain_06-over.gif'); return true;"
			onmouseup="changeImages('indexmain_06', 'images/indexmain_06-over.gif'); return true;">
			<img name="indexmain_06" id="indexmain_06" src="images/indexmain_06.gif" width="130" height="26" border="0" alt="" /></a>
	</div>
	<div id="indexmain-07_">
		<a href="songseekers.php"
			onmouseover="window.status='Seeking Music?'; changeImages('indexmain_07', 'images/indexmain_07-over.jpg'); return true;"
			onmouseout="window.status=''; changeImages('indexmain_07', 'images/indexmain_07.jpg'); return true;"
			onmousedown="changeImages('indexmain_07', 'images/indexmain_07-over.jpg'); return true;"
			onmouseup="changeImages('indexmain_07', 'images/indexmain_07-over.jpg'); return true;">
			<img name="indexmain_07" id="indexmain_07" src="images/indexmain_07.jpg" width="130" height="30" border="0" alt="" /></a>
	</div>
	<div id="indexmainleft_">
		<img id="indexmainleft" src="images/indexmainleft.gif" width="130" height="673" alt="" />
	</div>
</div>
<!-- End ImageReady Slices --></div>
</body>
</html>

Open in new window

0
 
LVL 25

Accepted Solution

by:
Rouchie earned 2000 total points
ID: 20841400
The body css info goes within the <style> declarations...

<style type="text/css">

   body {padding-top:0; margin-top:0;}

... remain css info here
</style>
0
 
LVL 1

Author Closing Comment

by:edvinson
ID: 31428832
Oh yes!!! that's waht I'm talking about!!

Thank you.

e!
0

Featured Post

Get your problem seen by more experts

Be seen. Boost your question’s priority for more expert views and faster solutions

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
Suggested Courses
Course of the Month5 days, 18 hours left to enroll

589 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question