Why is WordPress changing my HTML code

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???

Couple of things:

1. You’re missing the semicolon after your unicode character, should be ”
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.