Tags which wreak havoc on WordPress templates

If you liked the post, y not bookmark it by clicking any of the below icons:
add to del.icio.us :: Add to Blinkslist :: add to furl :: Digg it :: add to ma.gnolia :: Stumble It! :: add to simpy :: seed the vine :: :: :: TailRank

broken image

broken image

I think I finally figured it out. I’ve already found that copying content/text from Microsoft Word into posts here into this WordPress blog do create a design problem. Other documents sometimes copied into WordPress seem to make these templates break down as well. However, I think today (thanks to Matt Strum, btw for telling me the new template was looking funny), I think I figured it out.

Here are some snap shot of a working blog where the posts are fine in the middle and on the left.  On the right hand side, there is a sidebar with many different widgets that are properly ordered and placed on the right hand side.

working-wordpress-template1

However, when the following tags

div tags

div tags

(You can check this in the “HTML” version of your posts)

are added due to the copying from Word or likewise document into WordPress, the blog can break and look like this towards the top & the right (no sidebar!):

broken wordpress template

broken wordpress template

And your sidebar shows up at the bottom of your posts waaaaaaaaaaay at the bottom of your blog like this:

broken wordpress sidebar

broken wordpress sidebar

I think it’s a tag called “div” or if you need, you can just do a quick find [ctrl] + “F” (‘f’ key) for div throughout your posts under the html and remove both the opening tag and the closing one. I would show you what to exactly look for which would basically be a “<” symbol with “div” and then the closing “>” symbol, but if I wrote the string here in order, it would create the stupid tag which seems to wreak havoc to my blog’s design. I’ve seen it happen multiple times in the past, but never could even find searches that would tell me this — even in the WordPress Support section. I’m sure if I searched for the write phrase, but I couldn’t figure it out in the past…so it took me 2+ years to finally figure it out.

However, when I pulled out the tag above that had all the funky stuff after the “div” tag, the template worked again.  So, it may be the initial definition of the “div” tag that causes problems.  Here’s the “div” tag again to look at & notice the first one I underline  with the “id” and the number plus “class” — that seems to be the culprit as far as I can tell.

div-tags2

Also, the other tag that I’ve noticed wreaks havoc in these blog posts are “span” tags.  So, look out for those and pull them out of your WordPress blogs!!!

—-

Update: 3/3/09

I’m just finding more and more tags and html that may be causing the problems which breaks the .css or the wordpress templates.  I noticed with a couple older posts when searching for “study” on my blog that they broke the sidebar and the text grew larger and larger as you scrolled down the page with the older and older posts.  They were:

<table id=”tbl_article” border=”0″ cellspacing=”0″ cellpadding=”0″ width=”100%”>

<td style=”padding-bottom:20px;”>

<td class=”actxt” style=”font-size:16px;line-height:23px;padding:0 0 20px;”>

So, it appears that perhaps when you manipulate the elements in the html possibly like the padding or defining the class in a table.  I suspect it’s the latter one of these tag examples, but I’m pasting the first two just in case.

Anyway, I hope that it helps whomever finds this post. I’ll try to place the right tags on this post to make it very “findable” as I hope to help others do in my business site: ‘SEM Common Sense



3 Comments

Filed under Advice, Interesting..., Opinions, Random finds, Technology, Theories by Brandon, Web Dev

3 responses to “Tags which wreak havoc on WordPress templates

  1. Yeah, I really hate those Microsoft tags that office adds. I generally edit the HTML instead of using the visual editor and those tags make it so messy. A few weeks ago I finally got frustrated and found out that I needed to copy any text into notepad and then into wordpress (if using the visual editor, the html editor works fine when pasting).

  2. You know I don’t know how the div tags got in there. I didn’t copy from word, but I may have copied it from gmail which maybe created the extra tags. So, I guess I should update the post & identify that I copied it from gmail which may be dangerous for some of us. 🙂

  3. RaiulBaztepo

    Hello!
    Very Interesting post! Thank you for such interesting resource!
    PS: Sorry for my bad english, I’v just started to learn this language 😉
    See you!
    Your, Raiul Baztepo

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s