IE9 conditional statement not working?

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. My supervisor wants the blog also to look the same in IE9.

So, my main menu looks fine, padding is fine, 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;
}

Code (markup):

So I try to add a conditional statement of:

<!--[if IE 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]-->

Code (markup):

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


UPDATE: Did not declare doctype. Fixed all problems. FAIL!