Table size incorrect when 'linked to' but not when navigated to using 'Forward'

C

Carl Gilbert

Hi

I am currently writing a site that utilises tables. I have one page
that links to a second page.

The only problem is that when I link to the second page, the table
loads up with a different height than was set in the code.
However, when I use the navigation buttons in IE to go back and then
forward again to the second page, the table is displayed as expected.

Has anyone ever come accross this problem and does anyone know of a
solution?


Aditional information. The pages include numerous tables, some within
other tables and some tables within rows or cells.

I would have published the site but the pages include ASP code and I
do not as yet have an ASP host.
If anyone feels that seeing the pages would be beneficial then I can
either publish tham as pure HTML or post the asp pages.

Note: Tested in Internet Explorer v6, written in VS.NET.

Kind regards, Carl
 
C

Carl Gilbert

Thanks for the code Tom. This is good but still presents the same problem
but the other way round.
When the page is linked to, it comes out at the correct size but when it is
navigated forward to, it comes out larger.
This is much more acceptable and if I had to put up with it I think I would
rather use your approach.

Any aditional input on why the table may be re-sizing or a way to prevent
the table re-sizing when navigated forward to would be greatly appreciated.

I have re-published the pages to show what the new code is doing. This can
be found at:

http://homepage.ntlworld.com/carl_gilbert/page1.html

Once again, thanks Tom, this could be the solution unless anyone else has a
better one.



Tom Blantern said:
I did this way:

Page2.html
Code:

<HTML>
<HEAD>
<TITLE>Categories</TITLE>
</HEAD>
<BODY>
<TABLE border="0" cellpadding="0" cellspacing="0" width="100%"
height="100%" id="Table1">
<TR>
<TD align="center" valign="middle">
<!--Containing table-->
<TABLE border="0" cellpadding="0" cellspacing="0" width="776"
height="460"id="Table2">

<!--Header bar-->
<TR height="71">
<TD style="color:white; background-color:black; border-bottom:14
solid white;">&nbsp;</TD>
</TR>

<!--Main body-->
<TR height="344">
<TD valign="top">
<!--Center table-->
<TABLE border="0" cellpadding="0" cellspacing="0" id="Table3">
<TR>
<TD bgcolor="black" width="32">&nbsp;<!--Put Page Title image
here--></TD>
<TD width="8">&nbsp;</TD>
<TD width="344">

<TABLE border="0" cellpadding="0" cellspacing="0" >
<TR height="80">
<TD width="80" valign="top" style="border:3 solid
black;">&nbsp;</TD>
<TD width="8" valign="top"></TD>
<TD width="80" valign="top" style="border:3 solid
black;">&nbsp;</TD>
<TD width="8" valign="top"></TD>
<TD width="80" valign="top" style="border:3 solid
black;">&nbsp;</TD>
<TD width="8" valign="top"></TD>
<TD width="80" valign="top" style="border:3 solid
black;">&nbsp;</TD>
</TR>
<TR height="8" valign="top"></TR>

<tr align="left" valign="top">
<td height="7" colspan="7"></td>
</tr>
<TR height="80">
<TD width="80" valign="top" style="border:3 solid
black;">&nbsp;</TD>
<TD width="8" valign="top"></TD>
<TD width="80" valign="top" style="border:3 solid
black;">&nbsp;</TD>
<TD width="8" valign="top"></TD>
<TD width="80" valign="top" style="border:3 solid
black;">&nbsp;</TD>
<TD width="8" valign="top"></TD>
<TD width="80" valign="top" style="border:3 solid
black;">&nbsp;</TD>
</TR>
<TR height="8" valign="top"></TR>

<tr align="left" valign="top">
<td height="7" colspan="7"></td>
</tr>
<TR height="80">
<TD width="80" valign="top" style="border:3 solid
black;">&nbsp;</TD>
<TD width="8" valign="top"></TD>
<TD width="80" valign="top" style="border:3 solid
black;">&nbsp;</TD>
<TD width="8" valign="top"></TD>
<TD width="80" valign="top" style="border:3 solid
black;">&nbsp;</TD>
<TD width="8" valign="top"></TD>
<TD width="80" valign="top" style="border:3 solid
black;">&nbsp;</TD>
</TR>
<TR height="8" valign="top"></TR>

