HELP JavaScript rotating pic space bug [Archive]

MarkG

04-24-2003, 11:20 AM

HELP!!!

I have been trying all week using both CGI and JavaScript to make a rotating photo (on page reload) work correctly and I am at wits end. I plan and market sites and head the team but my programmer says this is a graphic formatting problem and my artist says its a programming problem! I am not a programmer but can do basic html and tweek things and know the forum regualars here are much smarter than I. The site uses Frontpage and is on a unix server and the samples below are using the JavaScript but I had the same problems with cgi.

It appears that when the JavaScript calls in the image it is adding a space after the image...which is pushing other images out of place. Because it is a site with high end Photoshop design the exact positioning of the slices is critical.

The page is shtml because I am using cgi to rotate the text at the bottom, but the photo rotator is JavaScript. the broken page is at: http://www.christopherbean.ondaytona.com/main_page_je_4.shtml

Before adding the scripting the page was fine and all images are still the same width and height. one clue may be that when I accidentally left out the trailing " on my height setting everything lines up fine but the image following my rotating graphic(main_header1_09.jpg) had vanished. There is an obvious answer to my problem revealed by this error but I cant see it... this page is at: http://www.christopherbean.ondaytona.com/main_page_4.shtml

Usually when I see rotating images this trailing space would have no impact because they are square images in a cell with a white background, but because of the curves and slicing of this site it is a problem. Any tips on how to fix this or suggestions of alternate ways to accomplish my mission would be greatly appreciated and the provider of the solution that I use will receive a bag of delicious bag of gourmet coffee!

Jona

04-24-2003, 11:47 AM

Hmmmm..... Quite a bug. I don't know if this will help or not (not completely sure), but try putting it in a <div style="padding:0px;margin:0px;">.... It's a possibility.

jdavia

04-24-2003, 08:48 PM

What I see is this:
Some cells are too wide in the horizontal plane down the table.
There are so many cells that you really have to figure their size from the top to the bottom, across the screen. Doing so, you will find that they all don't match the 774px you have set. Pushing some cells out to the right.
To see which cells are doing that, change the border from "0" to "1", they will show up like a sore thumb.

Even when you fix the cells, you may have to adjust the image sizes.

The next post will have a table stripped of your code to help you find what I am saying.

jdavia

04-24-2003, 08:49 PM

<table WIDTH=774 BORDER=2 CELLPADDING=0 CELLSPACING=0>
</table>
<table border="0" cellpadding="0" cellspacing="0" width="50">
<tr>
<td valign="top">
<table WIDTH=774 BORDER=2 CELLPADDING=0 CELLSPACING=0>
<tr>
<td ROWSPAN=6 width="11" height="609"> 
</td>
<td COLSPAN=9 width="763" height="15"> 
</td>
<td WIDTH=1 HEIGHT=15 > 
</td>
</tr>
<tr>
<td COLSPAN=4 ROWSPAN=2 width="310" height="125"> 
</td>
</center>
<td COLSPAN=3 bgcolor="#FFFFFF">
 
</td>
<td COLSPAN=2 ROWSPAN=3 width="34" height="206">
 </td>
<td WIDTH=1 HEIGHT=56 ALT="">
 </td>
</tr>
<tr>
<td COLSPAN=3 width="419" height="69">
 </td>
<td WIDTH=1 HEIGHT=69 >
 </td>
</tr>
<tr>
<td ROWSPAN=3 width="105" height="469">
 </td>
<td COLSPAN=5 ROWSPAN=2 width="419" height="158" width="419" height="158">


<!- script LANGUAGE="JavaScript">document.writeln('<IMG SRC="'+xoxo[choice]+'" width="419" height="158" BORDER=0 >');</SCRIPT -->

<td width="205" height="81">
 </td>
<td WIDTH=1 HEIGHT=81 ALT="">
 </td>
</tr>
<tr>
<td COLSPAN=2 ROWSPAN=5 bgcolor="#F8F8E0" valign="top">
 
<table cellSpacing="0" cellPadding="0" width="50" border="0">
<tbody>
<tr>
<td>
<table cellSpacing="0" cellPadding="0" width="161" border="0">
<tbody>
<tr width="6" height="28">
 </td>
<td vAlign="top" background="rightbox_light1_02.gif" colspan="2">
 </td>
<td width="5" height="28"></td>
</tr>
<tr>
<td rowspan="2" width="6" height="84"> </td>
<td vAlign="top" bgColor="#ffffff" colspan="2">
 </td>
<td rowspan="2" width="5" height="84"> </td>
</tr>
<tr>
<td vAlign="top" bgColor="#ffffff" width="49" height="65"><font face="Arial" color="#666666" size="1"> </font></td>
<td vAlign="top" bgColor="#ffffff">
 
</td>
</tr>
<tr>
<td width="6" height="37"></td>
<td vAlign="center" background="rightbox_light1_08.gif" colspan="2"> </td>

<td width="5" height="37"> </td>
</tr>
<tr>
<td width="6" height="88"></td>
<td vAlign="top" bgColor="#ffffff" colspan="2" width="70" height="75">
 
