How to eliminate blank space at top in CSS?
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.
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>
ASKER
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.
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>
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Oh yes!!! that's waht I'm talking about!!
Thank you.
e!
Thank you.
e!
<div id="entirebody" style="width: 800px; margin: 0 auto;">
Then get rid of body margin/padding:
body {padding-top:0; margin-top:0;}