Print, video, sounds

Fixing phantom links in the blog body

If there is a minor syntax error in Movable
Type it starts making everything a link.		 pdf version
Movable-Typec_dashboard.jpg
I noticed that any text in my blog post that had no style would get a link assigned to it by Movable Type.
I first noticed that the word "By" in the author byline was a link to my table of contents. The titles of the blog posts in index pages also got linked to the table of contents. Just as serious, you could not see the blog title in Explorer 8. The very tops of the letters where there, but most of the text was covered or hidden or something weird. An Android tablet showed all the post text underlined.

The problem was that Movable Type did not like the way I added my logo and a table-of-contents link in the Banner Header module. Yes, it took a day to figure out and yes, the Movable Type forum offered no help.		 I am sure the software priests at Movable Type blame me. After all, the HTML I used was probably  wrong. I maintain that that a mis-formed bit of HTML in one module should not creep into other modules and ruin them.

OK, here is the deal Lucile, as dad used to say. In order to add a table of contents link to the header of all the blog pages in this site, I created a <div>, floated it right and snuggled that into the existing <div> for the website description that appears under the blog name in the header. My code looked like:
Bottom of first columnmove down to the left
<div id="header-description">
     <$mt:BlogDescription$>
      <div style="text-align: right;">
          <a href="http://www.rako.com/Contents/" target="_blank">Contents
      </div>
</div>

The only thing I added was the nested <div>. Sure, I know I am supposed to give the <div> I created an id or a class and use the stylesheet to move my table of contents link to the far right, but I had not trashed the Movable Type css stylesheet just yet so I just wanted to do it locally in the html.

That innocent little <div> in the header caused every piece of text in the body of the post to have a link to the same place, the table of contents. I only figured out I had a header problem when I changed the link in the header and noticed that whatever I changed it to became the mystery phantom links that showed up everywhere in the body, assigned to text that otherwise had no links.

It took hours to narrow down the exact problem in the header and a few minutes to fix it. What I had to do was change the Banner Header code I inserted from the above to this:

<div id="header-description">
      <$mt:BlogDescription$>
       <a style="float: right;" href="http://www.rako.com/Contents" target="_blank">Contents</a>
</div>

That seeming innocuous change made all the phantom links go away in the body of the post or index page, made the title text render right on Explorer 8, and took away all the underlines in the body of the text when rendered on an Android tablet.
move up a little to the right move down to the left

This post is in these categories:

Categories

 border bar
Bottom of first column This is the end.