Search jQuery

jQuery Forum

Bug - link in dialog has rectangle around it.

in Using jQuery UI • 12 years ago

I think I found a bug using a UI dialog containing a link.

I have a simple page with a UI dialog containing 2 links. The first link is rendered in the browser with a rectangle around it in most browsers I have tested it in. One browser where this does NOT occur is IE6 (haven't tested with IE7). In Safari 5 mac, there is a blue rectangle around the link. In FF 3.6.8 mac and FF 2 Windows there's a black dotted line. In Opera 9.02 in Windows, the link is highlighted blue.

Feel free to school me if I am doing something wrong, or this issue is already known (am still somewhat new to jquery and it's community).

Here is the code:

<!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>Dialog link bug</title>
<link href="css/ui-lightness/jquery-ui-1.8.4.custom.css" rel="stylesheet" type="text/css" />
<script type='text/javascript' src='js/jquery-1.4.2.min.js'></script>
<script type='text/javascript' src='js/jquery-ui-1.8.4.custom.min.js'></script>
<script type='text/javascript'>
$(document).ready(function(){
$("#theDialog").dialog();
});
</script>
</head>
<body>
<div id="theDialog" title="A dialog box">
<a href="url1.html">link 1</a> <a href="url2.html">link 2</a>
</div>
</body>
</html>

Replies(1)

fhickler

Re: Bug - link in dialog has rectangle around it.

12 years ago

Following up my own post here:

I realized that the first link was getting keyboard focus for some reason. So I worked around it by defocussing it after the dialog opens, thusly:

<!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>Ferdale Contract Manufacturing</title>
<link href="css/ui-lightness/jquery-ui-1.8.4.custom.css" rel="stylesheet" type="text/css" />
<script type='text/javascript' src='js/jquery-1.4.2.min.js'></script>
<script type='text/javascript' src='js/jquery-ui-1.8.4.custom.min.js'></script>
<script type='text/javascript'>
$(document).ready(function(){
$("#theDialog").dialog();
$("#firstLink").blur();
});
</script>
<style>
#theDialog{display:none};
</style>
</head>
<body>
<div id="theDialog" title="A dialog box">
<div><a id="firstLink" href="url1.html">link 1</a></div>
<div><a href id="secondLink" href="url2.html">link 2</a></div>
</div>
</body>
</html>

Top Reply

Response title

Attachments

jQuery Forum

Bug - link in dialog has rectangle around it.

Replies(1)

Re: Bug - link in dialog has rectangle around it.

Statistics

Tags

Actions