IE9 conditional statement not working?

Question

I have created a very simple Wordpress theme for my university for Blackboard news/updates/mtc.

The theme looks great in the latest versions of Chrome, FF, and IE10. However there is a weird glitch in IE9. The reason I must support IE9 is because that is the browser that Blackboard recommends using for functionality purposes (when someone insists on using IE). My supervisor wants the blog to look the same in IE9.

So, my main menu looks fine, padding is fine, and no collapse when resizing the window; here is the class that is causing me problems in IE9 ("Home" menu padding is cut off; the menu collapses):

ul.mainnav {
float:left;
width:100%;
margin:0;
list-style-type:none;
Font-Family:Arial, Helvetica;
Font-Size:10pt;
Font-Weight:Bold;
background-color: #006AA6;
white-space: nowrap;
list-style: none;
min-width: 1000px;
margin-left: -15px;
}

So I try to add a conditional statement of:

<!--[if IE lte 9]>

 <style type="text/css">

ul.mainnav {
float:left;
width:100%;
margin:0;
list-style-type:none;
Font-Family:Arial, Helvetica;
Font-Size:10pt;
Font-Weight:Bold;
background-color: #006AA6;
white-space: nowrap;
list-style: none;
min-width: 1000px;
margin-left: -15px;
}
</style>          
<![endif]-->

However the conditional statement, even though nothing has changed, messes everything up in both FF and IE9.

Even if I mess with some of the elements in the conditional statement ideally to trial/error a fix/hack, it still looks like nonsense and is messed up.

What am I doing wrong? And can anyone suggest a possible fix?

The link to the live blog, (I am working on fixing this on my local machine):

http://blogger1.uhcl.edu/UCT/blackboard/

TIA

Answer 1

The two most obvious problems are:

a) You need a space between IE and the version number, eg

<!--[if IE 9]>

While you're at it you may as well make it less than or equal to IE9, ie <!--[if IE lte 9]> as it happens in (at least) IE8 too.

b) You need to close the style tag within the conditional.

That said, the -15px left margin seems to be the cause of the issue; not quite sure why that's required.