W3C validation when using mosimage

[alan-s]

In a tableless layout and all it implies, eg semantic structure, accessible template, using mosimage tags in your content can break your valid xhtml due to the disallowed nesting of block and inline elements. Here is a little work around for this in Joomla 1.0.12. It's useful for alignment and captions too!

Attached is an altered mosimage.php file (lives in /mambots/content/)

This file does two main things;

If you align your mosimage right or left it will keep the edge flush with your text as opposed to indented.

Secondly the output is altered slightly (I am surprised this works) to avoid 'illegal' html element nestings and thus pass through a validator.

Instructions:

• You'll need the css added to your template - see below
• Backup your mosimage.php and upload the attached one
• ***IMPORTANT***  make sure your caption width in the image parameters is the same as your image width used (On many sites i choose a set width for consistency so this is easy to do
• Only tested of IE6 IE7 and Firefox - adjust css colors and borders etc to suit

Code: Select all

/* image caption styles*/
.mosimage{
	padding:0px;
	border:1px solid #666;
	background: #FFF;
	margin:8px;
}

.mosimage img{
	padding:0;
	margin:0	
}

.mosimage_caption
{
	background: #DEDEDE;
	display:block;
	border: solid 1px red;
	font-size: 0.9em;
	font-weight: normal;
	padding-left:20%;
	padding-right:20%;
	margin:0px
}

Oh and Enjoy