WordPress replacing HTML tags, a workaround

With some of my posts I really need to struggle to get it to look just they way I want it to look. More often then not this is caused by the engine behind WordPress removing certain pieces of information from HTML tags.

I have put together the following list providing the types of tags that were giving me headaches and the solutions I have been able to find for them.

Hopefully other can benefit from my findings.

Using BR-tags

Most of the time when I add images to one of my blog posts I want the image to align either to the left or the right. I do this by adding a style attribute, like so

<img src="whatever.jpg" style="float: left"/>

If I want to make sure the image does not overlaps the end of the post or moves into the paragraph following the image I would insert the following

<br style="clear: both" />

However as soon as you save the post the above BR-tag gets replaced with a regular BR-tag and breaks the layout of the post.

Instead of insert the BR-tag you can insert the following piece of HTML code, which produces the same result, but does not get replaced or removed by WordPress.

<div style="clear: both;"><!-- --></div>

Using TH-tags

When doing formatting on tables within your post it is good to know that any formatting that you apply to the TH-tag gets completely removed when saving the post.

So instead of using TH-tag

<th style="text-align: left"> .... </th>

Just use a regular TD-tag to build your table headings and apply the wanted format to those elements, like so

<td style="text-align: left; font-weight: bold;"> .... </td>

After playing around with different themes it seems not only to be related to WordPress, but also the theme that you are using. Just so you know. When you change from one theme to the other, you might want to revisit some of your earlier posts to see if things are still looking correct.