IE 8 floating issue with responsive design - css

Question

IE only knows how to make smokers who've just quite, smoke again!!
I'm trying to perfect this responsive Navigational Menu (as well as another website I've developed) to RESPOND with IE8 (i'm not sure what the NAV looks like in www.testing123.co.za/test1.htm
when I re-size the my browser window, it seems like the NAV is ignoring my media queries OR IE8 is not liking the float involved in this design. I seem to think it's the latter.
I've done some research and have hear that this should be included in your page for the media queries to be applied, but I still have no luck when including the js file. I'm not sure what I've probably done wrong here?
I included the js file like so:
<script src="css3-mediaqueries.js"></script>
Anyway, I'd appreciate some clarification at what must be done to correct IE 8 Float problems (assuming this is the issue).
Appreciate your help, thanks
CSS goes like:
nav {
width: 90%;
margin: 0px auto;
}
nav ul {
list-style: none;
overflow: hidden;
}
nav li a {
background: #444;
border-right: 1px solid #fff;
color: #fff;
display: block;
float: left;
font: 100 24px/1.4 TrumpGothicWestRegular;
padding: 10px;
text-align: center;
text-decoration: none;
text-transform: uppercase;
width: 12.5%;
min-height:80px;
padding-top:60px;
}
nav li a img { padding-bottom:5px; display:block; margin: 0px auto; }
/*SMALL*/
nav small {
color: #aaa;
font: 100 11px/1 Helvetica, Verdana, Arial, sans-serif;
text-transform: none;
}
nav li a:hover {
background: #222;
}
nav li:last-child a {
border: none;
}
Viewports under 1100px (small-device1100.css):
nav li a {
font: 100 21px/1.4 TrumpGothicWestRegular;
min-height:inherit;
padding: 10px;
}
nav small {
font: 100 8px/1 Helvetica, Verdana, Arial, sans-serif;
}
nav li a img { display:none; }
Viewports under 825px (small-device825.css):
nav li a {
width: 33.333333333333333333333333333333%;
border-bottom: 1px solid #fff;
font: 100 24px/1.4 TrumpGothicWestRegular;
}
nav li:last-child a, nav li:nth-child(3) a {
border-right: none;
}
nav li:nth-child(4) a, nav li:nth-child(5) a, nav li:nth-child(6) a {
border-bottom: none;
}
Viewports under 350px (small-device350.css):
nav li a {
width: 50%;
font: 400 21px/1.4 TrumpGothicWestRegular;
padding-top: 12px;
padding-bottom: 12px;
}
nav li:nth-child(even) a {
border-right: none;
}
nav li:nth-child(3) a {
border-right: 1px solid #fff;
}
nav li:nth-child(4) a, nav li:nth-child(5) a {
border-bottom: 1px solid #fff;
}