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

From AllanIT

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

AllanIT

The table in TinyMCETinyMCE Table layout, wordpress, Ultimate TinyMCE, Table layout, image, Plugins

 

Firefox Table layoutFirefox Table layout, wordpress, Ultimate TinyMCE, Table layout, image, Plugins

Table layout HTML
<table id=”intro” border=”0″>
<tbody>
<tr>
<td style=”font-family: AmerType Md BT; font-size: 18px; text-transform: uppercase; font-weight: bold; color: #000000; background-color: #a50000; text-align: center;” colspan=”8″>INTRODUCING
<img src=”http://abcwcs.com.au/12/wp-content/uploads/2012/04/abc-window-cleaning-specialists-24pt.png” alt=”Large modern french window looking on to a court yard with a fish pond” width=”550″ height=”30″ /></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td style=”font-family: AmerType Md BT; font-size: 18px; text-transform: uppercase; font-weight: bold; background-color: #a50000; text-align: center;” colspan=”4″> BACKGROUND</td>
<td></td>
<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>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td style=”font-family: AmerType Md BT; font-size: 10pt; text-align: justify;” colspan=”4″>Founded in 1992, A B C Window Cleaning Specialists offers a unique range of services incorporating a philosophy of excellence in customer service which is the driving force behind our continuing success.</td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td style=”font-family: AmerType Md BT; font-size: 10pt; text-align: justify;” colspan=”4″> Regular service has been achieved by using a customised, computerised, information system. This system has facilitated accurate scheduling, allowing levels of time management unmatched by others in the industry. The result has been a marked reduction in distances travelled, resulting in increased productivity and maximising profitability.</td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td style=”font-family: AmerType Md BT; font-size: 10pt; text-align: justify;” colspan=”4″> Customers have come to rely on the consistent quality and reliability of service offered by A B C Window Cleaning Specialists.</td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td style=”text-align: center;”></td>
</tr>
</tbody>
</table>

 

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.

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