Joomla Templates Club 406,261 posts

[John Wesley Brett Moderator John Wesley BrettJoin date: July 2013Posts: 2142Downloads:17Uploads:26 Thanks: 175 Thanked: 645 times in 426 posts]

#136375

This is driving me mad.

I love JCE Editor…however I’m apparently running into a CSS conflict with Vauxite that I can quite find.

When I insert an image with a left alignment…everything is fine…UNTIL I use the “Caption” class. Then the text is forced below the image.

Has anyone run across this yet…or better yet have a fix?

You can see an example at

http://www.fccps.org/j15b/index.php?option=com_content&view=article&id=179:inclusive-schools-week&catid=86:mehms-news&Itemid=289

Thank you greatly!
John.

[charles99 Friend charles99Join date: December 2008Posts: 314Downloads:207Uploads:17 Thanks: 8 Thanked: 50 times in 6 posts]

#283533

I had the same problem and decided to use a table to get around the problem. For whatever reason thier are a lot of little things going wrong with these templates… Something with codes or design… Or the info in the starter guide is off by a couple of steps… Especially when it comes to Community Builder and Fireboard…

The Template you I just started on, had to reach out to a few people online for help… But try using tables and tell how it works… Also is you ja_tabs at user5 working? the video player in poisition user5…

[scotty Friend scottyJoin date: March 2008Posts: 2339Downloads:0Uploads:13 Thanks: 76 Thanked: 827 times in 595 posts]

#283536

<a class=”jcepopup” title=”Rocking Robin::Tweedle Dee Dee”
href=”/j15b/images/stories/MEHMS/mehinclusiveschoolsweek.jpg”>
<div style=”width: 210px;” class=”img_caption null”>
<img class=”caption” style=”margin: 5px; float: left;” title=”Inclusive Schools Week”
src=”/j15b/images/stories/MEHMS/mehinclusiveschoolsweek.jpg”
alt=”mehinclusiveschoolsweek” width=”210″ height=”158″>
<p>Inclusive Schools Week</p></div></a>

For some crazy reason the caption, Inclusive Schools Week, is being placed inside <p> tags. As <p> is a ‘block’ element (like <div>, <table>,<hr>) a line break is automatically added before and after it.

Are you using the new JCE Caption Plugin or Joomla captioning? If it’s the JCE one you can configure the ‘caption container’. I don’t think the normal JCE editor contains a caption class.

OR….

You could place the image in a <div> like….

<div style=”float: left; padding: 5px;”>
<a class=”jcepopup” title=”Rocking Robin::Tweedle Dee Dee”
href=”/j15b/images/stories/MEHMS/mehinclusiveschoolsweek.jpg”>
<div style=”width: 210px;” class=”img_caption null”>
<img class=”caption” style=”margin: 5px; float: left;” title=”Inclusive Schools Week”
src=”/j15b/images/stories/MEHMS/mehinclusiveschoolsweek.jpg”
alt=”mehinclusiveschoolsweek” width=”210″ height=”158″>
<p>Inclusive Schools Week</p></div></a></div>

[scotty Friend scottyJoin date: March 2008Posts: 2339Downloads:0Uploads:13 Thanks: 76 Thanked: 827 times in 595 posts]

#283538

Disregard my post above.

In your article HTML edit
class=”img_caption null” to class=”img_caption left”

You are using Joomlas caption class but JCE strips the ‘title’ from the html.

[John Wesley Brett Moderator John Wesley BrettJoin date: July 2013Posts: 2142Downloads:17Uploads:26 Thanks: 175 Thanked: 645 times in 426 posts]

#283641

<em>@scotty 96222 wrote:</em><blockquote>Disregard my post above.

In your article HTML edit
class=”img_caption null” to class=”img_caption left”

You are using Joomlas caption class but JCE strips the ‘title’ from the html.</blockquote>

Thanks for your work. However changing this then removes the caption altogether and shows the caption only as a Hover note. When the mouse is over the image then the caption appears with the cursor.

Only “Caption” as a class seems to put the caption below the picture…but again it then forces the text below the image.

Still looking…
John.

[John Wesley Brett Moderator John Wesley BrettJoin date: July 2013Posts: 2142Downloads:17Uploads:26 Thanks: 175 Thanked: 645 times in 426 posts]

#283644

<em>@scotty 96220 wrote:</em><blockquote><a class=”jcepopup” title=”Rocking Robin::Tweedle Dee Dee”
href=”/j15b/images/stories/MEHMS/mehinclusiveschoolsweek.jpg”>
<div style=”width: 210px;” class=”img_caption left”>
<img class=”caption” style=”margin: 5px; float: left;” title=”Inclusive Schools Week”
src=”/j15b/images/stories/MEHMS/mehinclusiveschoolsweek.jpg”
alt=”mehinclusiveschoolsweek” width=”210″ height=”158″>
<p>Inclusive Schools Week</p></div></a>

For some crazy reason the caption, Inclusive Schools Week, is being placed inside <p> tags. As <p> is a ‘block’ element (like <div>, <table>,<hr>) a line break is automatically added before and after it.

Are you using the new JCE Caption Plugin or Joomla captioning? If it’s the JCE one you can configure the ‘caption container’. I don’t think the normal JCE editor contains a caption class.
</blockquote>

This worked perfectly…but now faced with having to manually code anytime I want to popout a picture. Wonder if I could insert code in JCE to make this automatic?
Anyway, the solution is not the best, obviously, as we’ll eventually be doing this with more than 1000 photos, but at least it works! Couldn’t get the JAHighslide to perform its magic AND show a caption at the same time either.

Thank you for your help.

As for JCE Caption Plugin…I just have the normal, FREE JCE editor (school systems are very tight with their $$ HA!).

All the best! – And always open to any other ideas….
John.

[Author]

Posts