SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Zealot
    Join Date
    Oct 2006
    Posts
    179
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS 3 alternatives for < IE 9?

    Hello,

    If you are using IE 9 and above, the menu at this location works correctly.

    However, the color changing does not work correctly in IE 8 or less.

    • If you click on Tab 1 and then click on Tab 2 or Tab 3, Tab 1 stays in red
    • If you click on Tab 2 and then click on Tab 1 or Tab 3, Tab 2 stays in blue
    • If you click on Tab 3 and then click on Tab 1 or Tab 2, Tab 3 stays in yellow

    The tab colors do not revert back to grey as they do in modern browsers.

    Are there any alternatives to make the menu appear the same in IE 8 or less?

    Thanks in advance.

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,298
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    It seems that IE8 doesn't really like the css attribute selector working with attributes that have been changed dynamically. They sort of half work. I would simply add a class to the elements to indicate that the tab is active. You can still keep the 'aria' attributes in place for accessibility but use the class in the css which will help older browsers.

    e.g.
    change the script to this:

    Code:
    		/*
    
    Auteur : Laurent BRACQUART <lbracquart@atalan.fr>
    URL : http://atalan.fr/
    Date de cr√ƒ¬©ation : 12 septembre 2012
    Version : 1.0
    
    Index :
    
        0/ Gestion de l'affichage des onglets en ARIA
    
        Annexes/ Fonctions annexes
    
    */
    
    $(document).ready(function()
    {
    	// 0/ Gestion de l'affichage des onglets en ARIA
    	$onglets = $('ul.onglets');
    	$panneaux = $('div.panneau');
    
    	$panneaux
    		.attr(
    		{
    			'role':			'tabpanel',
    			'tabindex':		'0'
    		})
    		.not(':first')
    			.hide();
    
    	$onglets
    		.attr('role', 'tablist')
    		.find('li')
    			.each(function()
    			{
    				$this = $(this);
    				
    				$this.attr(
    				{
    					'role':				'tab',
    					'aria-selected':	'false',
    					'aria-controls':	$this.find('a').attr('href').replace('#', '')
    				})
    			})			
    			.on('click', function(e)
    			{
    				$this = $(this);
    
    				$panneaux
    					.hide();
    
    				$this
    					.attr('aria-selected', 'true').addClass('tabActive')
    						.find('a')
    							.html('<strong>' + $(this).text() + '</strong>')
    						.end()
    					.siblings()
    						.attr('aria-selected', 'false').removeClass('tabActive')
    						.find('a')
    							.each(function()
    							{
    								$(this).text($(this).text());
    							});
    
    				$($this.find('a').attr('href'))
    					.show()
    					.focus();
    
    				e.preventDefault();
    			})
    			.first()
    				.attr('aria-selected', 'true').addClass('tabActive')
    				.find('a')
    					.wrapInner('<strong>');
    });
    
    // Annexes/ Fonctions annexes

    Code:
    .tab1.tabActive a,
    .tab1[aria-selected=true] a, .tab1 a:hover, .tab1 a:focus{
    	background: #FF0000 !important;
    	border-bottom-color:  #FF0000 !important;
    }
    .tab2.tabActive a,
    .tab2[aria-selected=true] a, .tab2 a:hover, .tab2 a:focus{
    	background: #0000FF !important;
    	border-bottom-color:  #0000FF !important;
    }
    .tab3.tabActive a,
    .tab3[aria-selected=true] a, .tab3 a:hover, .tab3 a:focus{
    	background: #FFFF00 !important;
    	border-bottom-color:  #FFFF00 !important;
    }
    Strictly speaking though you shouldn't mix attribute selectors with normal css because a browsers that doesn't understand an attribute selector is supposed to drop the whole list of comma separated rules completely. It would be safer to do this:

    Code:
    .tab1[aria-selected=true] a{
    	background: #FF0000 !important;
    	border-bottom-color:  #FF0000 !important;
    }
    .tab1.tabActive a, .tab1 a:hover, .tab1 a:focus{
    	background: #FF0000 !important;
    	border-bottom-color:  #FF0000 !important;
    }
    BTW Mcafee gives this warning on your site.


    Whoa!
    Are you sure you want to go there?

    http://crango.uofydating.com/menu/new.php may try to steal your information.

    Why were you redirected to this page?

    When we visited this site, we found it may be designed to trick you into submitting your financial or personal information to online scammers. This is a serious security threat which could lead to identity theft, financial losses or unauthorized use of your personal information.

    More about 'phishing' attacks

  3. #3
    SitePoint Zealot
    Join Date
    Oct 2006
    Posts
    179
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Paul - your help has been invaluable.

    Yes the server was compromised at some point, which is why you see that message. I'm working with the web host to get it resolved, possibly even shut down since the IP is now tainted.


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
  •