Unwanted 1px border around visited link in FF

7 posts by 3 authors in: Forums > CMS Builder
Last Post: August 1, 2011   (RSS)

By gkornbluth - July 31, 2011

OK, I’ve spent most of the morning trying to get rid of the border that appears around the visited link in FF and IE when using the back arrow to return from that linked page.

I'm giving up and I’m hoping someone has already found a solution to this.

It’s easier to see the problem at: http://www.walterhnatysh.com/border-test.php

Clicking on one of the titles (or the image) brings up a page displaying the appropriate images.

Back arrow to the test page and there’s a 1px box around the link test or image (it’s easier to see using the text link)

Thanks,

Jerry Kornbluth

Below is the active code including some of the CSS "tricks" I’ve tried:
<?php header('Content-type: text/html; charset=utf-8'); ?>
<?php


// load viewer library
$libraryPath = 'cmsAdmin/lib/viewer_functions.php';
$dirsToCheck = array('/hsphere/local/home/c1093221/walterhnatysh.com/','','../','../../','../../../');
foreach ($dirsToCheck as $dir) { if (@include_once("$dir$libraryPath")) { break; }}
if (!function_exists('getRecords')) { die("Couldn't load viewer library, check filepath in sourcecode."); }

list($body_of_work_detailsRecords, $body_of_work_detailsMetaData) = getRecords(array(
'tableName' => 'body_of_work_details',
));
?>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Border Test</title>
<style type="text/css">
<!--
a {font-family: Arial, Helvetica, sans-serif; text-decoration: none; border:0px none; border-spacing: 0; *border-collapse:collapse;}
a:link {text-decoration: none; border:0px none; border-spacing: 0; *border-collapse:collapse; }
a:visited {text-decoration: none; border:0px none; border-spacing: 0; *border-collapse:collapse; }
a:hover {text-decoration: underline; border:0px none; border-spacing: 0; *border-collapse:collapse; }
a:active {text-decoration: none; border:0px none; border-spacing: 0; *border-collapse:collapse;}

a.image {font-family: Arial, Helvetica, sans-serif; text-decoration: none; border:0px none; border-spacing: 0; *border-collapse:collapse;}
a.image:link {text-decoration: none; border:0px none; border-spacing: 0; *border-collapse:collapse;}
a.image:visited {text-decoration: none; border: 0px none; border-spacing: 0; *border-collapse:collapse; }
a.image:hover {text-decoration: none; border: 0px none; border-spacing: 0; *border-collapse:collapse; }
a.image:active {text-decoration: none; border: 0px none; border-spacing: 0; *border-collapse:collapse;}

table {
*border-collapse:collapse;
border: 0px none;
border-spacing: 0;
}

th {
border: 0px none;
border-spacing: 0;
}

td {
border: 0px none;
border-spacing: 0;

}
-->
</style>

</head>
And in the Body:
<body>
<table width="700" border="0" align="center" cellpadding="15">


<?php foreach ($body_of_work_detailsRecords as $record): ?><?php if ($record['portfolio_sub_category:label'] == 'Recent' ): ?>
<tr>
<td width="34%" align="center" valign="middle">
<div align="center">
<?php foreach ($record['list_page_image'] as $upload): ?>
<a class="image" href="http://www.walterhnatysh.com/artworka.php?body_of_work_title=<?php echo $record['num'] ?>"><img src="<?php echo $upload['thumbUrlPath'] ?>" width="<?php echo $upload['thumbWidth'] ?>" height="<?php echo $upload['thumbHeight'] ?>" alt="" border="0" /></a>
<?php endforeach; ?>
</div>
</td>
<td width="66%" align="center" valign="top" >
<div align="left">
<a class="image" href="http://www.walterhnatysh.com/artworka.php?body_of_work_title=<?php echo $record['num'] ?>"><span class="heading"><?php echo $record['body_of_work_title'] ?></span></a>
<br /><span class="text"><?php echo $record['short_group_description'] ?></span></div><br/></td>
</tr>
<?php endif ?> <?php endforeach; ?>
</table>
<body>
<html>
The first CMS Builder reference book is now available on-line!







Take advantage of a free 3 month trial subscription, only for CMSB users, at: http://www.thecmsbcookbook.com/trial.php

Re: [gkornbluth] Unwanted 1px border around visited link in FF

By Toledoh - July 31, 2011

Add this to your css:

:focus {
outline: 0;
}
Cheers,

Tim (toledoh.com.au)

Re: [Toledoh] Unwanted 1px border around visited link in FF

By gkornbluth - July 31, 2011

Hi Tim,

Thanks a bunch.

That worked perfectly.

In all the Goggle searches I did, there was no mention of the focus issue.

Definitely one for the cookbook.

Best,

Jerry
The first CMS Builder reference book is now available on-line!







Take advantage of a free 3 month trial subscription, only for CMSB users, at: http://www.thecmsbcookbook.com/trial.php

Re: [zip222] Unwanted 1px border around visited link in FF

By gkornbluth - August 1, 2011

Thanks Zip222,

Interesting idea.

I guess I'd have to add the :focus if I wanted that to be a default as well.

Jerry
The first CMS Builder reference book is now available on-line!







Take advantage of a free 3 month trial subscription, only for CMSB users, at: http://www.thecmsbcookbook.com/trial.php

Re: [gkornbluth] Unwanted 1px border around visited link in FF

By zip222 - August 1, 2011

I wasn't able to view the specific problem you were having, but I think img { border:0 } would likely have fixed it. This is part of the reset.

Re: [zip222] Unwanted 1px border around visited link in FF

By Toledoh - August 1, 2011

As part of setting up a new site, I always include the reset from Eric, but it took me ages to figure out why some things just didn't act right... IMHO, vertical-align: baseline; is a pain, but now I understand it I can work around it.

BTW: I don't think border:0 would have worked, it's a different problem. outline:0 for all items, plus focus seems to do the trick.
Cheers,

Tim (toledoh.com.au)