image thumbnail viewer in tables

[holli]

1) Script Title:
image thumbnail viewer

2) Script URL (on DD):
http://www.dynamicdrive.com/dynamicindex4/thumbnail.htm

3) Describe problem:
if have the website layout done with DIV's and TABLES (800x600) and i generate a table with PHP from a mysql DB - col1 is the image col2 description col3,...

since i have the js activated the complete layout of the site is not correct anymore all tables are moved to the right and the site is blank - so i need to scroll to the right to get to the table the link works and the lager image shows in the middle thats OK - but not that the tables are moved to the right.

here is an extract of the layout:

<div id="ganzeseitediv">
<TABLE id="ganzeseitetable">
<TR>
<TD>
<TABLE width="800" height="75" border="0" cellspacing="0" cellpadding="0">
<TR>
<TD width="800" bgcolor="red" height="25"></TD>
<TD rowspan="3" align="center" width="230"><IMG name="logofade" width="230" height="75" align="center" alt="www.holli.at" src="./bilder/logo1.gif" border="0"></TD>
</TR>
<TR>
<TD bgcolor="white" align="center" height="25"><FONT size="4" color="red" id="welcome">www.HOLLI.at</FONT></TD>
</TR>
<TR>
<TD bgcolor="red" height="24">*</TD>
</TR>
</TABLE>
</TD>
</TR>
<TR>
<TD>
<div style="width:816px; height:500px; overflow:auto; scrollbar-base-color:red; scrollbar-arrow-color:red;
scrollbar-face-color:white; scrollbar-track-color=#F7FFC1; scrollbar-shadow-color:red; scrollbar-highlight-color:red;
scrollbar-darkshadow-color:red; scrollbar-3dlight-color:red;">
<TABLE width="800" height="500" border="1" cellspacing="0" cellpadding="0">

<?php
/* tabelle baby1 hat die spalten: id, datum, bildkl, bildgr, text, fungif */
echo "<TR>\n";
/* echo " <div style='width:600px; height:400px;'></div>\n";
echo " <script language='JavaScript' src='./js/thumbnailviewer.js'></script>\n"; */
echo " <TD width='100'></TD>\n";
echo " <TD width='25'>*</TD>\n";
echo " <TD width='100' align='center' valign='center'>\n";
echo " <TD valign='top' width='400' align='center'><h2>Unser 1. Baby</h2>\n";
echo " <TD align='center' valign='center'>*\n";
echo " <TD width='25'>*</TD>\n";
$link = mysql_connect("localhost", "d0032b12", "counterkale") or die("Keine Verbindung moeglich: " . mysql_error());
mysql_select_db("d0032b12") or die("Auswahl der Datenbank fehlgeschlagen");

$query = "SELECT bildkl, bildgr, datum, text, fungif FROM baby1 order by datum desc";

$result = mysql_query($query) or die("Anfrage fehlgeschlagen: " . mysql_error());
while ($line = mysql_fetch_array($result, MYSQL_NUM)) {
echo "<TR>\n";
echo " <TD width='100'></TD>\n";
echo " <TD width='25'>*</TD>\n";
echo " <TD width='100' align='center' valign='top'>
<p><a href='./bilder/baby1/$line[1]' rel='thumbnail' title='xyz'>
<img src='./bilder/baby1/$line[0]' width='100' height='75' alt='1. Baby Foto'>
</a></p></TD>\n";
echo " <TD valign='center' width='400' align='justify'>$line[2] $line[3]\n";
echo " <TD align='center' valign='center'><img src='./bilder/baby1/$line[4]' width='149' height='124'></TD>\n";
echo " <TD width='25'>*</TD>\n";
echo "</TR>\n";
}
mysql_free_result($result);
mysql_close($link);
echo "</TR>\n";
?>
</div>
</TD>
</TR>
</TD>
</TR>
</TABLE>
<script language="JavaScript">
new menu (MENU_ITEMS, MENU_TPL);
</script>
</div>
</BODY>
</HTML>

CSS:
#ganzeseitediv {
position:absolute;
background-color:#F7FFC1;
width:800;
height:600;
left:25;
top:25;
}

any help would be great

thanks
holli

[jscheuer1]

It looks like part of a comment to me but, if it isn't, get rid of:


<?php
/* tabelle baby1 hat die spalten: id, datum, bildkl, bildgr, text, fungif */
echo "<TR>\n";
/* echo " <div style='width:600px; height:400px;'></div>\n";
echo " <script language='JavaScript' src='./js/thumbnailviewer.js'></script>\n"; */
echo " <TD width='100'></TD>\n";
echo " <TD width='25'>*</TD>\n";
echo " <TD width='100' align='center' valign='center'>\n";

Get rid of it anyway. The script's external call belongs only once, in the head of the page, not singly or repeatedly generated in the page's body. Make sure you still have one valid external call for the script in the head of the page.

If that takes care of it, fine. Otherwise, read on:

It sounds to me as though the:

#thumbBox{ /*Outermost DIV for thumbnail viewer*/

as mentioned in the thumbnailviewer.css and your table are getting nested somehow. This could happen if the code for either or both isn't properly formed. When one set of code isn't formed well and it is the only code on a page that is generated, the browser will usually 'fill in the gaps' and see it as valid code. Since both are generated, one by the viewer script and the other by the server PHP, I'd try validating the generated code.

I suspect, that even if you were to remove the viewer from the page and tried to validate the generated table, it would have correctable problems.

It sounds as though the #ganzeseitediv is somehow being placed inside the thumbbox or visa versa. Since both elements are positioned absolutely, this will cause inflation of the container's dimensions. They should each be being generated as distinct, not nested elements though. At least as a test, try changing your #ganzeseitediv by removing its position:absolute; from its css (don't switch to fixed or relative, just get rid of position completely for it).