As I mentioned here, I’ve noticed recently that when viewing my site, a WordPress blogging page, in Internet Explorer (I tried IE 6), the sidebar actually appears at the bottom of the page. That was really annoying, because the main reason I redesigned the sidebar was to help people navigate: it has category, archive, blog roll, etc., and some are in drop-down menu to help a casual visitor moving around. Now if it is at the bottom, obviously it is not going to help much for browsing in IE.

So I set out to fix this issue. After around one hour of search tonight, I found the solution to my problem. So if you have a WordPress blog site and your sidebar appears at the bottom page in IE, instead of on the left or right side of the main entry, this may help you out:

1. Locate your css file and open it in a text editor. Find the one located under your WordPress theme folder. For example, I use the modified almost-spring theme. I went to that folder and looked for a file with css extension. Mine is called style.css;

2. Search for “html #content”. Make sure it has a line like this:
[sourcecode language=”xml”]
overflow: hidden;
[/sourcecode]
within the curly brackets;

3. Search for “#sidebar”. Make sure it has a line like this:
[sourcecode language=”xml”]
overflow: hidden;
[/sourcecode]
within the curly brackets;

4. It is really easy to debug. After you make the change, save the css file, and then refresh the page in IE to see if it helps or not. If not, take out the change you just put in. Good luck! And please let me know if there are still usability issues on this site, thanks!

Here is the relevant code snippet in my style sheet after the modification:

[sourcecode language=”xml”]
* html #content {
overflow: hidden;
/* So IE won’t break things */
}
#sidebar {
overflow: hidden;
float: left;
padding: 1.8em 20px 0 20px;
width: 230px;
font-size: 0.9em;
voice-family: “\”}\””;
voice-family: inherit;
width: 190px;
}
[/sourcecode]