Member Avatar for jonow
jonow 0 Junior Poster

In CSS the pseudo class :active is supposed to make the object active and apply the given style for a split second. This works in every browser except Internet Explorer, in Internet Explorer it keeps it active until you click away (kind of how :focus works in other browsers). Also in Internet Explorer if the :active is on a link and when you click on it takes you to a new page and then if you go back it is still active. Is there a fix to this to make it act how it acts in Firefox? Preferably a CSS or HTML fix but a JavaScript one is fine. Below is an example of what I mean. Run the script I Firefox and see how it is supposed to work and then run it in Internet Explorer and see what the problem is. Attached is a web page with and example I put together. It is in text so just change it to an HTML file and see it.

Thank You

<html>
	<head>
		<style type="text/css">
			.button a{
				background:#ff0000;
				height:100px;
				width:100px;
				display:block;
				outline:none;
			}
			.button a:active{
				background:#0000ff;
				height:100px;
				width:100px;
				display:block;
				outline:none;
			}
		</style>
	</head>
	<body>
		<div class="button">
			<a href="http://www.google.com">
				Click Here
			</a>
		</div>
		<p>
		If you are using Internet Explorer click on the link and see how it turns blue but does not turn back to red. After the new page loads go back and see how it is still blue.
		<p>
		If you are using Firefox, Opera, Safari, Chrome, click on the link and see how it turns blue for a split second and turns back to red and goes to the new page. If you go back it is red again. This is the desired effect.
	</body>
</html>
  • 1 Contributor
  • 0 Replies
  • 95 Views
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.