</td>
<td width="5" height="88"> </td>
</tr>
<tr>
<td width="6" height="35"> </td>
<td background="rightbox_light1_14.gif" colspan="2">  </td>
<td width="5" height="35"></td>
</tr>
<tr>
<td width="6" height="65"> </td>
<td vAlign="top" bgColor="#ffffff" colspan="2">
<table border="0" cellpadding="0" cellspacing="0" width="90%">
<tr>
<th width="100%" height="39" align="center" nowrap>
<form>
</form>
</th>
</tr>
</table>
</div>
</td>
<td width="5" height="65"> </td>
</tr>
<tr>
<td width="6" height="5"> </td>
<td colspan="2" width="150" height="5"> </td>
<td width="5" height="5"> </td>
</tr>
</tbody>
</table>

</td>
</tr>
</tbody>
</table>
</div>



<p align="center"> </p>
</td>
<td ROWSPAN=7 width="22" height="511">
 </td>
<td WIDTH=1 HEIGHT=77>
 </td>
</tr>
<tr>
<td COLSPAN=2 width="45" height="311">
 </td>
<td COLSPAN=2 ROWSPAN=2 background="back2.gif" valign="top" width="9" height="434">
 </td>
<td WIDTH=1 HEIGHT=311>
 </td>
</tr>
<tr>
<td ROWSPAN=5 width="11" height="123">
 </td>
</center>
<td COLSPAN=2 bgcolor="#381048" valign="top">
<div align="center">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<th width="100%" height="39" align="center" nowrap>
<form >
</form>
</th>
</tr>
</table>
</div>
</td>
<td ROWSPAN=2 width="20" height="64">
 </td>
<td WIDTH=1 HEIGHT=56 >
 </td>
</tr>
<tr>
<td COLSPAN=2 width="130" height="8">
 </td>
<td COLSPAN=2 width="365" height="8">
 </td>
<td WIDTH=1 HEIGHT=8>
 </td>
</tr>
</center>
<tr>
<td COLSPAN=5 ROWSPAN=2 bgcolor="#504438">
 
</td>
<center>
<td WIDTH=1 HEIGHT=27>
 </td>
</tr>
<tr>
<td COLSPAN=2 ROWSPAN=2 width="217" height="32">
 </td>
<td WIDTH=1 HEIGHT=11>
 </td>
</tr>
<tr>
<td COLSPAN=5 width="515" height="21">
 </td>
<td WIDTH=1 HEIGHT=21>
 </td>
</tr>
<tr>
<td WIDTH=11 HEIGHT=1 >
 </td>
<td WIDTH=105 HEIGHT=1 >
 </td>
<td WIDTH=25 HEIGHT=1>
 </td>
<td WIDTH=20 HEIGHT=1>
 </td>
<td WIDTH=160 HEIGHT=1>
 </td>
<td WIDTH=205 HEIGHT=1>
</td>
<td WIDTH=9 HEIGHT=1>
 </td>
<td WIDTH=205 HEIGHT=1>
 </td>
<td WIDTH=12 HEIGHT=1 >
 </td>
<td WIDTH=22 HEIGHT=1>
 </td>
<td></td>
</tr>
</table>

  </td>
</tr>
</table>

MarkG

04-25-2003, 12:03 AM

Thank You both for your suggestions, I will try them tomorrow.

Jdavia, It looks like you did a lot of work on this and I greatly appreciate it.

I should have also posted the page with the exact same tables, and calling the same image in plain html which is how this all started... and I wonder why if it is a table cell size issue why it all works until I use the JS to call the image... here is the page with the same image without the JS

http://www.christopherbean.ondaytona.com/main_page_nojs_4.shtml

it looks perfect!

Knowing this do you still think it is the cell sizing?

If you still think so then we will rebuild the table.

Thanks again,

jdavia

04-25-2003, 04:24 AM

Both look the same in IE6 browser with Script or not, but the spaces show in NS4.7 and NS&.0. If you make a color border of (1) you can see where the problems lie. You can make the images fit in either browser but not in both using the same settings.
This might be because IE isn't as particular with tables as NS is.
But why did you cut up the image in such an iregular pattern? If it were cut more uniform you would have better luck and no need for spacer gif's.

If the image were cut uniform you can tie them together in one table cell by using vspace and hspace between each image and using a <br> for a new row. use no spaces in the code. Images stick tight in either browser. You might be in for a slight change in design to do thet.

MarkG

04-25-2003, 09:51 AM

Thanks Jdavia

My graphic partner did the slicing and while he has a good eye for design he has a lot to learn about structure, tables, optimizing file sizes and slicing... I will be meeting with Him saturday and will give him your suggestions... they make sense to me.

My own skills are in dealing with clients, site planning, writing copy and tags that work for seo, and finding paying clients. It is hard to find enough skilled designers and programers in a small market like Daytona Beach to produce quality sites as quickly as I can sell and plan them. Your troublewhooting is a great help.

When Patrick gets the table fixed I will find out where to send your coffee!

Thank You,:)