IE9 random CSS problems - css

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.