[Plugin: Ultimate TinyMCE] Table layout breaks with image. As on wordpress forum

From AllanIT

Hi Guys

This is a bit complicated to explain so I will tell you the steps to create the problem and see if others can recreate it and help to fix it.

1. Create a page
2. In Ultimate TinyMCE create a table 8 colums by 20 rows
3. Select colum 6 and 7 in row 4 down to row 10 so you have a box 2 colums by 7 rows
4. Then from the tables dropdown menu select merge cells.
5. Place an image 300w x 600h in the merge cells.
6. Then in row 4 select colum 1 to 4 and merge the cells
7. Repeat step 6. For rows 6, 8 and 10.
8. In row 4 colum 1 which now spans 4 colums put one word eg TinyMCE and give the merged cells a background color.
9. Then in rows 6, 8 and 10 add a paragraph of text so that in total you have more text than the image is high.
10. Then save the page and view the page in a browser.

If you get the same problem in the browser row 4 will match the height of the image. Strange huh? Any one know how to stop this from happening?

AllanIT

From Josh Lobe

Okay, I tried to replicate this… and aside from feeling like I was playing a tetris video game… I was unable to see what you are describing.

Perhaps you can link to a screenshot where I can see what you mean?

From AllanIT

Hi Josh I hope these two images help. If you need more information please let me know

AllanIT

The table in TinyMCE

Firefox Table layout

From Josh Lobe

Okay… without getting a headache trying to figure that out, it looks like tinymce keeps “like” rows together. So, since the word “Background” is in a cell one row below the cell where the image is being inserted, it’s pushing that entire content downward. Try inserting the image in the same cell row as the word background… and make sure all the cells the image is supposed to span downwards, are merged.

Alternatively, another way to achieve what you are doing is with the column shortcodes. Have you looked at this feature in the plugin?

Basically, you can insert your header image to span the entire width of the page. Then, you can split the area below it into 2 columns (or 3, or 4, or 5, or 6).

So, something like [one-half]All your content for the left side.[/one -half][one-half]path to your image</one-half-last]

There is more documentation and examples if you click the “help” icon next to the feature in my plugin. It’s under Miscellaneous Features.

The solution

Tenacity pays off. After a great deal of trial and error I found the solution to this problem. It turns out that the problem is not with Ultimate TinyMCE its self but with html. Recreating the code in a txt editor and in pure html, uploading it to a non WordPress site produced the same result. So the problem is with html and not with Ultimate TinyMCE.

The solution although difficult to find was really quite simple. Weather you are working in Ultimate TinyMCE or in html the answer is the same. In the problem above the offending code is

When working in Visual mode in Ultimate TinyMCE you are unable to select the cell where the image resides and not the image, because in the case above the cell has expanded to fit around the image. But when working in HTML mode you don’t get the tools that allow you to select the properties needed to fix the problem.

So you need a way of selecting the cell from Visual mode. To do that go to HTML mode and just be before the <img tag put a word like ‘here’ with out the quotes. This will allow you to select the cell by clicking between the h and the sell wall when you are in Visual mode. Later, after you get the layout fixed you can remove the ‘here’ and every thing will be fine. Or if you are familiar with html you can jut add the code in your self but I am trying to explain this for those who are not familiar with all the properties of html.

Return to Visual mode and single click just to the left of the word ‘here’ then click the button with the two A’s on it which is Edit CSS Style. When the Edit CSS Style properties box pops up select the Box tab and from the Vertical Alignment dropdown box select “top” then click the update button. Then save the page or post by publishing or saving the draft. Then assuming you are finished editing the cell remove the word ‘here’ and save the page or post again. Your code should look like this

and your page should render correctly in your browser. Like so.

Enjoy your new page or post
AllanTI

Firefox Table layout