IE9 random CSS problems

Question

I am currently debuggig my site in IE9, and I am coming across a view quirks mainly to do with the navigation bar that runs across of the top the site,

When you look at http://mensclothingroom.factoryagency.co.uk the nav is fine, however if you then look at http://mensclothingroom.factoryagency.co.uk/category/socks the nav partially stacks, this is really confusing as they are running the same CSS and also ie specific stylesheets.

CSS

.navigation {
    position:absolute;
    top:69px;
    left:5px;
    padding:0px 0px 0px 4px;
    border-bottom:1px solid #ccc;
}

    .navigation .site_navigation {
        padding:7px 0px 7px 0px;
        clear:both;
    }

        .navigation .site_navigation ul {
            height: 34px;
            line-height: 34px;

        }

            .navigation .site_navigation li {
                float: left;
                height: 16px;
                margin-right: 15px;
                position: relative;
            }

                .navigation .site_navigation li > ul {
                    display:none;
                    width:165px;
                    position:absolute;
                    left:0px;
                    top:34px;
                    background:#fff;
                    border:1px solid #aaa;
                    z-index:999;
                    height:auto;
                    padding:2px 0px
                }

                    .navigation .site_navigation li:hover > ul {
                        display:block;
                        box-shadow: 2px 2px 2px #999999;
                    }

                    .navigation .site_navigation li:hover > ul li > ul {
                        display:none;
                    }

                        .navigation .site_navigation li:hover > ul li,
                        .sidebar_navigation li {
                            line-height:11px;
                            clear:both;
                            display:block;
                            margin-bottom:2px;
                            width:140px;
                        }

                            .navigation .site_navigation li:hover > ul li {
                                height: auto !important;
                                line-height: normal;
                            }

                            .navigation .site_navigation li:hover > ul a,
                            .sidebar_navigation a {
                                font-size:10px;
                                padding:6px 0 6px 10px;
                                width:130px;
                                display:block;
                            }

                                .navigation .site_navigation li:hover > ul a {
                                    width:155px;
                                }

                                .navigation .site_navigation li > ul a:hover,
                                .navigation .site_navigation li:hover > a,
                                .sidebar_navigation a:hover {
                                    font-size:10px;
                                    background:#999;
                                    color:#fff;
                                }

                                    .navigation .site_navigation li:hover > a {
                                        font-size:12px;
                                    }


                .navigation .site_navigation li.sale {
                    float: right;
                    height: 25px;
                    line-height: 25px;
                    margin-right: 4px;
                }

                    .navigation .site_navigation li.sale a {
                        background:#BE1E2D;
                        height:16px;
                        color:#fff;
                        padding:4px 18px;
                    }

                        .navigation .site_navigation li a.sale {
                            display:block;
                            height:25px;
                        }

                        .navigation .site_navigation li.current a.sale {
                            background:#9C1925;
                        }

                .navigation .site_navigation li  a,
                .sidebar_navigation a {
                    color: #666666;
                    font-family: Georgia,Times,"Times New Roman",sans-serif;
                    font-size: 12px;
                    letter-spacing: 0.05em;
                    text-decoration: none;
                    text-transform: uppercase;
                }

                    .navigation .site_navigation li a {
                        display: block;
                        padding: 0 10px;
                    }

                        .navigation .site_navigation li > ul a {
                            padding:0px 0px 0px 12px;
                        }

                        .navigation .site_navigation li a:hover,
                        .navigation .site_navigation li.current a {
                            background:#aaa;
                            color:#fff;
                        }

IE CSS

  .navigation .site_navigation {
    padding:10px 0px 0px 0px;
}

.navigation .site_navigation li {
    list-style:none outside none;
    margin-right:15px;
    float:left;
    height:auto;
}

Can anyone shed any light on the problem?

Answer 1

Looking at it in the W3C HTML Validator ...

Your first link has no stray HTML tags.

Your second link has lots of stray/missing tags which could cause rendering problems in certain browsers.

• Line 124, Column 9: Stray end tag ul.

• Line 302, Column 11: No li element in scope but a li end tag seen.

• Line 319, Column 7: End tag for body seen, but there were unclosed elements.

• Line 31, Column 34: Unclosed element div.