Joomla 1.5 Content Image Margin Problem

The default image margin in Joomla has never been particularly satisfying. In Joomla 1.0 the mosimage plugin surrounded each image with a margin equal on both sides using the hspace attribute. This way it didn't matter whether the image was aligned left or right because it had the same amount of margin deposited around it regardless. Not liking this concept, we adapted the mosimage plugin so that it "intelligently" used one-sided margins to that the page edges looked tidier; adding only right margin for images left aligned and vice vera. Then Joomla 1.5 came along and we had to go back to the drawing board.

One of the nice things about Joomla 1.5 is the more intuitive system it employs to insert images into content. The downside of this new image is that you have very little control over exactly how the image is treated because the image is actually part of the content rather than being added by a tweakable little plugin which inserts the image for you when the content is being deployed.

We came up with a beautifully simple and elegant, forward-thinking solution which utilises a little used part of CSS2 called attribute selectors, but is friendly to older non-CSS2 compliant browsers. It requires no intelligence and will automatically be applied to any image within the content item. We think this is a 

In our example we shall identify the images we need to modify by assuming they will always appear in the section of the page marker #content, thus:

#content img {}

Next, for the older and non-CSS3 compliant browsers we need to tell it what to do. This is where our freedom is restricted so we shall create a similar appearance to that of the default:

#content img {margin-left: 10px; margin-right: 10px;}

You will see that we are just slapping on the same amount of margin on each side of the image regardless of whether it is left or right aligned. At least this will stop the problem of text running up the edges of the images.

Now we get to the clever bit where we use attribute selectors. These allow you to target specifically XHTML tags that have particular attributes defined. In this solution we use attribute selectors to "sniff" out left and right image alignment. As you are probably aware, XHTML uses the following syntax to align an image:

<img src="/path/to/my/image-1.png" align="left" alt="*" />
<img src="/path/to/my/image-2.png" align="right" alt="*" />

So we use the following CSS2 attribute selectors to affect these tags as follows:

#content img[align="left"]  {margin-left: 0; margin-right: 20px;}
#content img[align="right"] {margin-left: 20px;margin-right: 0;}

Although it's probably quite obvious, the first line of code finds images within the content tag that have been aligned left, removes the left hand margin set by the previous rule, and, to counteract the removal of the left margin, applies double the margin on the right. The second line of code does the opposite.

Just to summarise, here are all three lines together:

#content img {margin-left: 10px; margin-right: 10px;}
#content img[align="left"]  {margin-left: 0; margin-right: 20px;}
#content img[align="right"] {margin-left: 20px;margin-right: 0;}

We have tested this and it works like a charm on Firefox 3, Chrome, Opera 9, Safari 3 and Avant. To our surprise we also discovered that even IE7 could handle this... however IE6 refused to play and took its ball home... there's a surprise.

P.S. I has occurred to me that this is all we needed to do in Joomla 1.0! Live and learn :)