What is the best way to position flash in a td with CSS?

[ewwatson]

In IE7, 6, and 5 and only in IE7, 6, and 5 my flash navigation menu jumps around a little bit from page to page (no more than half of an inch or so per page, minor, but irritating). Probably an easy fix, but how? Do I need to wrap in a div first or should I just apply the rule to the td with an ID? And, should I use absolute positioning, relative, or neither? And I know I know navigation menu not good - I am working on text links for the bottom.

One of the pages in question is below, but just navigate around the site and you will see what I am talking about. Much thanks!
<snip>

[edited by: SuzyUK at 9:27 am (utc) on Jan. 13, 2008]
[edit reason] Please No URI's [/edit]

[SuzyUK]

ewwatson, you shouldn't need to use positioning a vertical align top should do it

However if necessary I would wrap it in a div, & position that div relatively as a first try, absolute positioning inside table cells is not the same as regular positioning, especially in IE as it gets confused as to what the "containing block" should be.. so it should be avoided for something like this.

a snippet from your code

<table width="900" border="1" align="center" cellpadding="0" cellspacing="0" bgcolor="#0066CC">
<tr>
<td width="250" height="144" align="center" valign="middle"><img src="images/logo1.jpg" width="250" height="153"></td>
<td width="10" rowspan="4" align="left" valign="top">&nbsp;</td>
<td width="640" rowspan="4" align="left" valign="top"><table width="640" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="640" height="145" colspan="2" align="center" valign="top">
<table width="640" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="501" align="left" valign="middle"><img src="images/prices-hours.gif" width="499" height="130"></td>
<td width="139" align="center" valign="top"><a href="#"><img src="virtualtour.jpg" width="115" height="155" border="0"></a></td>
</tr>
</table>
</td>
</tr>.... more

What to do is add some background colors to the table cells (different ones for each) including the header and empty cells. You are looking to see if the actual rows differ in heights (causing the cell holding the flash to actually be in a different place) - haven't fully tested but I *think* that is what might be happening. Cell heights, especially where rowspans are involved, are very difficult to fix in value.

but even without the rowspan complication, in your code above the 'heights' of the rows are smaller than the images inside them and IE is having to recalculate in order to render the table, it's not good at counting ;)

My advice is to remove the height settings from the <td>'s cells and let the header images dictate that AND also set all those images to display: block; - IE allows extra whitespace around inline images and this can provide small bits of extra space inside the table cell, you should see this if you put different background colours on the different cells - Setting them to

display: block;

removes the whitespace and makes the table cell fit around them snugly.

Then what you want to aim for is to make sure any remaining maths for the table is correct so IE has to do as little counting as possible ;)

That could be it, but if there's still more problems after that, remove the flash and replace it with a regular div or image and see if it's still happening - it could simply be the rowspans.. and as this is guesswork, where I would start troubleshooting, if the above measures don't work then please feel free to post some summary code

-Suzy

[ewwatson]

Thanks Suzy, easy fix though. I just had to combine the cell rows into one. IE would not honer td top left align if there were other cells underneath it.