Hi there

I have just tried Firefox, Chrome and IE8 on an Umbraco 4.7.0 install.

If I click on the image and then select a style from the dropdown list of styles it is inserting the class correctly.

What browser are you using and can you test it on different browser ?

HTH

Nigel

Hi - thanks for trying to reproduce this.

I've tried Chrome, Firefox (5.0) and IE (9) - all the same. This is a 4.7.0 install, but was an upgrade from 4.5.2. Could I have missed something for tinymce in the upgrade?

To confirm the steps I am taking in the RTE:

Typing away, make a new paragraph. Click the image button to insert an image on the page. Click the image so it is selected. Choose the style from the dropdown. The class is applied to the paragraph but I want it applied to the image.

Cheers,
Lesley

Hi Lesley,

What if you change some of the properties in your css styleshee when

My image: class="left"src="foo.jpg"/>   

You will tell your div around which you umbrao:Item is wrapped to somthing like

.imgWraper p > img {float:left;} 

Hi Lesley

I have just done what you describe and it worked fine for me.

My site is a clean install of 4.7.0 as opposed to an upgrade. 

Go out on a limb and if it's a bad suggestion then I trust someone can assist, but:

1. Take a copy of your site files.

2. Delete the Umbraco folder

3. Copy/paste the umbraco folder from a copy of 4.7.0

I guess you may need to check the likes of /umbraco/plugins/ directory to see what you packages you may have installed, but maybe this will help resolve the problems.

Good luck

Nigel

Lesley, I am having the same issue.

Did you ever find a resolution to this?

Thanks, Jason

Hi Jason,

Glad it's not just me! Are you also on an upgraded install?

I have already done a work around so my css selector is:

img.left, p.left img{...}

... but I'm not really happy with that as a solution so if I get a chance this evening I'm going to attempt Nigel's suggestion and reinstall my umbraco directory. I'll let you know how it goes.

Cheers,
Lesley

Hi Lesley & Jason

I have just made a quick screen cast of a site I am working on - it may be helpful, it may be a waste of time, but feel free to take a look anyway!

Cheers

Nigel

Hi Nigel,

The difference between what you're doing there and the problem I have is that you've put your image in a paragraph that already has content in it, a situation which is fine for me too. But make an empty paragraph and see if you get any difference.

So before applying the class you have:

<p><img src="foo.jpg"/></p>

Appreciate your efforts :)
Lesley

Hi Lesley

Yep I too have the same issue - sorry, I didn't read your initial posts properly.

The simplest workaround I see is to insert the paragraph, insert the image, add a space to the right of the image, apply the style to the image and then delete the space.

Obviously telling a client this is how you need to do it in an empty paragraph would be confusing.

Cheers

Nigel

Ok... So does anyone know whether this would count as a bug or is it like this by design? Is it a tinymce or an umbraco thing? My Googling of the issue hasn't turned up much useful.

Thanks,
Lesley

This is a TinyMCE setting and is fairly painless to resolve. Not only will this stop the annoying <p> tag wrap around your images, but this will let you select and apply styles to your images in the WYSIWYG as you'd expect.

1. Open: /umbraco_client/tinymce3/tiny_mce_src.js
2. Find this: forced_root_block : 'p' 
3. Change to: forced_root_block : false
4. Restart your app / Refresh your browser

http://our.umbraco.org/forum/using/ui-questions/11583-Paragraph-Tags-and-force_p_newlines-setting

is working on a reply...