Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

I've been playing around with CSS and HTML code and I finally got to the point where the section I was working on works. I saved my CSS, and updated my post, and everything looked great, but when I returned to the post and switched from the HTML tab to the Visual tab WordPress altered/deleted my HTML code.

I re-entered my HTML code in the post, saved it while still in HTML view and the post appears exactly the way I want it to look.

My Post - The Bobby Ore quote is what I was working on. I saved/updated while still in HTML view, so the code appears to work. Here's the HTML code that I entered into the HTML view of my post:

<p class="space"><quote class="open">&#8220</quote><quote class="font">Forget about style; worry about results.</quote><quote class="cite">~ Bobby Orr</quote><quote class="close">&#8221</quote></p>

After switching to the Visual tab and back to the HTML tab, the HTML code now looks like this:

<p class="space">&amp;#8220Forget about style; worry about results.~ Bobby Orr&amp;#8221</p>

Help???

share|improve this question

2 Answers 2

Couple of things:

  1. You're missing the semicolon after your unicode character, should be &#8221;
  2. The quote element gets stripped by the visual editor b/c the version of TinyMCE that Wordpress implements is only set to recognize a certain subset of html elements and it strips out the rest.

Possible solutions:

  1. Disable the visual editor in your user profile: Users > Your Profile > Disable the visual editor when writing.
  2. If you still need your visual editor then apply your styling to one of the allowed HTML elements, like <p class="cite">.
  3. Use a background-image or sprite to place the quote marks in the background of an allowed element.
  4. Use a plugin (http://wordpress.org/extend/plugins/tinymce-valid-elements/) to add the quote element as a valid element in TinyMCE.
share|improve this answer
    
Thanks for both responses. Chazbeaner --> very detailed... helped tons. Going via option 4. –  BryGuy Mar 26 '12 at 18:05

TinyMCE (the visual editor) allows just a restricted set of HTML elements and tries to fix everything else. Made up elements like quote are stripped to guarantee valid HTML.

share|improve this answer
    
My next question is there anything wrong with making up an element like I did? –  BryGuy Mar 26 '12 at 23:48
    
@Bryan Yes, it is semantically meaningless, because no one knows what it stands for. There is no difference between <quote> and <humptydumpty>. And why would you want to use an element humptydumpty? ;) –  toscho Mar 27 '12 at 1:00
    
Thanks toscho. I understand what you mean. I'm really new to CSS. I ended up using <font> and the classes that I created. –  BryGuy Mar 27 '12 at 16:01

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.