SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Enthusiast open4biz's Avatar
    Join Date
    Jan 2004
    Location
    San Diego
    Posts
    87
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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.

    http://www.anseltaft.com/

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

    Thanks,

    Ansel

  2. #2
    Resident curmudgeon bronze trophy gary.turner's Avatar
    Join Date
    Jan 2009
    Location
    Dallas
    Posts
    990
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

    cheers,

    gary
    Anyone can build a usable website. It takes a graphic
    designer to make it slow, confusing, and painful to use.

    Simple minded html & css demos and tutorials

  3. #3
    SitePoint Enthusiast open4biz's Avatar
    Join Date
    Jan 2004
    Location
    San Diego
    Posts
    87
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by gary.turner View Post
    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;}.
    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

    -Ansel

  4. #4
    SitePoint Enthusiast open4biz's Avatar
    Join Date
    Jan 2004
    Location
    San Diego
    Posts
    87
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Crude. I misspoke. The IE8 'compatibility view' bug is still there.

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,276
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

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


    Code:
    #atheadbottom {
        clear: left;
        margin-left: 51px;
        /*margin-top:-20px;*/
        width:180px;
    }
    #left_sidebar {
        width: 180px;
        background: #261D11;
        margin-left: 51px;
        margin-bottom: -20px;
        font-size: 14px;
        position:relative;
        z-index:99;
    }
    Also remove the empty ul here:

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

  6. #6
    Resident curmudgeon bronze trophy gary.turner's Avatar
    Join Date
    Jan 2009
    Location
    Dallas
    Posts
    990
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    []

    Also remove the empty ul here:

    Code:
                    <li
    class="page_item page-item-87"><a
    href="http://www.anseltaft.com/contact/" title="Contact Me">Contact Me</a></li>
                </ul>
                <ul></ul>
            </div>
            <div
    Aha! Yes, that was one of the errors I fixed in my working copy. Now, what else have I forgotten?

    Quote Originally Posted by Ansel
    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.
    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
    Anyone can build a usable website. It takes a graphic
    designer to make it slow, confusing, and painful to use.

    Simple minded html & css demos and tutorials


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •