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:
Here is my tabs menu css:Code:/*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*/
Code:.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; }



Reply With Quote
Bookmarks