Joomla bug with aligning images

Since around august 2012, all images that were aligned side-by-side, suddenly appear vertically in Joomla 1.5. The problem only concerns to images with caption. I use the free JCE Editor.
In Joomla 3, this problem is solved, but other problems arise now, such as wrong image sizes.

For Joomla 1.5 I have found out how to align the images side-by-side again, but it is very cumbersome; doing this for all images would be quite a job. Now, images with caption, that are aligned side-by-side with the editor, appear vertically at the website.

For Joomla 3 aligning images is explained here too. 

Joomla 3

Align captioned images side-by-side:

  • For each image, change the property Alignment to "Left".
  • For the right image, change the property Clear to "Both".

Three images side-by-side

Arduino frequency counter used in e-bike Watt meter
Arduino frequency counter used in e-bike Watt meter
Frequency counter used in pedelec legalisation device
Frequency counter used in pedelec legalisation device

 Arduino frequency counter used in scale interface
Arduino frequency counter used in scale interface

Two rows with each two images side-by-side

Kitchen scale dual slope ADC signal
Kitchen scale dual slope ADC signal

Kitchen scale output PWM signal 5V 20ms
Kitchen scale output PWM signal 5V 20ms

Kitchen scale dual slope ADC signal
Kitchen scale dual slope ADC signal

Kitchen scale output PWM signal 5V 20ms
Kitchen scale output PWM signal 5V 20ms

Joomla 3 image margin bug

Joomla adds a "div" element around images, so that image margins are not handled.

Joomla 1.5

Work around to align captioned images side-by-side:

  • For each image, change the property Alignment to "Left".
  • Place the cursor before the first character after the right image and push backspace a few times.
  • For the right image, change the property Clear to "Both".

This doesn't guarantee that it works, for example, it goes wrong when images are followed with a header. If the result is not correct, you need to manually edit the source code.

Left centered image

Only an image without caption may be left centered.

Three images side-by-side

Arduino frequency counter used in e-bike Watt meter
Arduino frequency counter used in e-bike Watt meter
Frequency counter used in pedelec legalisation device
Frequency counter used in pedelec legalisation device

 Arduino frequency counter used in scale interface
Arduino frequency counter used in scale interface


<p>
<img class="caption" style="margin-right: 10px; margin-top: 5px; float: left ;" title="blabla" src="/imageblabla.JPG " alt="blabla" height="250" />
<img class="caption" style="margin: 5px; float: left; " title="blabla" src="/imageblabla.JPG " alt="blabla" height="250" />
</p><p> (extra </p><p> doesn't harm)
<img class="caption" style="margin: 5px; float: left;" title="blabla" src="/imageblabla.JPG " alt="blabla" height="250" />
<br style="clear: both;" />
New line blablabla</p>

Two rows with each two images side-by-side

Kitchen scale dual slope ADC signal
Kitchen scale dual slope ADC signal

Kitchen scale output PWM signal 5V 20ms
Kitchen scale output PWM signal 5V 20ms





Kitchen scale dual slope ADC signal
Kitchen scale dual slope ADC signal

Kitchen scale output PWM signal 5V 20ms
Kitchen scale output PWM signal 5V 20ms


<p> <img class="caption" style="margin: 5px; float: left;" title="blabla" src="/imageblabla.JPG " alt="blabla" height="250" /></p>
<p><img class="caption" style="margin: 5px; float: left;" title="blabla" src="/imageblabla.JPG " alt="blabla" height="250" /> 
<br style="clear: both;" /><br /></p>
<p><img class="caption" style="margin: 5px; float: left;" title="blabla" src="/imageblabla.JPG " alt="blabla" height="200" /></p>
<p><img class="caption" style="margin: 5px; float: left;" title="blabla" src="/imageblabla.JPG " alt="blabla" height="200" />
<br style="clear: both;" />
New line blablabla</p>

Side-by-side images followed by a header 

Kitchen scale dual slope ADC signal
Kitchen scale dual slope ADC signal

Kitchen scale output PWM signal 5V 20ms
Kitchen scale output PWM signal 5V 20ms


(This is the header)

<p>
<img class="caption" style="margin: 5px; float: left;" title="blabla" src="/imageblabla.JPG " alt="blabla" height="200" />
<img class="caption" style="margin: 5px; float: left;" title="blabla" src="/imageblabla.JPG " alt="blabla" height="200" />
<br style="clear: both;" />
<br />
</p>
<h3>Header blabla</h3>

Original source code that doesn't work anymore

<p>
<img class="caption" style="margin: 5px; float: left;" title="blabla" src="/imageblabla.JPG " alt="blabla" height="200" />
<img class="caption" style="margin: 5px; float: left;" title="blabla" src="/imageblabla.JPG " alt="blabla" height="200" />
</p>
<p>New line blablabla</p>

Do you have any comments? Please let me know.
Creative Commons License
This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License.