CSS changes in IE 9

[gusgus]

Thanks first for all the wise and great help here in the past. I've actually learned how to do this....BUT....CSS changes in IE 9 have me baffled. I was surprised to find my sixth tab dropping down to a second row and I can not for the life of me find any instruction on what the css difference is from IE8 to IE9. here is my css...but i don't want to rely on the advise I'm finding regarding IE 9 that ask you to use the toggle on the address bar to fix a page rather than tell a webdesigner how to do it.

I am using "animatedtabs" and I have all my css with global defaults set to clear any problems out and this has worked so great ...Like:


/*GLOBAL VARIABLES TO CANCELL OUT BROWSER PRESETS*/
/**begin global reset and styles***/

*html, body{
margin:0;
padding:0;
border:0;
}
body{
margin:0;
font-size:100%;
background-image: url(/Music/css/music.jpg);
}
h1,h2,h3,h4,h5,h6,p,blockquote,form,label,ul,ol,dl,li,address,fieldset,input,div,table,th,tr,td{
margin:0;
padding:0;
border:0;
}
a img{
border:none;
}
/*****end global styles******/
/*END GLOBAL VARIABLES*/

Here is my tabs menu css:


.animatedtabs a span{
float: left;
position: relative;
display: block;
background: url(/css/tab-blue-right.gif) no-repeat right top;
padding: 5px 12px 3px 2px; /* 2) Padding within each tab. The 3rd value, or 3px, should equal (1) MINUS (3) */
font-weight: bold;
color:#990000;
}

/* Commented Backslash Hack hides rule from IE5-Mac \*/
.animatedtabs a span {float:none;}
/* End IE5-Mac hack */


.animatedtabs .selected a{
background-position: 0 -125px;
top: 0;
}

.animatedtabs .selected a span{
background-position: 100% -125px;
color: #990000;
padding-bottom: 7px; /* 3) Bottom padding of selected tab. Should equal (1) PLUS (2) above */
top: 0;
}

.animatedtabs a:hover{
background-position: 0% -125px;
top: 0;
}

.animatedtabs a:hover span{
background-position: 100% -125px;
color: #C00;
padding-bottom: 7px; /* 3) Bottom padding of selected tab. Should equal (1) PLUS (2) above */
top: 0;
}