Joomla Templates Club 406,261 posts

[cgc0202 Friend cgc0202Join date: August 2007Posts: 2244Downloads:0Uploads:3 Thanks: 206 Thanked: 262 times in 1 posts]

#268187

<em>@questbg 76892 wrote:</em><blockquote>OK. I tried H and V space. The result is far worse than the original (horizontal space only!):

PLEASE, can somebody help me fix this. I have one VERY pissed off client who is not threatening to withdraw his 12 month booking on my site.

Thanks
Chris</blockquote>

Chris,

If you remember, awhile back, when you have the same problem with image spacing (check your original thread initiated), I posted something about several options, one of them without the class=caption, where you can control the padding around the image. You have to find the CSS for the images, in the template.css

templates => ja_teline_ii => css => template.css

and replace the padding specification, for example from this:


img
{
margin: 0;
padding: 0;
}


to this:


img
{
margin: 0;
padding: 0px 10px 10px 2px;
} /* t r b l */


where the aforementioned padding css specifications refer to pad spacing at the top, right, bottom, and left, respectively. You may change the values, to adjust any of the spacing, as you want.

I usually place a note, like this:

/* t r b l */

as indicated in the css specification, to remind myself the position coding. Note that placing any note between these:

/* */

tells the software reader that it is a note and something that is not executed.

In the actual image, be sure to remove the css specification “class=caption”

from this

<img class="caption" src="images/stories/showcaseads/orpheus/presentation/lounge.gif" border="0" alt="lounge furniture with orpheus interiors bulgaria" align="left">

to this:

<img src="images/stories/showcaseads/orpheus/presentation/lounge.gif" border="0" alt="lounge furniture with orpheus interiors bulgaria" align="left">

This might do the trick. Well, it did in mine. I just tried it.

Cornelio

[cgc0202 Friend cgc0202Join date: August 2007Posts: 2244Downloads:0Uploads:3 Thanks: 206 Thanked: 262 times in 1 posts]

#268194

Chris,

In your image specification:

<img class="caption" src="images/stories/showcaseads/orpheus/presentation/lounge.gif" border="0" alt="lounge furniture with orpheus interiors bulgaria" align="left">

if you use the CSS specification

class="caption"


the default CSS specification for class=”caption” will work only if you have a complete image specification. A key specification, the “title” is missing in the above.

To use the same example the complete image specifications should be:

Complete image specification

<img class="caption" src="images/stories/showcaseads/orpheus/presentation/lounge.gif" border="0" alt="lounge furniture with orpheus interiors bulgaria" title="lounge furniture with orpheus interiors bulgaria" align="left">

that is with

title="lounge furniture with orpheus interiors bulgaria"

or whatever you want as caption. To experiment on this, please try the following:

Experiment 1: Use the complete image description

Revise the image specification in the template.css as follows:

1. padding: 0;
2. padding: 0px 10px 10px 2px;
3. or whatever you want

for each revision, check how the image spacing in the actual article, when it is

Complete image specification

<img class="caption" src="images/stories/showcaseads/orpheus/presentation/lounge.gif" border="0" alt="lounge furniture with orpheus interiors bulgaria" title="lounge furniture with orpheus interiors bulgaria" align="left">

In the second option, it is good to vary the values in the padding:

padding: 0px 10px 10px 2px;


For these experiments, I usually exaggerate the numbers, e.g., 20 vs 10, to observe the spacing changes more clearly. Of course, you revert it back to what you want, when the experiments are done.

Experiment 2: Use the incomplete image description

Repeat the same modifications as in Experiment 1, but this time using your original image description, which did not have the “title”:

<img class="caption" src="images/stories/showcaseads/orpheus/presentation/lounge.gif" border="0" alt="lounge furniture with orpheus interiors bulgaria" align="left">

You will find why the layout got worse when you added a vspace.

Cornelio

1 user says Thank You to cgc0202 for this useful post

1. questbg

[questbg Friend questbgJoin date: May 2008Posts: 1912Downloads:0Uploads:1 Thanks: 146 Thanked: 339 times in 197 posts]

#268258

Hi Cornelio

I’ve kind of figured out a ‘workaround’ to whatever is causing this!

It’s very strange. Set style to ‘caption’. Edit image spec and set Horizontal and Vertical space to ‘0’.

However, this only works if the image actually has a caption (I tried applying caption style but leaving the ‘title’ field empty, but this didn’t work).

So, setting style to caption, H and V space to zero and including text in the ‘title’ field appears to have a better result!

Still very odd though.

Cheers
Chris

[Author]

Posts