I've encounter this issue many occasions now using drupal or wordpress where my tinymce config files are a little too cleverly abstracted.

The issue is that tinymce auto-systems my <img> tags in <p> tags. If there's a means for this either in Wordpress or Drupal, that might be awesome.

My problem is available when I wish to make a move such as this





and that i want my code to appear such as this

<img src="some_png.png" />

<p> Imagine lots of lipsum text.</p>

but tinymce performs this

<p><img src="garbage_im_wrapped_in_a_paragraph.png" /></p>

<p> Imagine lots of lipsum text.</p>

I am attempting to float a picture left of the paragraph having a set width, without getting width vices around the image itself.
within this situation the image's parent then will get a width along with a float right. That's not things i want.

It's very entirely possible that there's a simple clever treatment for this however i still haven't found one. I'd prefer not hacking my config files basically do not have to.

1 caveat...
The only real reason this issue is available happens because I would like clients to have the ability to easily do their very own editing so I will not simply have them wrap the look inside a <div> rather than a <p>. That appears in my experience unintuitive for my clients who're the particular customers from the wysiwyg

Previous Solution
I've been utilizing a regex to get rid of the paragraph tags but it's always in some way problematic. I finish up adding more images elsewhere then i must keep tuning my regex to disregard them. 502 errors abound!

my question(s) is(are)
So what can I to during my CSS to create the look covered with the paragraph do things i would like it to do?
and when i can not
What drupal or wordpress specific can one caused by make that paragraph disappear?

-- Edit -- the answer must be suitable for IE7+ and modern browsers. :P


If you do not would like it to wrap image tags, try looking in the Tinymce source for any function known as "isBlock". There's a normal expression whitened list test that determines whether a component is really a block element. If you want image tags to become treated as block elements adding "IMG" towards the listing of node names it searches for. I simply needed to do that myself, am still searching for negative unwanted effects at this time however it does solve the immediate problem at hands.

EDIT: Which was pretty much a brief solution, if you need to simply stop the main level block wrapping of image tags, there is a function known as "forceRoots" where you'll really wish to perform your image tag check. Used to do it by modifying this type of code:

if (nx.nodeType == 3  (!t.dom.isBlock(nx) &lifier&lifier nx.nodeType != 8)) to appear such as this:

if (nx.nodeType == 3  (!t.dom.isBlock(nx) &lifier&lifier nx.nodeType != 8) &lifier&lifier nx.nodeName.toLowerCase() != "img") the issue very well for me personally.

In Drupal, one kind of "klugey" method of doing this is to make use of hook_nodeapi() or even the d7 equivalent(s) for exhibiting nodes, and taking advantage of a normal expression to exchange p-wrapped images occurring at the outset of the area. You would need to tell your client they wouldn't look right when editing, but that displayed, they'd appear correctly.

If you are searching for a css option:

In css2 you will find the :first-child selector, as well as in css3 there's also the :only-child selector. p:first-child img might be combined with negative margins to offset margins you've declared for p elements. A downside is this could also impose exactly the same negative margins on any images the customer might include a first paragraph. css3 is probably not supported in most the browsers you goal to pay for, but when technology-not only - you could utilize the :only-child selector for images what are sole kids of p elements, offsetting parents p's margins with negative margins.