CSS Menu Botched in IE8 w/Compatibility Mode Enabled

HTML & CSS
1

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.

http://www.anseltaft.com/

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

Thanks,

Ansel

2

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:

cheers,

gary

3

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:

-Ansel

4

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

5

Hi,

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]
    width:180px;
}
#left_sidebar {
    width: 180px;
    background: #261D11;
    margin-left: 51px;
 [B]   margin-bottom: -20px;[/B]
    font-size: 14px;
[B]    position:relative;
    z-index:99;[/B]
}

Also remove the empty ul here:


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

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).

cheers,

gary