CSS 3 alternatives for < IE 9?

HTML & CSS
1

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

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:


		/*

Auteur : Laurent BRACQUART <lbracquart@atalan.fr>
URL : http://atalan.fr/
Date de crÃ&#402;©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'[B]).addClass('tabActive')[/B]
						.find('a')
							.html('<strong>' + $(this).text() + '</strong>')
						.end()
					.siblings()
						.attr('aria-selected', 'false')[B].removeClass('tabActive')[/B]
						.find('a')
							.each(function()
							{
								$(this).text($(this).text());
							});

				$($this.find('a').attr('href'))
					.show()
					.focus();

				e.preventDefault();
			})
			.first()
				.attr('aria-selected', 'true')[B].addClass('tabActive')[/B]
				.find('a')
					.wrapInner('<strong>');
});

// Annexes/ Fonctions annexes
		
		



.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:


.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

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.