Move Table to Very Top of Page

Forum Moderators: open

Message Too Old, No Replies

Move Table to Very Top of Page

steveweber123

1:54 pm on Jul 12, 2007 (gmt 0)

I have a simple HTML page with one table. There is a a gap above the table showing in the browser. I'd like to move the table all the way to the top.

I have searched the forum and found this:

style="margin-top:0;padding-top:0;"

But that does not work. It moves it up when I put it into dreamweaver (in the edit mode), but the browser still shows the gap after a refresh...both IE and FF browsers show the gap.

Can someone help,

Thanks,

Steve

thecoalman

2:45 pm on Jul 12, 2007 (gmt 0)

Add it to the body tag.

steveweber123

4:17 pm on Jul 12, 2007 (gmt 0)

Yes, I did do that like this:

It moves it right up in the dreamweaver view when I add it. However, in a browser it starts at the top for an instant, then moves down about 3/8 of an inch.

I have zero padding for the table and nothing else special about the page. Not sure if I can post the URL here...it is a sales page.

I appreciate your help,

Steve

thecoalman

4:34 pm on Jul 12, 2007 (gmt 0)

Check your page in a html validator for missing tags. Apply a contrasting background color to the table so you can see exactly where it is.

Trace

4:38 pm on Jul 12, 2007 (gmt 0)

it might just be that you're missing a space, right before style.

steveweber123

7:59 pm on Jul 12, 2007 (gmt 0)

I fixed the space in the body tag and it did move it up a hair. But it is still not all the way to the top. It is still a little over 1/4 inch away.

I gave the table a border and that is in fact right where it ends.

I validated the html and nothing came up which I thought was serious...some missing alt tags etc.

Steve

Marshall

8:22 pm on Jul 12, 2007 (gmt 0)

Steve,

Depending on your doctype, some browsers may not support these tags:
<body background="background1.gif" link="#006600"style="margin-top:0;padding-top:0;">.

Try:
<head>
<style type="text/css">
body {
background-image: url(background1.gif); /* adjust url to exact file path */
margin-top: 0px;
padding-top: 0px;
}
a {
color: #060;
}
</style>
</head>

Marshall

steveweber123

8:57 pm on Jul 12, 2007 (gmt 0)

Well heck. That last code didn't work either. When the page loads, the table is up at the top for a moment before it drops back down.

I'll post the code to the top of the page here if someone has another suggestion. (There is no other CSS or other scripting on the page.)Otherwise I'll give up on it for a while I guess.

Thanks everyone!

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

<title></title></head>
<head>
<style type="text/css">
body {
background-image: url(background1.gif); /* adjust url to exact file path */
margin-top: 0px;
padding-top: 0px;
}
a {
color: #060;
}
</style>
</head>

encyclo

9:02 pm on Jul 12, 2007 (gmt 0)

You've got two

head

sections - the error-handling in the browser will take the second as on-page space.

<title></title>[b]</head>
<head>[/b]

Try:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<style type="text/css">
body {
background-image: url(background1.gif); /* adjust url to exact file path */
margin-top: 0px;
padding-top: 0px;
}
a {
color: #060;
}
</style>
</head>
<table width="724" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">

The HTML validator [validator.w3.org] is your friend. ;)

londrum

9:28 pm on Jul 12, 2007 (gmt 0)

also, maybe you could try removing any margins on the table.
add this to your styles section

table { margin-top: 0; }

steveweber123

3:34 am on Jul 13, 2007 (gmt 0)

I just knew that double head entry was causing it when you pointed that out...but no luck.

Thanks everyone for all your input. I'll give it a rest for now...probably something dog simple staring me in the face.

Thanks again,

Steve

encyclo

3:38 am on Jul 13, 2007 (gmt 0)

What does the validator say? Any other errors? You may have extra white space above the doctype, for example. The validator is an excellent way of finding the culprit.

steveweber123

4:55 am on Jul 13, 2007 (gmt 0)

This is the only thing that comes close in the validator. The rest are alts and problems with lists. It is about the image I have in the top of my table which won't go all the way to the top:

Error Line 20 column 7: start tag for "TR" omitted, but its declaration does not permit this.

However, I did discover something. If I take the image out of the table, it WILL go all the way to the top by itself. (But there is then a big gap between the image and the table.) If I get rid of the image, the table won't go to the top. So I think it is something with the table. (pad and space are set to 0)

Steve

thecoalman

5:13 am on Jul 13, 2007 (gmt 0)

Error Line 20 column 7: start tag for "TR" omitted, but its declaration does not permit this.

You have to fix that, missing tags can cause all kinds of varying affects. You might also want to try adding this in the head tag between the CSS tags:

* {
margin: 0;
padding: 0;
}

Trace

3:11 pm on Jul 13, 2007 (gmt 0)

I don't see the body tag in your code snippet.

This works for me;

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title></head>
<head>
<style type="text/css">
body {
background-image: url(background1.gif); /* adjust url to exact file path */
margin-top: 0px;
padding-top: 0px;
}
a {
color: #060;
}
</style>
</head>
<body>
<table width="724" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
<tr>
<td>sdfg</td>
</tr>
</table>
</body>
</html>

penders

3:20 pm on Jul 13, 2007 (gmt 0)

You might also want to try adding this in the head tag between the CSS tags:
* {
margin: 0;
padding: 0;
}

Only if you want to give yourself a mild heart attack! ;) This will set the margin and padding to 0 on all elements. The idea being that it will give a common ground on which to build your styles across all browsers - since different browsers have different default settings for margin / padding.

This could be a good thing if you are building a new site, but if you already have a functioning site - then you'd have to redo your entire stylesheet! This is of course assuming you have built your site around CSS in the first place.

penders

3:37 pm on Jul 13, 2007 (gmt 0)

Trace:
I don't see the body tag in your code snippet.
This works for me...

Yeah, I wondered that, but the BODY element is optional (W3C [w3.org]) and it does work OK without it.

Just to note, you've got the two <head> sections back in! ;) (See encyclo's post [webmasterworld.com] above)

steveweber123

1:55 pm on Jul 14, 2007 (gmt 0)

OK, I got it working! Thanks everyone!

Trace, You are right, your example code did work. I just copied and pasted it from </head> on up.

However it had two heads in it. It did work with the two heads though...but I fixed that and it works and validates now.

Thanks a lot!

Steve

JaneConsumer

1:19 am on Jul 22, 2007 (gmt 0)

Thanks Encyclo - I was struggling with the same problem for weeks. I can't believe it was that simple. Isn't it always!