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

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

The Problem Code
<td rowspan=”7? colspan=”2?> <img src=”http://abcwcs.com.au/12/wp-content/uploads/2012/04/pageonewindow.gif” alt=”Large modern french window looking on to a court yard with a fish pond” width=”277? height=”560? /></td>

 

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

The solution Code
<td style=”vertical-align: top;” rowspan=”7″ colspan=”4″><img src=”http://abcwcs.com.au/12/wp-content/uploads/2012/04/pageonewindow.gif” alt=”Large modern french window looking on to a court yard with a fish pond” width=”277″ height=”560″ /></td>

 

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

Enjoy your new page or post
AllanTI

Firefox Table layoutThe solution, wordpress, Ultimate TinyMCE, Table layout, image, Plugins

About 

Allan has a life time background in sales and more than thirty years experience in programming, and server configuration. Which makes Allan extremely well equipped to understand your needs for any application or web site. Contact Allan to develop an application or web site for your business or for you personally.

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

Leave a Reply