<tr align="left" valign="top">
<td height="7" colspan="7"></td>
</tr>
<TR height="80">
<TD width="80" valign="top" style="border:3 solid
black;">&nbsp;</TD>
<TD width="8" valign="top"></TD>
<TD width="80" valign="top" style="border:3 solid
black;">&nbsp;</TD>
<TD width="8" valign="top"></TD>
<TD width="80" valign="top" style="border:3 solid
black;">&nbsp;</TD>
<TD width="8" valign="top"></TD>
<TD width="80" valign="top" style="border:3 solid
black;">&nbsp;</TD>
</TR>
</TABLE>

</TD>
<TD width="8">&nbsp;</TD>
<TD width="344">
<TABLE border="0" cellpadding="0" cellspacing="0" id="Table4">
<TR height="80">
<TD width="80" valign="top" style="border:3 solid
black;">&nbsp;</TD>
<TD width="8" valign="top"></TD>
<TD width="80" valign="top" style="border:3 solid
black;">&nbsp;</TD>
<TD width="8" valign="top"></TD>
<TD width="80" valign="top" style="border:3 solid
black;">&nbsp;</TD>
<TD width="8" valign="top"></TD>
<TD width="80" valign="top" style="border:3 solid
black;">&nbsp;</TD>
</TR>
<TR height="8" valign="top"></TR>

<tr align="left" valign="top">
<td height="7" colspan="7"></td>
</tr>
<TR height="80">
<TD width="80" valign="top" style="border:3 solid
black;">&nbsp;</TD>
<TD width="8" valign="top"></TD>
<TD width="80" valign="top" style="border:3 solid
black;">&nbsp;</TD>
<TD width="8" valign="top"></TD>
<TD width="80" valign="top" style="border:3 solid
black;">&nbsp;</TD>
<TD width="8" valign="top"></TD>
<TD width="80" valign="top" style="border:3 solid
black;">&nbsp;</TD>
</TR>
<TR height="8" valign="top"></TR>

<tr align="left" valign="top">
<td height="7" colspan="7"></td>
</tr>
<TR height="80">
<TD width="80" valign="top" style="border:3 solid
black;">&nbsp;</TD>
<TD width="8" valign="top"></TD>
<TD width="80" valign="top" style="border:3 solid
black;">&nbsp;</TD>
<TD width="8" valign="top"></TD>
<TD width="80" valign="top" style="border:3 solid
black;">&nbsp;</TD>
<TD width="8" valign="top"></TD>
<TD width="80" valign="top" style="border:3 solid
black;">&nbsp;</TD>
</TR>
<TR height="8" valign="top"></TR>

<tr align="left" valign="top">
<td height="7" colspan="7"></td>
</tr>
<TR height="80">
<TD width="80" valign="top" style="border:3 solid
black;">&nbsp;</TD>
<TD width="8" valign="top"></TD>
<TD width="80" valign="top" style="border:3 solid
black;">&nbsp;</TD>
<TD width="8" valign="top"></TD>
<TD width="80" valign="top" style="border:3 solid
black;">&nbsp;</TD>
<TD width="8" valign="top"></TD>
<TD width="80" valign="top" style="border:3 solid
black;">&nbsp;</TD>
</TR>
</TABLE>
</TD>
<TD width="8">&nbsp;</TD>
<TD bgcolor="black" width="32">&nbsp;</TD>
</TR>
</TABLE>
</TD>
</TR>

<!--Bottom bar-->
<TR height="45">
<TD style="color:white; background-color:black; border-top:14 solid
white;">&nbsp;</TD>
</TR>

</TABLE>
</TD>
</TR>
</TABLE>
</BODY>
</HTML>
Click to expand...
 
A

Adrienne

Gazing into my crystal ball I observed (e-mail address removed) (Carl
Gilbert) writing in
Hi

