Results 1 to 1 of 1

Thread: CSS changes in IE 9

  1. #1
    Join Date
    Jun 2008
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default CSS changes in IE 9

    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:

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

    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;
    }
    Last edited by jscheuer1; 11-22-2011 at 02:59 AM. Reason: Format

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •