Firefox/IE6 displaying tables differently - why! help!

valign doesn't work in Firefox?

[spud_nic]

Hi

I have a table, with two flash elements in two different cells. I have set valign = "bottom" and made sure the margin and padding in CSS are set to 0px. There's no cellpadding or cellspacing either.

In IE6, the flash elements sit on the bottom of the cell.
In Firefox, they hover a few pixels above the bottom! How?! Why!?

Can anyone suggest a way around it?

See the page I'm developing at:

<Sorry, no personal URLs.
See Terms of Service [webmasterworld.com]>

At the top, where the logo is, that's where the problem is!

Grateful for any help on this.
Cheers

[edited by: tedster at 5:21 pm (utc) on Feb. 8, 2006]

[Robin_reala]

Probably something's display:inline and you're seeing the space below the baseline. You say flash, so I'm assuming you're using the standard embedding code produced by Macromedia Flash. this uses <object> elements for IE nad <embed> elements for Firefox (boo, hiss). So you can try forcing them to display block with this code. I've also zeroed out the margins on the <embed>s and the padding on the <td>s incase that's an issue.

embed { margin: 0; display: block; }
td { padding-bottom: 0; }

[spud_nic]

Thank you for your reply!

It's worked - and although I've solved many layout problems before, this one really stumped me - and what you were saying about the embed element, and the inline/block issue is something I didn't know about!

Thanks again, you've been really helpful!

[Robin_reala]

Glad that worked.

To elaborate a little more on this: when an element is specified as inline it's content sits on the 'baseline'. This is an imaginary line along which the text follows, and the descenders of the text drop below. Any object specified as inline will sit on the baseline onless you use vertical-align in the CSS to specify otherwise, or you set it to display as block (at which point it no longer generates a line box and therefore a baseline) which is usually the easiest fix.