I created a simple test site and everything works fine but when I apply the same code to the actual site I get an external link icons on everything and my url titles are showing up on internal links.
What am I doing wrong?
I not want external link icon on internal or anchor links.
I have attached mycode.txt
Oooh dear, there’s quite a few things you’ll need to look at here.
To get rules to apply to only external links, you need:
a[href^="http:"] { [I][COLOR="DarkSlateGray"]rules go here[/COLOR][/I] }
To get rules to apply to only email links, you need:
a[href^="mailto:"] { [I][COLOR="DarkSlateGray"]rules go here[/COLOR][/I] }
I’m not sure what’s going on with
<a href="http://quicklinks">Quicklinks</a></li>
unless that’s a link to some kind of intranet service. It’s certainly no good for a regular website, whether it’s supposed to be a link to another site, or an internal link within your own site.
Your use of headings is, um, a bit erratic. The top-level heading should be <h1>, then <h2> for the first level of subheadings, <h3> for the next level down, and so on. You start off with <h6> on something that looks like it isn’t a heading at all, then <h5> for the main heading, then <h1>s for the sub-headings.
A better plan than [color="#cc0000"]<h1><a name="toc_4"></a>Title</h1>[/color] would be [color="green"]<h1 id="toc_4">Title</h1>[/color]. Even better would be to replace toc_4 with a word related to the section title.
Then you appear to have a script after the end of the </html> section, which isn’t allowed (unless you meant that to be a separate file, which would be fine, it just wasn’t clear from the .txt you’ve uploaded if that’s the case).
Hi Steve
The Javascript is a separate file, I just included it in the .txt incase you needed to look at it. The Javascript puts the url title You are leaving only on the non quicklinks/quicklinks-qa links.
<a href=“http://quicklinks”>Quicklinks</a></li> is an internal website. There are a billion links in the site with either http://quicklinks/ or http://quicklinks-qa/
eg) http://quicklinks-qa/bulletins/data/bulletins/****/****/***/.htm
http://quicklinks/bulletins/data/bulletins/****/****/***/.htm
So in my code for the mailto
a[href^=“mailto:”]
{
display:inline-block;
padding-left:20px;
line-height:18px;
background:transparent url(C:/QuicklinksSynchronized/images/link_icons/email_link.gif) no-repeat 100% 0;
padding: 0 20px 0 0;
}
What is the difference between ^ and *?
^ means it only looks for that string at the start of the URL
When the string is http: or mailto:, you know it’s going to be at the start, so using ^ means the computer has to do less work, meaning a faster page load and render.
so when I use ^ the external link icons are now puts on the quicklinks/quicklinks-qa link and the external link title are also put on the internal link which I do not want either.
I’ve created a simple test page which I’ve attached.
Hi,
I can’t follow your logic in that code but you have errors anyway. There should be no space before the colon in the pseudo class and after the “attr” in the content property.
e.g. attr (title)
should be:
attr(title)
and
a[href*=“google”] :hover
should be:
a[href*=“google”]:hover
I think this examples contains all the things you need.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
a {
display:inline-block;
padding-right:14px;
padding: 0 20px 0 0;
}
a[href^="http:"] {
background:yellow url("extlink.gif") no-repeat 100% 0;
padding: 0 20px 0 0
}
a[href^="http:"]:hover:after {
content:" - External - " attr(title);
background:red;
}
/* remove external link from google and title
a[href*="google"]{ background:green;}
a[href*="google"]:hover:after { content: " "; }
*/
a[href^="mailto:"] {
line-height:18px;
background:#ccc url(C:/QuicklinksSynchronized/images/link_icons/email_link.gif) no-repeat 100% 0;
padding: 0 20px 0 0;
}
/*removes external link icon from attributes http://quicklinks/*/
a[href*="quicklinks"] {background:none;}
a[href*="quicklinks"]:hover:after {content: " ";}
</style>
</head>
<body>
<ul>
<li><a title="Yahoo" href="http://www.yahoo.com">Yahoo.com</a> </li>
<li><a title="Google" href="http://www.google.com">Google.com</a> </li>
<li><a title="quicklinks"href="http://quicklinks">Quicklinks</a></li>
<li><a href="http://quicklinks-qa">Quicklinks-QA</a></li>
<li><a href="http://test.com">test</a></li>
<li><a href="#test">Internal Link</a></li>
<li>send an email to <a href="mailto:retailstoresupport@yahoo.com">guesswho@yahoo.com </a></li>
</ul>
</body>
</html>
Thanks for your example. I got it to work However…
I have over 10,000 pages that have need to be updated with external link icons, and url title. Most of the links do not have url titles. That is why I wrote javascript to automatically add the title of you are leaving .
We are using IE 7. so not sure if the background colours are suppose to change to red and green, but I do see the yellow.
I added the titles of the links for testing as I did not want to write a js program to add them to the links.
If you want it tested with your js then you would have needed to supply us a working demo.
We are using IE 7. so not sure if the background colours are suppose to change to red and green, but I do see the yellow.
IE7 doesn’t support :after so I assumed you were going for IE8+ only. You’d have to script it for IE7 if you wanted the same functions.
Well, yes. The ‘quicklinks’ links are external, because they’re pointing to a different server. I suppose you could get round that by targeting [noparse]http://www[/noparse] instead of just http, and then just make sure that all external links include the www in them.
and the external link title are also put on the internal link which I do not want either.
Why do you need a title on the link anyway? In almost all cases, the link text should be sufficient without needing a tooltip that a lot of people won’t see or read.
The reason for the link title is to inform people that they are leaving the internal site.
They like to hand hold people around here lol
I don’t agree but my vote don’t count lol
How do you read this line of code?
a[href^=“http:”]:hover:after {
content:" - External - " attr(title);
}
Any hovered links that start with http will have the word “- External -” added after the content in that element and then will also be followed by the text in the title attribute of that element.
So everything seems to be working except the external links icon.
I have the exact path to the icon, but its does not show up.
What am I doing wrong?
CSS code for external links is at the bottom of the css.txt file
I just copied your files added in my own local image and they showed up straight away in Firefox.
The problem in IE is that you have missed the “a” selector before the attribute selector.
a {
display:inline-block;
padding-right:14px;
padding: 0 20px 0 0
}
[B][href^="http://www"][/B] {
background:#ccc url("images/26x16.gif") no-repeat 100% 0;
padding: 0 20px 0 0
}
It should be:
a {
display:inline-block;
padding-right:14px;
padding: 0 20px 0 0
}
[B]a[[/B]href^="http://www"] {
background:#ccc url("images/26x16.gif") no-repeat 100% 0;
padding: 0 20px 0 0
}
I’m using IE 7
I added the a, both mail and external link icons are still not showing up.
My code is exactly how your example is.
a {
display:inline-block;
padding-right:14px;
padding: 0 20px 0 0
}
a[href^=“http://www”] {
background:#ccc url(“/images/link_icons/extlink.gif”) no-repeat 100% 0;
padding: 0 20px 0 0
}
a[href^=“http://www”]:hover:after {
content:" - External - " attr(title);
}
a[href^=“mailto:”] {
line-height:18px;
background:#ccc url(“/images/link_icons/email.gif”) no-repeat 100% 0;
padding: 0 20px 0 0;
}
The location of the external link graphics is /images/link_icons
this folder is both on quicklinks and quicklinks-qa
Is the background colour showing up for you? If so then it must be a path issue - try an absolute path to the image to make sure.
Do you have a version live that we can debug? If not throw up a quick example somewhere as it will be easier for us to spot live.
Also test in Firefox as well to see whether its a specific IE7 bug and maybe you have a corrupt image in cache or maybe some other IE specific bug triggered…
Yes the colours are showing up, red, and grey.
I’ve tried changing the path. with http:// and c:/
Our pages are posted to quicklinks-qa as development then they are posted to our production site quicklinks. So we can’t use the absolute path, but I’ve tried it anyways and it doesn work either.
We are not allowed to use Firefox 
which is another stupid thing here lol
I’ve attach css file but it won’t let me attach the html as it is already in a previous thread. test…txt
It must be the incorrect path.
Here is your exact code that I have copied and all I have changed is to add an absolute reference to one of the images on my server.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<HEAD>
<link href="file:///C|/MichelleTest/testpsi.css" rel="stylesheet" type="text/css" />
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-1252" />
<script type="text/javascript" src="/js/extlinkTitle.js"> </script>
<TITLE>TESTPAGE</TITLE>
<META NAME="subject" CONTENT="Order Processing" />
<style>
@charset "utf-8";
/* HTML tag styles */
/***********************************************/
body{
font-family: Verdana, Arial, Helvetica, sans-serif;
line-height: 1.3;
padding: 0px 0px 10px 10px;
font-size: 75%;
}
/*div#site-container {width: 920px; margin: 0 auto; text-align: left;}*/
div#site-container {width: 800px;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: 10px;
text-align: left;
padding: 0;
background-color:#FFFFFF}
div#site-containerF {
width: 670px;
text-align: left;
padding: 0;
background-color:#FFFFFF;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: 10px;
}
/*div#site-container {width: 800px;
margin: 0 auto;
text-align: left;
padding: 0;
background-color:#FFFFFF} */
/******* hyperlink and anchor tag styles *******/
a:link{
color: #005FA9;
text-decoration: none;
}
a:visited{
color: #510077;
text-decoration: none;
}
.instructions {
background-color: #33FF00;
}
a:hover{
text-decoration: underline;
}
/************** header tag styles **************/
h1{
color: #333333;
padding: 10px 0px 5px;
font-family: Helvetica;
font-size: 140%;
text-transform: capitalize;
}
h2{
color: #669933;
padding: 10px 0px 5px;
font-family: Helvetica;
font-size: 120%;
text-transform: capitalize;
}
h3{
font: bold 110% Helvetica;
color: #333333;
padding: 2px;
background-color: #EAEAEA;
text-align: left;
/*vertical-align: baseline;*/
display: block;
text-transform: capitalize;
}
h4{
font: bold 100% Verdana;
color: #333333;
margin: 0px;
padding: 3px 0px;
text-transform: capitalize;
}
/******Page Title*******/
h5{
color: #333333;
padding: 5px 0px 5px;
font-family: Helvetica;
font-size: 160%;
font-weight: bold;
text-transform: capitalize;
}
h6{
font: 70% Helvetica;
text-transform: uppercase;
color: #333333;
margin: 0px;
padding: 3px 0px;
}
/************** Table styles *****************/
/*Default table style*/
table{
width: 100%;
border-collapse: separate;
border-spacing: 1px 1px;
empty-cells: show;
border-style: solid;
border-width: 1px;
border-color: #DBDBDB;
background-color: transparent;
font-size: 1em;
}
td{
/*font-size: x-small;*/
vertical-align: top;
border-style: solid;
border-width: 1px;
border-color: #DBDBDB;
padding: 3px;
}
/*Table with No Border*/
table.noborder tr, table.noborder td {
border: 1px none;
vertical-align: top;
padding: 3px;
}
table.noborder{
width: 100%;
border: 1px none;
border-collapse: collapse;
empty-cells: show;
}
/*Small Table */
table.table80 tr, table.table80 td {
vertical-align: top;
border-style: solid;
border-width: 1px;
border-color: #DBDBDB;
padding: 5px;
}
table.table80{
width: 80%;
border-collapse: separate;
border-spacing: 1px 1px;
empty-cells: show;
border-style: solid;
border-width: 1px;
border-color: #DBDBDB;
background-color: transparent;
}
/*Table 80% with no border*/
table.table80nobord tr, table.table80nobord td {
border: 1px none;
vertical-align: top;
padding: 1px;
}
table.table80nobord{
width: 80%;
border: 1px none;
border-collapse: collapse;
empty-cells: show;
}
/*Small Serv Ord Table */
table.smServOrd tr, table.smServOrd td {
vertical-align: top;
border-style: solid;
border-width: 1px;
border-color: #DBDBDB;
padding: 3px;
}
table.smServOrd{
width: 50%;
border-collapse: separate;
border-spacing: 1px 1px;
empty-cells: show;
border-style: solid;
border-width: 1px;
border-color: #DBDBDB;
background-color: transparent;
font-family: New Courier, Courier, mono;
font-weight:normal;
font-size:x-small;
}
/********** PSI revision elements **********/
.revision {color: #FF0000}
/********** Service Order elements **********/
.servOrd{
font-family: New Courier, Courier, mono;
font-weight:normal;
font-size:x-small;
}
.servOrdBold{
font-family: New Courier, Courier, mono;
font-weight:bold;
font-size:x-small;
}
/********** Service Order elements **********/
.servOrd{
font-family: New Courier, Courier, mono;
font-weight:normal;
font-size:x-small;
}
.servOrdBold{
font-family: New Courier, Courier, mono;
font-weight:bold;
font-size:x-small;
}
/********** Note elements **********/
.notes{
display: block;
background-color: #FFFFDD;
margin: 2px;
padding: 2px;
background-position: left top;
text-align: left;
vertical-align: text-bottom;
border-bottom-width: thin;
border-bottom-style: solid;
border-bottom-color: #EEEEEE;
}
/********** Note with Revision Text **********/
.notesRevision{
display: block;
background-color: #FFFFDD;
margin: 2px;
padding: 2px;
background-position: left top;
text-align: left;
vertical-align: text-bottom;
border-bottom-width: thin;
border-bottom-style: solid;
border-bottom-color: #EEEEEE;
color: #FF0000;
}
/********** Small Heading 1 **********/
.smH1{
font: bold 125% Helvetica;
color: #333333;
padding: 5px 0px 5px;
}
/********** Notice **********/
.notice{
font: bold 125% Verdana, Arial, Helvetica, sans-serif;
color: #FF0000;
padding: 5px 0px 5px;
}
.billHeading{
color: #333333;
font-family: Helvetica;
font-size: 90%;
font-weight:bold;
}
/********** Last Modified Date **********/
.lastModDate{
font: 80% Verdana, Arial, Helvetica, sans-serif;;
color: #999999;
padding: 5px 0px 5px;
}
.pic-border {
border: 1px solid #EEEEEE;
}
.imgMiddle{
vertical-align:middle;
}
.lowercase{
text-transform: lowercase;
}
/*.invisible ul {
list-style:none;
}*/
.alternate li {
list-style:none;
}
/********** Links with Automatic Icons **********/
/***********************************************/
a {
display:inline-block;
padding-right:14px;
padding: 0 20px 0 0
}
a[href^="http://www"] {
background:#ccc url("http://www.pmob.co.uk/temp/images/arrow.gif") no-repeat 100% 0;
padding: 0 20px 0 0
}
a[href^="http://www"]:hover:after {
content:" - External - " attr(title);
}
a[href^="mailto:"] {
line-height:18px;
background:#ccc url("http://www.pmob.co.uk/temp/images/arrow.gif") no-repeat 100% 0;
padding: 0 20px 0 0;
}
</style>
</HEAD>
<BODY >
<h6><A HREF="toc.htm">QL-HOME</A>| <A HREF="index.htm" TARGET="_parent">TOC</A>
</h6>
<HR />
<h5>TEST PAGE</h5>
<UL>
<LI><A HREF="#TOC_1">Title1</A></LI>
<LI><A HREF="#TOC_2">Title2</A> </LI>
</UL>
<HR />
<H1><A NAME="TOC_1" id="TOC_1"></A>Title1</H1>
<ul>
<li><a href="http://www.yahoo.com">Yahoo.com</a> </li>
<li><a href="http://quicklinks">Quicklinks</a></li>
<li><a href="http://quicklinks-qa">Quicklinks-QA</a></li>
<li></li>
<li><a href="http://www.google.com">Google</a> </li>
</ul>
<H1><A NAME="TOC_2" id="TOC_2"></A>Title2</H1>
<ul>
<li> send an email to <a href="mailto:retailstoresupport@yahoo.com">guesswho@yahoo.com </a><br />
</li>
</ul>
<p>External links should have title saying you are leaving </p>
<p>Quicklink, anchors, and internal links should <strong>NOT </strong>have an external icon</p>
<p>Email addresses should have and envelope icon</p>
<HR />
<!-- #BeginLibraryItem "/Library/last_modified.lbi" --><!-- #BeginLibraryItem "/Library/last_modified.lbi" -->
<div align="center" class="lastModDate">
<script type="text/javascript" language="JavaScript">
<!--
function getCorrectedYear(year) {
year = year - 0;
if (year < 70) return (2000 + year);
if (year < 1900) return (1900 + year);
return year;
}
var intro = "last modified: ";
var lmod = new Date(document.lastModified);
var monthname;
var lmonth = lmod.getMonth();
if (lmonth == 0) monthname = "Jan";
if (lmonth == 1) monthname = "Feb";
if (lmonth == 2) monthname = "Mar";
if (lmonth == 3) monthname = "Apr";
if (lmonth == 4) monthname = "May";
if (lmonth == 5) monthname = "Jun";
if (lmonth == 6) monthname = "Jul";
if (lmonth == 7) monthname = "Aug";
if (lmonth == 8) monthname = "Sep";
if (lmonth == 9) monthname = "Oct";
if (lmonth == 10) monthname = "Nov";
if (lmonth == 11) monthname = "Dec";
var yearstr = getCorrectedYear(lmod.getYear());
var outstr = intro + monthname + " " + lmod.getDate() + ", " + yearstr;
document.write(outstr);
// -->
</script>
</div><!-- #EndLibraryItem --><!-- #EndLibraryItem -->
</BODY>
</HTML>
Just run that page in your browser while online and you will see that the code is working. You must have the wrong path to the image or the image isn’t where you think it is.
So I copied your complete code and saved it as a new file and it works fine, however when I copy your code for the extlinks into my document it doesnt work.
I have compared my code to your code in examdiffpro and it matches exactly, but yet my code document doesn’t work with links to my graphics.
So I created a new simplier test page. it works fine with the same code and my links.
So when your code and my code are exactly the same, why does mine not work?
it is also added You are leaving to the mail link