WordPress three column theme malfunction in Internet Explorer web browser: column-sidebar drops down in IE; problem and solution

For the longest time, this blog and the Siamerican’s personal blog were not displaying properly in Internet Explorer web browsers. As they both implement a three column theme, the third column or sidebar always dropped to the bottom, below all the content, and particularly, only when opened in Internet Explorer.

Upon research, it was found that this is a common problem for all wordpress three column themes when viewed in Internet Explorer. Since Microsoft wants to be special and create such a bug, the initial solution was to suggest readers and all who happened upon these blogs to install and use Firefox instead of Internet Explorer.

Even though Firefox, overall has proved to be a much more reliable and efficient web browser, a majority of web users haven’t a clue and continue to use IE, because it is familiar. Therefore, it was a likely chance that many readers were viewing these blogs with one of the columns collapsed somewhere below all the rest of the content. Either they didn’t know, or simply don’t care to go through the trouble to outright abandon IE. Admitingly, it is silly to think and expect such masses to go through all the trouble of changing web browsers, simply to view a few blogs correctly.

Thus, it was time to finally tackle the coding problem and make the three column themes compatible with Internet Explorer web browsers. After a few google queries, the Siamerican finally found the problem and solution.

Without claiming to be some kind of expert on CSS and styles coding, the Siamerican found that the problem was clearly in the way IE reads and handles the CSS styles, particularly in the styles.css page of the the theme folder.

There are basically two ways to put a simple fix on the problem in question. These two solutions will require one to open up the styles.css file in a text-code editing program such as Dreamweaver.

Find the code that defines the columns. It will most likely be something like #sidebar, #leftsidebar, #rightsidebar, #sidebar1, #sidebar2, etc. etc. If you are unsure how to look at CSS styles, just use the ‘find’ function and type in sidebar. If the code has ‘#’ with ‘sidebar’ connected in the same line, then that’s what you want.

Within the perimeters of that code, (between the { and } symbols) you will need to add this tag:

overflow:hidden;

Make sure it is separated from other tags with a semicolon. For example, it should look something like this:

#sidebar { width:145px; othertag1:somevalue; othertag2:somevalue2; overflow:hidden; }

Note that the bold text above is what you should add. Save and replace the .css file and upload it onto your server. This should fix the bug and make the theme compatiable with internet explorer. If this doesn’t work, the second thing to try is to make the width of the column smaller. Just change the px value, gradually making it smaller by 5 pixels (px).

For more reference see this WordPress support thread, as well as this page with diagnosis and solution.

Popularity: 11% [?]


Did you find this post interesting? You may also enjoy these posts:

4 Responses to “WordPress three column theme malfunction in Internet Explorer web browser: column-sidebar drops down in IE; problem and solution”

  1. Wordpress three column theme malfunction in Internet Explorer web | Cellulite Creams Says:

    [...] WordPress three column theme malfunction in Internet Explorer web Posted by root 16 minutes ago (http://www.thaiskale.com) WordPress three column themes do not display properly in internet best to view and comment at the the poster website if provided with a url laxing and leisure in phuket tourism epicenter patong beach town by the global cyber journal of wit amp wisdom thai Discuss  |  Bury |  News | WordPress three column theme malfunction in Internet Explorer web [...]

  2. Web Browser Says:

    I agree on your points for firefox! It is indeed one of the best browsers out there and personally I use it the most to! keep it up :)

  3. Dentists San Jose CA Says:

    I agree with that one too. I love their add-on function. It lets you personalize your needs in surfing the net.

  4. Hot jobs Says:

    I tried it on my blog theme but still can’t fix it. my blog doesn’t show properly on IE

Leave a Reply