Hi

I am currently writing a site that utilises tables. I have one page
that links to a second page.
Ok


The only problem is that when I link to the second page, the table
loads up with a different height than was set in the code.
However, when I use the navigation buttons in IE to go back and then
forward again to the second page, the table is displayed as expected.
Click to expand...

Is this a table of tabular data, or is this your editor's way of
positioning elements?
Has anyone ever come accross this problem and does anyone know of a
solution?
Click to expand...

Yes, get rid of the tables. Go with CSS.
Aditional information. The pages include numerous tables, some within
other tables and some tables within rows or cells.
Click to expand...

Again, get rid of tables. There is nothing worse than having to debug
nested tables.
I would have published the site but the pages include ASP code and I
do not as yet have an ASP host.
If anyone feels that seeing the pages would be beneficial then I can
either publish tham as pure HTML or post the asp pages.
Click to expand...

Have you validated your markup and fixed the errors?
Note: Tested in Internet Explorer v6, written in VS.NET.
Click to expand...

Did you test it in any other browser? You know there are other browsers
out there, and what may work for IE may not work for Mozilla or Opera,
especially if you are using some sort of proprietary markup.
Kind regards, Carl
Click to expand...

Good luck!
 
T

Tom Blantern

I did this way:

Page2.html
Code:

<HTML>
<HEAD>
<TITLE>Categories</TITLE>
</HEAD>
<BODY>
<TABLE border="0" cellpadding="0" cellspacing="0" width="100%"
height="100%" id="Table1">
<TR>
<TD align="center" valign="middle">
<!--Containing table-->
<TABLE border="0" cellpadding="0" cellspacing="0" width="776"
height="460"id="Table2">

<!--Header bar-->
<TR height="71">
<TD style="color:white; background-color:black; border-bottom:14
solid white;">&nbsp;</TD>
</TR>

<!--Main body-->
<TR height="344">
<TD valign="top">
<!--Center table-->
<TABLE border="0" cellpadding="0" cellspacing="0" id="Table3">
<TR>
<TD bgcolor="black" width="32">&nbsp;<!--Put Page Title image
here--></TD>
<TD width="8">&nbsp;</TD>
<TD width="344">

<TABLE border="0" cellpadding="0" cellspacing="0" >
<TR height="80">
<TD width="80" valign="top" style="border:3 solid
black;">&nbsp;</TD>
<TD width="8" valign="top"></TD>
<TD width="80" valign="top" style="border:3 solid
black;">&nbsp;</TD>
<TD width="8" valign="top"></TD>
<TD width="80" valign="top" style="border:3 solid
black;">&nbsp;</TD>
<TD width="8" valign="top"></TD>
<TD width="80" valign="top" style="border:3 solid
black;">&nbsp;</TD>
</TR>
<TR height="8" valign="top"></TR>

<tr align="left" valign="top">
<td height="7" colspan="7"></td>
</tr>
<TR height="80">
<TD width="80" valign="top" style="border:3 solid
black;">&nbsp;</TD>
<TD width="8" valign="top"></TD>
<TD width="80" valign="top" style="border:3 solid
black;">&nbsp;</TD>
<TD width="8" valign="top"></TD>
<TD width="80" valign="top" style="border:3 solid
black;">&nbsp;</TD>
<TD width="8" valign="top"></TD>
<TD width="80" valign="top" style="border:3 solid
black;">&nbsp;</TD>
</TR>
<TR height="8" valign="top"></TR>

<tr align="left" valign="top">
<td height="7" colspan="7"></td>
</tr>
<TR height="80">
<TD width="80" valign="top" style="border:3 solid
black;">&nbsp;</TD>
<TD width="8" valign="top"></TD>
<TD width="80" valign="top" style="border:3 solid
black;">&nbsp;</TD>
<TD width="8" valign="top"></TD>
<TD width="80" valign="top" style="border:3 solid
black;">&nbsp;</TD>
<TD width="8" valign="top"></TD>
<TD width="80" valign="top" style="border:3 solid
black;">&nbsp;</TD>
</TR>
<TR height="8" valign="top"></TR>

