Joomla Templates Club 406,261 posts

[Janice W Davis Friend Janice W DavisJoin date: September 2014Posts: 105Downloads:0Uploads:16 Thanks: 14 Thanked: 2 times in 1 posts]

#147807

If an article has an image aligned right & the about us module on the right hand side then there are problems with the alignment of the image. This happens in IE7 – it is ok in IE8 and Firefox.

You can view it at: http://www.storiesbykids.biz/index.php?option=com_content&view=article&id=112&Itemid=105

and
http://www.storiesbykids.biz/index.php?option=com_content&view=article&id=111&Itemid=102

Thanks

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

#329859

Check the settings on your image.
Go to the source code of the article and change the images code:
remove:
style=”float: right”
replace with
align=”right”

That should do it.

Again I would do this directly in the source code. Many WYSIWYG editors (JCE included) have this aggravating knack of thinking they know better what you want. If you are using JCE, I would change the default to do this…or you are going to do it a lot.

John.

1 user says Thank You to John Wesley Brett for this useful post

1. Janice W Davis

[Janice W Davis Friend Janice W DavisJoin date: September 2014Posts: 105Downloads:0Uploads:16 Thanks: 14 Thanked: 2 times in 1 posts]

#329883

Thanks John – that fixed it.

You mentioned to change the jce default to do that – where would I do that?

[Janice W Davis Friend Janice W DavisJoin date: September 2014Posts: 105Downloads:0Uploads:16 Thanks: 14 Thanked: 2 times in 1 posts]

#329889

Upon further tweakign I found out that the aligh=”right” did not work. What does work is making sure the img tag is inside the p tag and that there is text before the image tag inside the p tag. Clear a mud right.

So this works:

<p>To <img width="225" src="images/stories/ImageArticles/concrete_coring_estimating.jpg" alt="concrete_coring_estimating" height="175" style="float: right; margin-left: 10px; margin-right: 0px;" />ensure optimum efficiency we follow these six steps to complete our projects:</p>

but this doesn’t:

<p><img width="225" src="images/stories/ImageArticles/concrete_coring_estimating.jpg" alt="concrete_coring_estimating" height="175" style="float: right; margin-left: 10px; margin-right: 0px;" />To ensure optimum efficiency we follow these six steps to complete our projects:</p>

It doesn’t seem to matter if it’s align=”right” or style=”float: right; … The other thing with this approach is the top of the image ends up being at the bottom of the line of text and not at the top of the line of text. But at least it’s on the right.

Thanks

[Author]

Posts