WordPress Editor Behaves Strangely in Internet Explorer

If WordPress Editor in your Administration Panels behaves strangely and not as you expect it, then continue reading, this post might be your solution.

Problems With the WordPress Editor

A little background: This blog is a self-hosted WordPress blog. Since its creation, about 14 months ago from this post date, I was using IE7, and then IE8 to access the WordPress Dashboard. This blog went through several WordPress Versions (from Version 2.8 and up to Version 3.1)

What I noticed is that both the Visual Editor and the HTML editor in the WordPress Dashboard, behave strangely regardless of the WordPress version or the Internet Explorer version. To bypass this strange behavior, I always write my posts in Dreamweaver editor and then copy and paste the post to the WordPress editor. If I have to do any modifications, I will do it in Dreamweaver and then copy the whole post again and paste it in the WordPress Editor.

Here are the strange behaviors that I noticed:

In the Visual Editor:

The following behaviors are consistent in IE8 and IE7:

  1. Bold icon: The Bold tag does not work. When I highlight a word and then I click on the B icon, nothing happens. Also the cursor jumps to the beginning of the post.
  2. Link icon: The anchor tag does not work. I highlight a word and then I click on the link icon and nothing happens. The link does not get created.
  3. Italic icon: The italic tag does not work. I highlight a word and then I click on the Italic icon and nothing happens.
  4. Many Other icons: There are other icons that do not work either, like the underline, strikethough, and others. Also I noticed that when I insert an icon that works (like inserting a custom Character, or inserting a new table) they are always inserted at the start of the post regardless where the cursor position is within the post.

In the HTML Editor:

The following behavior is consistent in IE8 but NOT in IE7:

  1. This behavior is the most annoying one at all. All the problems with the WordPress Visual Editor do not bother me since I am a hand-coder. I only use the WordPress HTML editor, I had the Visual editor disabled by going to: User -› Your Profile. The problem is, when I have a long post that enables the vertical scrollbars, every time I add more content, the cursor keeps automatically going back to the beginning of the post. To the point that I don´t know where I am editing the post.

To see what I am talking about, watch these videos below: You can choose between Standard OR Wide Screen formats, to whatever best fits your screen. The Wide screen format is higher in quality and thus larger in file size. PLEASE BE PATIENT FOR THE VIDEOS TO LOAD. I apologize for the long loading time of the videos, I could not make them any smaller in size without compromising quality.

  1. WordPress Editor in Internet Explorer8 – Standard mode – Video (100 MB)
  2. WordPress Editor in Internet Explorer8 – WideScreen mode – Video (128 MB)
  3. WordPress Editor in Internet Explorer8 – Part2 – Standard mode – Video (61.9 MB)
  4. WordPress Editor in Internet Explorer8 – Part2 – WideScreen mode – Video (77.9 MB)

I know that many Web developers, including myself, don´t like WordPress “Visual” editor. Personally, I don´t use it because I write straight HTML code, and also because WYSIWYG editors are more likely to produce bad, not valid code.

Solution to the WordPress Editor

Change your Browser. The solution is quite simple, use a different browser to Login to your WordPress Dashboard. It is interesting for a long time, I thought that the above strange behavior of the editor is a WordPress issue. It turned out to be that I am wrong, and this is a browser issue. I Logged in to the WordPress dashboard and tested both the WordPress Visual and HTML editors in Google Chrome 11, Safari 5 for Windows, Opera 11, Mozilla Firefox 3.6 and 4, and even believe or not IE9 and all the problems mentioned above were non existent. Everything works normal in the WordPress Editor.

To see What I am talking about, watch this video below: You can choose between Standard OR Wide Screen formats, to whatever best fits your screen. The Wide screen format is higher in quality and thus larger in file size. PLEASE BE PATIENT FOR THE VIDEOS TO LOAD. I apologize for the long loading time of the videos, I could not make them any smaller in size without compromising quality.

  1. WordPress Editor in Google Chrome – Standard mode – Video (44.8 MB)
  2. WordPress Editor in Google Chrome – WideScreen mode – Video (56.1 MB)

Conclusion

The next time you notice that your WordPress Editor in your Dashboard is behaving strangely, the solution might be as simple as trying a different browser. Do you have anything to say? If so, please share it in the comments section.

If you reached that far and liked this post, link back to it. Thanks!

About the Author |
Boutros is a professional Drupal & WordPress developer, Web developer, Web designer, Software Engineer and Blogger. He strives for pixel perfect design, clean robust code, and user-friendly interface. If you have a project in mind and like his work, feel free to contact him. Connect with Boutros on Twitter, and LinkedIn.
Visit Boutros AbiChedid Website.

Comments are closed.