Member Avatar for Silvershaft

I got a little, well maybe stupid problem and I have had this before but I don't remember how to fix it link is .
When you press the login button idiotic red borders show up :S

Here is code:

Index .php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> PhP </title>
<link href="Style.css" rel="stylesheet" type="text/css" />

<script type="text/javascript">
	var a = new Image(); a.src = 'root.gif';
	var b = new Image(); b.src = 'hover.gif';
	var c = new Image(); c.src = 'active.gif';
</script>

</head>
<body>


<div>


	<div id="Header">
    	
    	<a href="whatever" onmouseover="document.images['Login'].src='Images/LoginOver.png';" onmouseout="document.images['Login'].src='Images/Login.png';"><img src="Images/Login.png" name=        "Login" height="40" width="170" alt="" border="0" id="Login"></a>
        
    </div>
    
    <div id="Box" >
    </div>
    

</div>







</body>
</html>

CSS sheet

@charset "utf-8";
/* CSS Document */

body
{
	/* background-color:#036; */
	background:url(Images/BG1.png);
}

#Header
{
	background:url(Images/Header.png);

	width:115%;
	height:110%;
	margin-left:-1%;
	margin-top:-1%;
}

#Login
{
	margin-left:35%;
	margin-top:3%;
}

#Box
{
	background:url(Images/Box.png);
	width:100%;
	height:100%;
	
}
  • 2 Contributors
  • 2 Replies
  • 93 Views
  • 9 Hours Discussion Span
  • Latest Post Latest Post by Kruptein

Dani AI

Generated

Note: later marked the issue solved and asked for details. For future readers, a visible red border on a clicked image link is usually a browser/user-agent focus or tap highlight, not a broken image. Inspect the element with developer tools to see whether an outline, box-shadow or a UA rule is being applied. The CSS outline behavior and the modern :focus-visible approach are documented here: outline and :focus-visible.

A safe, accessible way to remove the mouse-click flash while keeping keyboard focus visible is to hide the outline only when the element is focused via mouse and provide an explicit focus style for keyboard users. Example:

a:focus:not(:focus-visible) {
  outline: none;
}

a:focus-visible {
  outline: 2px solid #159CE4;
  outline-offset: 2px;
}

/* optional: remove mobile tap highlight */
a, a img {
  -webkit-tap-highlight-color: transparent;
}

Troubleshooting checklist: test in multiple browsers to see whether the ring is UA-provided, search your CSS for :focus / :active rules, use devtools to trace the applied rule, and prefer styling :focus-visible over globally removing outlines to preserve keyboard accessibility. See the MDN notes on -webkit-tap-highlight-color for mobile behavior: -webkit-tap-highlight-color.

Recommended Answers

All 2 Replies

Member Avatar for Silvershaft

Got it already, no need to answer

Member Avatar for Kruptein

Can you tell how you fixed it, to solve the same problem for other users.

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.