...

View Full Version : Table Shifts Up And Left When Browsing.



Keith Clark
09-26-2003, 08:42 PM
Hi, I'm totally new to this forum, so, you know, forgive my newbie status ;)

I've made a *very* simple website layout in Microsoft FrontPage (2002).

You can see it here.

http://xmen.d-lyrium.net/jasbsb/www/html/

(Oh, er, forgive the title. It's not a statement on female sexuality, merely a quote from the movie 'Jay and Silent Bob Strike Back,' And is the name of a fictional animal rescue project called the Coalition for the Liberation of Itinerant Tree Dwellers, Promise ;) )

Anyway: In essence it's one big table which stretches to a 100% height-wise, and remains at a fixed width. This should allow the layout to fit in any IE window with no difficulties.

So, onto the problem...

If you click the link

http://xmen.d-lyrium.net/jasbsb/www/html/

You should be greeted with a window which looks something like this.

http://ewb3.ithium.net/ewbII/uploads/post-14-1064575754.gif

As you can see the table looks just the way it should do.

Now, try clicking one of the links at the top. Any of them.

When I click one, and when many of my friends click one, the new window loads up. Except the table has shifted a few pixels to the left (Not a big deal) and no longer stretches the full height of the window.

If that's not explained very well, you can see a screenshot below.

http://ewb3.ithium.net/ewbII/uploads/post-14-1064575769.gif

As you can see, the table no longer reaches the bottom.


However, if you refresh the bad page, the table then reaches the bottom!

And there is my problem. Does anyone know why the table is behaving the way it is?

I was stumped right away, so I asked around.

My first piece of advice was to remove all the unnecessary cra... stuff that FrontPage adds. Which I did, and the error still occurred.

I was then told that the window, for whatever reason, was making a space for a horizontal scrollbar. I didn't believe this, but I added a script to disable the bar anyway, still no joy, so I removed the script.

I was then told to play with the link targets, so I did. Initially the links weren't targeted, so they opened up in the same window of their own accord. I then tried _self _top and _parent, and none of them helped. So I tried _blank (New Window), now obviously this opened the links in a new window, however the new window didn't suffer the problem of the jumping table. Which I found interesting, however new windows aren't exactly practical so I returned the links to their previous incarnation of being untargeted. ;)

I noticed that if I encased the entire website in an iframe, that the problem doesn't occur, however that also isn't practical as the address bar of the browser displays the iframe window address, and not the address of the page contained within it.

So now I come to you :)

I would appreciate any and all help you could offer on the subject.

Thanks in advance - Keith.

Oh er, one last thing; if for whatever reason you can't access the html to take a sneak peak I'll list it below.


<HTML>
<HEAD>
<TITLE>The C.L.I.T Is Not Real!</TITLE>
<!--a:hover{text-decoration:underline; }--></style>
</HEAD>
<BODY BGCOLOR=#FDF0D5 LEFTMARGIN=0 TOPMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0 link="#000000" vlink="#000000" alink="#000000">
<!-- ImageReady Slices (ja2.psd) -->
<center>
<TABLE WIDTH=330 BORDER=0 CELLPADDING=0 CELLSPACING=0 bordercolor="#111111" height="100%">
<TR>
<TD height="199" width="12">
<img border="0" src="../images/layout_1/index2_01.gif" width="12" height="199"></TD>
<TD height="199" width="306">
<img border="0" src="../images/layout_1/index2_02.gif" width="306" height="199"></TD>
<TD height="199" width="12">
<img border="0" src="../images/layout_1/index2_03.gif" width="12" height="199"></TD>
</TR>
<TR>
<TD COLSPAN=3 height="12" width="330">
<img border="0" src="../images/layout_1/index2_04.gif" width="330" height="12"></TD>
</TR>
<TR>
<TD COLSPAN=3 height="100%" background="../images/layout_1/index2_05.gif" width="330">
<center>
<table border="0" cellpadding="4" cellspacing="0" bordercolor="#111111" width="306" height="100%">
<tr>
<td width="100%" valign="top">
<p align="center"><font size="1" face="Verdana">
<a href="index.html" style="text-decoration: none">Home</a> -
<a href="movie.html" style="text-decoration: none">Movie</a> -
<a href="cast.html" style="text-decoration: none">Cast</a> -
<a href="quotes.html" style="text-decoration: none">Quotes</a> -
<a href="trivia.html" style="text-decoration: none">Trivia</a> -
<a href="media.html" style="text-decoration: none">Media</a> -
<a href="misc.html" style="text-decoration: none">Misc</a></font><br>
<hr color="#000000" size="1" width="90%">
</td>
</tr>
</table>
</center>
</TD>
</TR>
</TABLE>
</center>
<!-- End ImageReady Slices -->
</BODY>
</HTML>

I hope that this post made some sort of sense to everyone, thanks again :)

zoobie
09-26-2003, 08:56 PM
Welcome to the forums...:D
Try this:


<HTML>
<HEAD>
<TITLE>The C.L.I.T Is Not Real!</TITLE>
<style>
a:hover{text-decoration:underline; }
a:link {text-decoration:none}
body {margin:0;padding:0;text-align:center}
</style>
</HEAD>
<BODY BGCOLOR="#FDF0D5">

<TABLE WIDTH=330 BORDER=0 CELLPADDING=0 CELLSPACING=0 bordercolor="#111111" height="100%" style="margin:auto">
<TR>
<TD height="199" width="12">
<img border="0" src="../images/layout_1/index2_01.gif" width="12" height="199"></TD>
<TD height="199" width="306">
<img border="0" src="../images/layout_1/index2_02.gif" width="306" height="199"></TD>
<TD height="199" width="12">
<img border="0" src="../images/layout_1/index2_03.gif" width="12" height="199"></TD>
</TR>
<TR>
<TD COLSPAN=3 height="12" width="330">
<img border="0" src="../images/layout_1/index2_04.gif" width="330" height="12"></TD>
</TR>
<TR>
<TD COLSPAN=3 height="100%" background="../images/layout_1/index2_05.gif" width="330" valign="top">

<table align="center" border="0" cellpadding="4" cellspacing="0" bordercolor="#111111" width="90%">
<tr>
<td width="100%" valign="top">
<p align="center"><font size="1" face="Verdana">
<a href="index.html">Home</a> -
<a href="movie.html">Movie</a> -
<a href="cast.html">Cast</a> -
<a href="quotes.html">Quotes</a> -
<a href="trivia.html">Trivia</a> -
<a href="media.html">Media</a> -
<a href="misc.html">Misc</a></font><br>
<hr color="#000000" size="1" width="90%">
</td>
</tr>
</table>

</TD>
</TR>
</TABLE>

</BODY>
</html>

PSS - I fixed some stuff and assigned a style to the links just as you did :hover by using a:link {text-decoration:none}...Now, all links won't have any decoration. :eek:

Keith Clark
09-27-2003, 01:48 AM
Wow, thank you very, very much. :)

It works perfectly. I shall be sure to compare my original, shoddy, attempt to your perfect one and see where I went wrong :)

Thank you again.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum