CSS Menu Botched in IE8 w/Compatibility Mode Enabled

Hi All,

In Internet Explorer 8, when I turn on compatibility mode (which should represent how the browser would look in IE7, right?), the CSS menu on the left of the page squishes down. It looks horrible.


Any idea what’s going on and how to fix it?



First: Toss in a linefeed once in a while. Format your code for ease of human readability. That all-on-one-line stuff has no, zero, zilch, nada practical benefits.

There are html errors. You should fix them. I didn’t see any that would affect your issue, but errors tend to cascade. I fixed my working copy before trying to debug.

You have the ‘a’ element set to block. That triggers the white space bug in IE6. To #page_menu_ul li a, add {zoom: 1;}.

I could see no benefit to the negative bottom margin on #left_sidebar, and negative top margin on #atheadbottom.

From #left_sidebar, #main_area, delete {float: left;}. That means there’s no use for #atheadbottom {clear: left;}.

That should fix you up, if I haven’t forgotten something else I did. :wink:



Hi Gary,

I’m sorry for the inline output. It must be a WordPress ‘feature’ because my template has carrier return white space.

I will troubleshoot the HTML errors in the future.

Thank you for letting me know about the IE whitespace bug. I had not heard of that before. And that solved my menu’s formatting issue. I officially hate IE now. ptoo ptooie

The negative margins squeezed the menu together a little more than the browsers naturally wanted to. For aesthetics, I will leave them as is.

As for the floats, I am very hesitant to play with those because the theme has some kind of built-in jQuery action that shifts the columns around based on some algorithm. I would hate to disrupt that. Okay, I’m a big scardy cat.

Thank you for your help :slight_smile:


Crude. I misspoke. The IE8 ‘compatibility view’ bug is still there. :frowning:


If you want the nav to overlap then you will need to control the z-index here.

#atheadbottom {
    clear: left;
    margin-left: 51px;
[B]    /*margin-top:-20px;*/[/B]
#left_sidebar {
    width: 180px;
    background: #261D11;
    margin-left: 51px;
 [B]   margin-bottom: -20px;[/B]
    font-size: 14px;
[B]    position:relative;

Also remove the empty ul here:

class="page_item page-item-87"><a
href="http://www.anseltaft.com/contact/" title="Contact Me">Contact Me</a></li>
        [B]    <ul></ul>[/B]

Aha! Yes, that was one of the errors I fixed in my working copy. Now, what else have I forgotten?

I doubt my suggested change would enter in to that, but there’s a simple way to find out; comment out the float and clear properties. If it ends up breaking, put them back in (which does break IE6 for sure).