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: 17% [?]
Did you find this post interesting? You may also enjoy these posts:
- Internet and Tech Woes: Victim of Virus and Spam IT epedemic
- Hoang Thuy Linh: Vietnam Media Sex Saga-teenage star mobile sex clip
- Thailand Blog: Culture, Society, Lifestyle, News, and Insight about Thailand
- The role of monks in modern Thai society: Has Buddhism gone astray?
- The other side of Phuket not in guidebooks: Phuket town, neighborhoods, crime, and garbage issue
