Image Shifted with ImageCaption Implemented

[PBlue]

I found that after adding image caption, the image shifts out of the box and I cannot find any clue of where to change it:

My CMSMS version: 1.11.2

I followed the howto here: http://wiki.cmsmadesimple.org/index.php ... e_Captions

[uniqu3]

Without actually seeing your code/site (which would of been easier to answer) i guess that wrapping block (the white area) has a padding for example 10px or so set but image has same width as that box, this results that image is shifted to left.

Either make that box bigger or make image smaller.

[PBlue]

Without actually seeing your code/site (which would of been easier to answer) i guess that wrapping block (the white area) has a padding for example 10px or so set but image has same width as that box, this results that image is shifted to left.

Either make that box bigger or make image smaller.

I produced a testing site and you can see the shifted image from below link:
http://pilot.outsourcing.st/index.php?p ... ge-caption

The Image Caption is generated by a function and I don't know where is wrong. I guess maybe some CSS formatting in this theme is wrong and I don't know where. Thanks a lot for all the help!


Basic information of this site:
(1) Fresh install of cmsms 1.11.2
(2) Theme: G2:G2 downloaded from cmsms theme site

Let me know if you need more information.

[Dr.CSS]

You may want to remove the <p>...

<p><img class="caption" src="uploads/images/advantage01.jpg" alt="Our Advantage" width="299" height="249" /></p>

<p><div style="width: 299px;" class="captionborder"><img class="caption" src="uploads/images/advantage01.jpg" alt="Our Advantage" height="249" width="299"><p class="captiontext">Our Advantage</p></div></p>

The CSS calls for 3px padding inside the captionborder...

[uniqu3]

Just like DrCss wrote captionborder has 3px padding, that is 299 (width of caption) + 6 (2x3px padding) + 2px (2x 1px border) makes 307px width

Which would require a image of 277px width

299px (caption inner width) - 2px (2x1px border) - 20px (2x10px margin) = 277px image width

[PBlue]

Just like DrCss wrote captionborder has 3px padding, that is 299 (width of caption) + 6 (2x3px padding) + 2px (2x 1px border) makes 307px width

Which would require a image of 277px width

299px (caption inner width) - 2px (2x1px border) - 20px (2x10px margin) = 277px image width

I changed the image size to 277px and the effect is the same - the image still shifted and below is the HTML code from TinyMCE:

<p><!-- Add code here that should appear in the content block of all new pages -->This is a test for Image Caption</p>
<p> </p>
<p><img class="caption" src="uploads/images/advantage01.jpg" alt="Our Advantage" width="277" height="231" /></p>

You can also view the effect from : http://pilot.outsourcing.st/index.php?p ... ge-caption

Maybe this is the bug from the CSS stylesheet? If I changed to other theme, the image is at the right place.

[Jo Morg]

I would bet that both uniqu3 and DrCss are right so... you may have issues with your stylesheet. I just tested this with firebug and the following should work (it's a workaround not a solution):

Code: Select all

<div class="captionborder" style="width: 298px;"><img width="277" height="231" alt="Our Advantage" src="uploads/images/advantage01.jpg" class="caption"><p class="captiontext">Our Advantage</p></div>

*PS: this is pretty much what they said on their posts

[Dr.CSS]

I think there is something in the plugin that is or can be set to make the outside box wider...

[PBlue]

I think there is something in the plugin that is or can be set to make the outside box wider...

Thanks for all your help! As I am still at very junior level of dealing CSS Stylesheet, I think I'd better change to another theme.