<tr align="left" valign="top">
<td height="7" colspan="7"></td>
</tr>
<TR height="80">
<TD width="80" valign="top" style="border:3 solid
black;">&nbsp;</TD>
<TD width="8" valign="top"></TD>
<TD width="80" valign="top" style="border:3 solid
black;">&nbsp;</TD>
<TD width="8" valign="top"></TD>
<TD width="80" valign="top" style="border:3 solid
black;">&nbsp;</TD>
<TD width="8" valign="top"></TD>
<TD width="80" valign="top" style="border:3 solid
black;">&nbsp;</TD>
</TR>
</TABLE>

</TD>
<TD width="8">&nbsp;</TD>
<TD width="344">
<TABLE border="0" cellpadding="0" cellspacing="0" id="Table4">
<TR height="80">
<TD width="80" valign="top" style="border:3 solid
black;">&nbsp;</TD>
<TD width="8" valign="top"></TD>
<TD width="80" valign="top" style="border:3 solid
black;">&nbsp;</TD>
<TD width="8" valign="top"></TD>
<TD width="80" valign="top" style="border:3 solid
black;">&nbsp;</TD>
<TD width="8" valign="top"></TD>
<TD width="80" valign="top" style="border:3 solid
black;">&nbsp;</TD>
</TR>
<TR height="8" valign="top"></TR>

<tr align="left" valign="top">
<td height="7" colspan="7"></td>
</tr>
<TR height="80">
<TD width="80" valign="top" style="border:3 solid
black;">&nbsp;</TD>
<TD width="8" valign="top"></TD>
<TD width="80" valign="top" style="border:3 solid
black;">&nbsp;</TD>
<TD width="8" valign="top"></TD>
<TD width="80" valign="top" style="border:3 solid
black;">&nbsp;</TD>
<TD width="8" valign="top"></TD>
<TD width="80" valign="top" style="border:3 solid
black;">&nbsp;</TD>
</TR>
<TR height="8" valign="top"></TR>

<tr align="left" valign="top">
<td height="7" colspan="7"></td>
</tr>
<TR height="80">
<TD width="80" valign="top" style="border:3 solid
black;">&nbsp;</TD>
<TD width="8" valign="top"></TD>
<TD width="80" valign="top" style="border:3 solid
black;">&nbsp;</TD>
<TD width="8" valign="top"></TD>
<TD width="80" valign="top" style="border:3 solid
black;">&nbsp;</TD>
<TD width="8" valign="top"></TD>
<TD width="80" valign="top" style="border:3 solid
black;">&nbsp;</TD>
</TR>
<TR height="8" valign="top"></TR>

<tr align="left" valign="top">
<td height="7" colspan="7"></td>
</tr>
<TR height="80">
<TD width="80" valign="top" style="border:3 solid
black;">&nbsp;</TD>
<TD width="8" valign="top"></TD>
<TD width="80" valign="top" style="border:3 solid
black;">&nbsp;</TD>
<TD width="8" valign="top"></TD>
<TD width="80" valign="top" style="border:3 solid
black;">&nbsp;</TD>
<TD width="8" valign="top"></TD>
<TD width="80" valign="top" style="border:3 solid
black;">&nbsp;</TD>
</TR>
</TABLE>
</TD>
<TD width="8">&nbsp;</TD>
<TD bgcolor="black" width="32">&nbsp;</TD>
</TR>
</TABLE>
</TD>
</TR>

<!--Bottom bar-->
<TR height="45">
<TD style="color:white; background-color:black; border-top:14 solid
white;">&nbsp;</TD>
</TR>

</TABLE>
</TD>
</TR>
</TABLE>
</BODY>
</HTML>








Carl Gilbert said:
Have updated the pages but had no affect.
Click to expand...
 
K

Karl Groves

Tom Blantern said:
Yeah... I have a solution for you.
Make a "fake" pictures to make sure it 8px hight no matter what. <img> solve
that.
Click to expand...
<snip>

