The Trouble with Tables

Hi There--

Have a page where I have replaced an image with a flash menu of the same size. The page was created in Imageready and then the Flash was embedded with Dreamweaver 4.

The table works fine when it just has the image in it, but goes wonky in Netscape on a Mac when I replace the image with the .swf.

Here's the page with just the image:

http://www.droogees.com/

Please compare it with the imaginatively named:

http://www.droogees.com/index_with_flash.html

I posted this on Newbies and consensus there seemed was that it was fine on IE. No one looked at it with the problem browser.

No one has reported the Netscape 4.7 problem that I'm having.

Can anyone please check these pages and help me figure out how to fix them?

Thanks,

Lee

Looks fine here, both Netscape and IE, you might want to adjust the margins to get rid of the space on the top and left, my suggestion. Those pop ups are really irritating too.

I just caught the possible problem, you just replaced the image with the swf? You need to use the proper code to get it to view right. I use GoLive, but I run into problems if I don't se the code that is published with the swf itself. You could simply copy and paste it into the current position of the existing code. Only that code, not the table row structure code, that would really mess up things, so save a copy first.

Hi and thanks for checking it out.

I tried replacing the image tag first with code that Dreamweaver put in when it embedded the .swf, then with the code that Flash publishes in it html file. No go on both.

Is it the menu that I made that annoys you? I don't know what you mean by popups? Is the alt text turning into tool tips or something like that? That's easy to take care of. I'm not sure I want to go for a different menu thing.

Which version of Netscape are you using? Which platform? The one that's screwing up on me is v.4.7. on Mac.

I'll use your suggestion for the margins. Thanks.

I appreciate your time.

I'm using 4.7 on my Mac. The pop up browser windows.

That's too strange!

I'm also on NS 4.7 on a Mac and the table with the flash is all fragmented. It's adding two or three pixels to every row so there are horizontal white spaces between the cells. There's no added vertical space, but there's a downward offset vertically. I'm completely flummoxed!

Oh, THOSE popups. Had me confused for a moment. I don't even see them anymore. It's my sandbox. In return for those popups Hypermart gives me 50 megs free hosting AND Perl CGI. I'm learning Perl. Seemed like a good deal. I don't publish out of there, just try to get things to work. If you have any suggestions for other places for me to get a CGI priveleges for free, I'll be happy to check them out.

Please accept my apologies for subjecting you to those nasty things. I appreciate your efforts in the face of such adversity.

:-)

Thanks again,

Lee

Hi Capoeirista,
with Mac IE 5 it´s ok, with NS 4.5 the table is like you said fragmented!
With Netscape 6.0.1 it´s ok again.

I don´t have a solution for you, but some suggestions:

The object/embedding is inside an A HREF link, don´t know if this could be a problem.
Try simplyfiying the table (make it less rows and columns)
Your onmouseover/onmouseout scripts don´t seem to work, neither on IE nor with NN.

Well I see the problem now, like me2222 sugested make your slices a bit more simpler. I run into these problems all the time, and make sure you don't have any hidden double slices in Image Ready, it is known for that. Try to cut everything even, in rows and in colums. maybe 3 rows across, and 3 down. The flash apears as if it does not have to take up all that room, so maybe the logo could be a gif or jpeg. The flash under it, then another image under the swf file. This should make the table even broken up, yet keep the same look and feel.

Hi There--

Tried removing the HREF tag. (I've been fussing over it since I first posted.) Doesn't make any difference.

I also tried adding limiting vertical dimensions to the table itself, again with no luck.

Not worried about the mouseover scripts at the moment. I know how to get those to work. I just let Imageready do the cutouts and layers. I rewrite those. Thanks for noticing though.

Because it's a drop down, I need all of the space below it to the bottom of the image to be the Flash. Wouldn't dividing that cell be complicating the table more?

What if I made them divs? Not make the Flash part of the table at all? I could lose the table cell completely and position it accurately to the pixel. Maybe Layers?

What percent of my audience would I be losing if I ignored this? Is there any way to figure this out?

Thanks so much for your help with this. You're da bomb!

Have a great one,

Lee

Hi again,
putting SWFs into div layers seem to make no troubles.
I´ve done it once because I had a strange table problem with IE.
http://board.flashkit.com/board/show...hreadid=142010

Anyway, I played a bit with your html and found a "dirty" solution to your problem:
Make the table 4 pixels higher, make the left cell (the one with the SWF), and the other 4 cells at the bottom 4pixels higher and set their vertical allignements to "top".
This works for both IE and NN.

I could send you the fixed html table this evening if you want. Just send me an email to let me know.

Cheers

Capoeirista,
I can´t contact you via email!
Don´t know where the problem is.
The mails allways returns with the message that
"Earthlink mail servers are unable to deliver this e-mail"
and "...your email... Service unavailable"

I´ll try again later.

me2222 has kindly given me permission to publish his wonderful fix on this site for futureFlashers who find themselves in this bind and search forums for the solution.

FIRST HERE'S THE EMAIL:

The modifications I made on the html:
To test things I removed all code which was unnecessary for me, sorry
for that, I hope its no prob for you to put it together again.

- removed all javascripts and the onload="preloadImages();"
expression in the body tag
- removed all links from the pictures
- inserted leftmargin="0" marginwidth="0" topmargin="0"
marginheight="0" into the body tag, don´t know if you need it. It
puts the table to the top left position of the browser window.
- the table is now 5 rows x 5 colums with 735 x 454 pixels. To fit
the images into this I had to cut 4 pixel from the top of the
water.jpg and put them onto the bottom of the main.jpg, I also
compressed them more to make their size smaller.
- there is no need for a spacer.gif in this table, so I removed the
right column
- the cells with the SWF, the water.jpg, the index09.gif, the
index10.gif and the index11.gif are 4 pixels higher than before and
have vertical alignement of "top" (valign="top" in html). This trick
hides the displacement of the cells.

If you ask me, I think that the displacement is caused by the fact
that the SWF is inside a cell with a "rowspan".
NN doesn´t seem to handle this correctly. I have seen this before,
but I´m not sure about.

And finally one word to Image Ready. I tried to use it, but I found
it very annoying. It produces a lot of unneccessary stuff and the
javascripts don´t work.
I most times do the exporting of the picts manually from Photoshop,
and the html creation also manually in Golive.


If anyone wants the code, just contact me (Capoeirista) and I'll send it. I can't get it to post without interpreting the html. (I used <PRE> tags and it did't work.)

Thanks Everyone,

Lee




AGAIN, THANKS FOR YOUR HELP. I HOPE THAT THIS HELPS SOMEONE ELSE.

LEE
[Edited by Capoeirista on 06-10-2001 at 04:59 PM]

Oh My--

Another friend who is a Dreamweaver Wiz has told me the quick fix.

When you embed the flash movie, click the movie once, go to the property inspector and click on align=absolute middle.

That takes care of the problem.


align="absmiddle" then appears twice.Once in the &lt;object classid....etc parameter section,and once in the &lt;embed src...tag.



&lt;TD WIDTH=194 HEIGHT=450 ROWSPAN=6&gt; &lt;object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0" width="194" height="450" align="absmiddle" name="FlashMenu"&gt;
&lt;param name=movie value="images/rexFlashManu.swf"&gt;
&lt;param name=quality value=high&gt;
&lt;embed src="images/rexFlashManu.swf" quality=high pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="194" height="450" align="absmiddle" name="FlashMenu"&gt;
&lt;/embed&gt;
&lt/object&gt;



Thanks to everyone who helped. I really appreciate it.

Sincerely,

Lee
[Edited by Capoeirista on 06-10-2001 at 05:17 PM]