Tables expands in all other browsers

tables in browsers other than IE

[smokeyb]

I have tried a site I am building in Opera, Mozilla and Netscape and in each case a tables display not how they should. I have a banner in a table cell (works fine) and another cell below it with a combination of gifs and swf buttons making up a navigation bar(the cell is not broken up into separate cells for each item, rather they all butt up next to each other). It works fine in IE both locally and from its address, but when I view it in the other browsers there seems to be a cell padding or spacing added creating a few pixels either side of each item (but not top and bottom), the result is the whole thing breaks up putting the last button and gif below the rest, which cannot be seen as it is also in a frame? Can anyone tell me what's happening?
Thanks

[tedster]

I've run into something like this at times, and I've found different fixes. Sometimes declaring margin:0; and padding:0; for the images involved does the trick. Sometimes I've used float: to force the elements to cuddle up tight.

I never explored it fully enough to understand what the issues are altogether, I just experiment until I fix the porblem. Would love to hear the definitive word.

[smokeyb]

Thanks Tedster
I have at least isolated the problem: and it's to do with the swf buttons i think. I originally made the buttons as gifs with rollover swapping, and testing the beta site with those it seems ok, but when I substitute a swf button it seems (even in the editor) to be larger (and it's not) than the gifs it replaces. The result is what I have posed in the previous post. I can also put the cursor between an image and the swf button and move it 1 space in between and I cannot remove this (with backspace. I tried dividing the cell up into the individual sizes and putting the objects in those, but with no affect. I think I am going to have to redesign the whole navigation bar (swear words) if I am to keep the swfs but why, why, why does IE have no trouble with this and the rest do? Could you elaborate the "float" fix you suggested.
Thanks again

[tedster]

elaborate the "float" fix

Just use float:left (or right as needed) as style rule for the elements that kpt getting separated. Worked with images, but I never tried it with object elements (I assume that's where your .swf file lives?)

[SuzyUK]

Is it perhaps the images.. if float repairs the problem, i have a feeling that {display:block;} set on images within the cells may also fix it.. if it does then perhaps setting display: block on the buttons (or the element they are inside) will cure all

It could be the baseline/bottom alignment issue? and apparently IE also adds automatic (3px?) margins to the left and right of floated images

Suzy
sorry didn't read that properly.. didn't see the bit about it only being side margins.. sorry just ignore

[SuzyUK]

Ok..trying to make up for the ineptitude.. ;)

Does your HTML have whitespace in it?
ie.
<td><img src="hello.gif" alt="">
<img src="hello.gif" alt="">
</td>

is so does removing it help?
<td><img src="hello.gif" alt=""><img src="hello.gif" alt=""></td>

I was able to recreate this and removing the whitespace removed the problem in all browsers? weird but true

Suzy

[smokeyb]

Thanks all
I have tried what SuzyUk suggested with no joy, but remember I do not have images butting up next to each other, rather an image and then a swf object (I removed the spaces anyhow and tried). In DW when I insert the swf it looks like it has grown a few pixels in all directions but all browsers except IE actually show this left, and right of the button (which means it's not the size of the object at fault btw). Try as I might I can not get rid of the spacing, can you elaborate on the "block" fix please.
Thanks
PS Stange things is: that removing all the spaces like suggested, actually resolves the problem in the editor.. They butt up perfectly now.. just not in Netscape etc?

[smokeyb]

Oh my god! I've fixed (with the help of SuzyUK). After seeing the effect of removing the spaces had on the editor, I removed all the spaces like so:
<img src="1stfill.gif" width="30" height="24"><object classid="clsid:blah, blah" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="120" height="24">
<param name="movie" value="swfs/homenav.swf">
<param name=quality value=high>
<embed src="swfs/homenav.swf" quality=high pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="120" height="24"></embed></object>

To

<img src="1stfill.gif" width="30" height="24"><object classid="clsid:blah, blah" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="120" height="24"><param name="movie" value="swfs/homenav.swf"><param name=quality value=high><embed src="swfs/homenav.swf" quality=high pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="120" height="24"></embed></object>
and so on..
And it now dispays perfectly in Netscape and Mozilla and I presume Opera
Thanks and I owe Suzy my right arm.

[SuzyUK]

Hi,

I just came back to tell you, I tested with the swf <object> and <embed> too and it works on that, but I see you discovered that also.. I'm glad it fixed it.. And yes it works in Opera too..

Suzy