Please don't give any more advice regarding HTML
 
C

Carl Gilbert

Ok, so it sounds like the table route is the wrong one. Why do people
comment if they don't know what they are talking about?

Karl, I looked at the link you posted:

http://diveintomark.org/archives/2003/05/05/why_we_wont_help_you

From what Adrienne and yourself are saying, CSS seems to be the way to go.
I have looked at a number of books today and I have settled for 'Eric Meyers
on CSS'.
Judging by most of the reviews on CSS books, its a technology that goes
somewhat unnoticed and once discovered leaves people wondering how they
coped without it. Lets hope this is true.

I would still appreciate some advice and direction on how to approach my
problem using CSS. I will obviously bury my head in the CSS book when it
arrives but would like to know what to look for, approach, techniques, etc.

What I am essentially trying to do is write a site with a fairly basic
design. I want the same look as what I have already done with tables
(http://homepage.ntlworld.com/carl_gilbert/page1.html). Where I have
bordered cells, I will put a graphic in each cell to link to a different
page.

My design is very specific, its not designed to display data/stats in tables
or lists. The look will be just as shown in the about link except with
graphics and text in the cells.

Ideally I would like the link to fire from the user clicking the panel
rather than some nasty link stuck in the middle. Much like the cells at the
top of http://diveintomark.org/ link to the home page. Nice...

Any help would be greatly appreciated. Let me know if further information
on what I am trying to achieve is required.

Regards, Carl Gilbert
 
D

Deirdre Saoirse Moen

Carl Gilbert said:
Judging by most of the reviews on CSS books, its a technology that
goes somewhat unnoticed and once discovered leaves people wondering
how they coped without it. Lets hope this is true.
Click to expand...

I've been using minimal CSS for about a year, but finally moved entirely
away from tables in the last week.
I would still appreciate some advice and direction on how to approach
my problem using CSS. I will obviously bury my head in the CSS book
when it arrives but would like to know what to look for, approach,
techniques, etc.
Click to expand...

Quite possibly a way to learn is by example.

http://www.oswd.org has a few -- look for ones that validate XHTML 1.0
Strict and have CSS (if you search for both, you'll have a few examples
to peruse). None of them have graphics. View the design's source and
verify there's no tables before downloading it to play with.

I've been working from one of the OSWD templates (purple haze), though
I've done a fair amount of fussing with it at this point. I'm using PHP
for page generation, so I had to do a lot of slicing and dicing that I'm
still not finished tweaking.
 
T

Tom Blantern

Yeah... I have a solution for you.
Make a "fake" pictures to make sure it 8px hight no matter what. <img> solve
that.
<td> does not solve that, becaouse less than 10px would be a problem.

Code for page2.html:

<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><table width="776" height="460" border="0" align="center"
cellpadding="0" cellspacing="0">
<tr>
<td height="71" align="left" valign="top" style="color:white;
background-color:black; border-bottom:14 solid white;">&nbsp;</td>
</tr>
<tr>
<td height="344" align="left" valign="top"><table width="100%"
height="344" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="32" bgcolor="black">&nbsp;</td>
<td width="8">&nbsp;</td>
<td width="344" align="left" valign="top"><table width="344"
border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="80" height="80" style="border:3 solid
black;">&nbsp;</td>
<td width="8">&nbsp;</td>
<td width="80" style="border:3 solid
black;">&nbsp;</td>
<td width="8">&nbsp;</td>
<td width="80" style="border:3 solid
black;">&nbsp;</td>
<td width="8">&nbsp;</td>
<td width="80" style="border:3 solid
black;">&nbsp;</td>
</tr>
<tr>
<td height="8" colspan="7"><img src="#"
height="8"></td>
</tr>
<tr>
<td width="80" height="80" style="border:3 solid
black;">&nbsp;</td>
<td>&nbsp;</td>
<td style="border:3 solid black;">&nbsp;</td>
<td>&nbsp;</td>
<td style="border:3 solid black;">&nbsp;</td>
<td>&nbsp;</td>
<td style="border:3 solid black;">&nbsp;</td>
</tr>
<tr>
<td height="8" colspan="7"><img src="#"
height="8"></td>
</tr>
<tr>
<td width="80" height="80" style="border:3 solid
black;">&nbsp;</td>
<td>&nbsp;</td>
<td style="border:3 solid black;">&nbsp;</td>
<td>&nbsp;</td>
<td style="border:3 solid black;">&nbsp;</td>
<td>&nbsp;</td>
<td style="border:3 solid black;">&nbsp;</td>
</tr>
<tr>
<td height="8" colspan="7"><img src="#"
height="8"></td>
</tr>
<tr>
<td width="80" height="80" style="border:3 solid
black;">&nbsp;</td>
<td>&nbsp;</td>
<td style="border:3 solid black;">&nbsp;</td>
<td>&nbsp;</td>
<td style="border:3 solid black;">&nbsp;</td>
<td>&nbsp;</td>
<td style="border:3 solid black;">&nbsp;</td>
</tr>
</table></td>
<td width="8">&nbsp;</td>
<td width="344" align="left" valign="top"><table width="344"
border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="80" height="80" style="border:3 solid
black;">&nbsp;</td>
<td width="8">&nbsp;</td>
<td width="80" style="border:3 solid
black;">&nbsp;</td>
<td width="8">&nbsp;</td>
<td width="80" style="border:3 solid
black;">&nbsp;</td>
<td width="8">&nbsp;</td>
<td width="80" style="border:3 solid
black;">&nbsp;</td>
</tr>
<tr>
<td height="8" colspan="7"><img src="#"
height="8"></td>
</tr>
<tr>
<td width="80" height="80" style="border:3 solid
black;">&nbsp;</td>
<td>&nbsp;</td>
<td style="border:3 solid black;">&nbsp;</td>
<td>&nbsp;</td>
<td style="border:3 solid black;">&nbsp;</td>
<td>&nbsp;</td>
<td style="border:3 solid black;">&nbsp;</td>
</tr>
<tr>
<td height="8" colspan="7"><img src="#"
height="8"></td>
</tr>
<tr>
<td width="80" height="80" style="border:3 solid
black;">&nbsp;</td>
<td>&nbsp;</td>
<td style="border:3 solid black;">&nbsp;</td>
<td>&nbsp;</td>
<td style="border:3 solid black;">&nbsp;</td>
<td>&nbsp;</td>
<td style="border:3 solid black;">&nbsp;</td>
</tr>
<tr>
<td height="8" colspan="7"><img src="#"
height="8"></td>
</tr>
<tr>
<td width="80" height="80" style="border:3 solid
black;">&nbsp;</td>
<td>&nbsp;</td>
<td style="border:3 solid black;">&nbsp;</td>
<td>&nbsp;</td>
<td style="border:3 solid black;">&nbsp;</td>
<td>&nbsp;</td>
<td style="border:3 solid black;">&nbsp;</td>
</tr>
</table></td>
<td width="8">&nbsp;</td>
<td width="32" bgcolor="black">&nbsp;</td>
</tr>
</table></td>
</tr>
<tr>
<td height="45" align="left" valign="top" style="color:white;
background-color:black; border-top:14 solid white;">&nbsp;</td>
</tr>
</table></td>
</tr>
</table>




Toby A Inkster said:
Tom said:
I did this way:
Click to expand...
[snip]

Then you deserve all the problems you get.
Click to expand...
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Center Table but not Caption! 2
how table content not an different pages when printing 1
table issue, centered column not possible, when text in other columns 2
Login and Forward to an External site using Struts 3
Page properties reporting incorrect size when viewing an ASPX page 0
Table/table rows/table data tag question? 4
Can I Import table from txt file into form letter using Python? 3
how to update a linked table in a gridview? 1

Members online

No members online now.
Total: 28 (members: 0, guests: 28)
Robots: 142

Forum statistics

Threads
473,754
Messages
2,569,528
Members
45,000
Latest member
MurrayKeync

Latest Threads

Top