16 replies [Last post]
phipm1
phipm1's picture
Offline
newbie
Last seen: 10 years 5 weeks ago
Timezone: GMT-6
Joined: 2011-07-18
Posts: 9
Points: 12

I currently have an external link icon put after each link created.

a[href^="http:"]
 { 
	display:inline-block;
	padding-right:14px;
	background:transparent url(/images/link_icons/extlink.gif) no-repeat 100% 0;
	padding: 0 20px 0 0
	}	
a[href^="http:"] :hover:after { content: " > " attr (title);

However, I need an exception for links starting with http://ql

How do you make an exception?

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 2 weeks 3 days ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5344
Points: 2965

Hi phipm1, After what you

Hi phipm1,
After what you have, put what you need.

/* what you have */
a[href^="http:"]
 { 
	display:inline-block;
	padding-right:14px;
	background:transparent url(/images/link_icons/extlink.gif) no-repeat 100% 0;
	padding: 0 20px 0 0
	}	
a[href^="http:"] :hover:after { content: " > " attr (title);
}
/*what you need */
a[href^="http://ql"]{
  background-image:none;
}
a[href^="http://ql"] :hover:after { content: " "; }

If you put it after it will over write the stuff from before as long as the "//" don't interferer with the selection.

Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 6 days 13 hours ago
Timezone: GMT-4
Joined: 2009-10-09
Posts: 2051
Points: 2283

Tony wrote: ... as long as

Tony wrote:

... as long as the "//" don't interferer with the selection.

It's not supposed to but it does.

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 2 weeks 3 days ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5344
Points: 2965

Thanks for pointing that out

Thanks for pointing that out Verschwindende, I was to lazy to test it Smile
phipm1 you may be able to use:

a[href*="ql"]

http://csscreator.com/content/attribute-selector-contains

Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 6 days 13 hours ago
Timezone: GMT-4
Joined: 2009-10-09
Posts: 2051
Points: 2283

Tony wrote: Thanks for

Tony wrote:

Thanks for pointing that out Verschwindende, I was to lazy to test it Smile

There are many examples online stating that it works but it just doesn't.

phipm1
phipm1's picture
Offline
newbie
Last seen: 10 years 5 weeks ago
Timezone: GMT-6
Joined: 2011-07-18
Posts: 9
Points: 12

Thanks so much for your

Thanks so much for your help

I've tried

a[href*="ql"]

but it still is putting the icon beside the external link that I don't want to have one.

Anymore ideas?

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 24 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Show us the exact code you're

Show us the exact code you're using. My tests show the second selector over-riding the first just fine. You may have some simple typo or minor error that more eyes will find. Use copy/paste so whatever it is won't get unconsciously corrected.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

phipm1
phipm1's picture
Offline
newbie
Last seen: 10 years 5 weeks ago
Timezone: GMT-6
Joined: 2011-07-18
Posts: 9
Points: 12

I created an example

<img src="/files/67556/2011/extlink.gif" width="16" height="9" alt="extlink.gif" />

/* CSS Code */

a[href^="http:"]
{
display:inline-block;
padding-right:14px;
background:transparent url(="/files/67556/2011/extlink.gif) no-repeat 100% 0;
padding: 0 20px 0 0
}

a[href^="http:"] :hover:after { content: " > " attr (title);

a[href*="google"]{
background-image:none;
}
a[href*="google"] :hover:after { content: " "; }

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 24 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Wrong symbol

This a[href^="google"]{ should be a[href*="google"]{. Note the asterisk in place of the caret.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

phipm1
phipm1's picture
Offline
newbie
Last seen: 10 years 5 weeks ago
Timezone: GMT-6
Joined: 2011-07-18
Posts: 9
Points: 12

Thx for your reply Gary. It

Thx for your reply Gary.

It still does not work.

Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 6 days 13 hours ago
Timezone: GMT-4
Joined: 2009-10-09
Posts: 2051
Points: 2283

You should validate

You should validate. You have some mismatched quotes and braces.

It seems the issue comes from the order of the cascade.

Try this:

a[href^="http:"] {
	display: inline-block;
	padding-right: 14px;
	background: transparent url(/extlink.gif) no-repeat 100% 0;
	padding: 0 20px 0 0;
}
 
 
a[href*="google"] {
	background-image: none;
}
a[href^="http:"]:hover:after {
	content: " > " attr(title);
}
a[href*="google"]:hover:after {
	content: " ";
}

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 24 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Good catch, V. The missing

Good catch, V. The missing quote in the url is enough to wreak havoc on all following rule sets.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

phipm1
phipm1's picture
Offline
newbie
Last seen: 10 years 5 weeks ago
Timezone: GMT-6
Joined: 2011-07-18
Posts: 9
Points: 12

thx for your help

thx for your help

phipm1
phipm1's picture
Offline
newbie
Last seen: 10 years 5 weeks ago
Timezone: GMT-6
Joined: 2011-07-18
Posts: 9
Points: 12

I have validated all my code,

I have validated all my code, but yet it still keep putting the external link beside everything and the external link title are not showing up either.
//
// JavaScript Document
//external link title
function extlinkTitle() {
var mat=[];
var anc=document.getElementsByTagName('a');
for(c=0;c

TESTPAGE

QL-HOME | TOC

TEST PAGE

Title1

Title2

 

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 24 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Please read the sticky posts

Please read the sticky posts regarding how to post.

cheers,

gary/mod

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

phipm1
phipm1's picture
Offline
newbie
Last seen: 10 years 5 weeks ago
Timezone: GMT-6
Joined: 2011-07-18
Posts: 9
Points: 12

I have validated all my code,

I have validated all my code, but yet it still keep putting the external link beside everything and the external link title are not showing up either.

<!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>
<link href="testpsi.css" rel="stylesheet" type="text/css" />
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-1252">
<script type="text/javascript" src="extlinkTitle.js"> </script>
 
<TITLE>TESTPAGE</TITLE>
<META NAME="subject" CONTENT="Order Processing">
</HEAD>
<BODY >
<h6><A HREF="http://homedepot.com" TARGET="_top">QL-HOME</A> | <A HREF="http://lowes.com" TARGET="body">TOC</A>
</h6>
<HR>
<h5>TEST PAGE</h5>
<UL>
  <LI><A HREF="#TOC_7">Title1</A></LI>
  <LI><A HREF="#TOC_4">Title2</A> </LI>
</UL>
<HR>
<H1><A NAME="TOC_7"></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></li>
</ul>
  <H1><A NAME="TOC_4"></A>Title2</H1>
<ul>
  <li> send an email to <a href="mailto:[email protected]">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 == <img src="https://csscreator.com/sites/all/modules/smileys/packs/Roving/innocent.png" title="Innocent" alt="Innocent" class="smiley-content" /> 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 == <img src="https://csscreator.com/sites/all/modules/smileys/packs/Roving/cool.png" title="Cool" alt="Cool" class="smiley-content" /> 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>
 
//CSS
@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 **********/
 
 
/***********************************************/
/*****mailto icon******/
 
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;
	}
 
a {
	display:inline-block;
	padding-right:14px;
	background:transparent url('C:/QuicklinksSynchronized/images/link_icons/extlink.gif') no-repeat 100% 0;
padding: 0 20px 0 0
}
/*removes external link icon from attributes http://quicklinks,anchors*/
a[href*="quicklinks"]
{
background-image:none;
}
a[href*="quicklinks"] :hover:after {
	 content: " ";
}
a[name*="anchor"]
{
background-image:none;
}
a[name*="anchor"] :hover:after {
	 content: " ";
}
//// JavaScript Document
//external link title
function extlinkTitle() {
   var mat=[];
   var anc=document.getElementsByTagName('a');
for(c=0;c<anc.length;c++){
   mat[c]=anc[c].href.match(/quicklinks*/g);
if(mat[c]==null){
   anc[c].title='you are leaving';
   }
  }
 }
   window.addEventListener?
   window.addEventListener('load',extlinkTitle,false):
   window.attachEvent('onload',extlinkTitle);

thepineapplehead
thepineapplehead's picture
Offline
Moderator
Last seen: 16 weeks 2 days ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9683
Points: 819

Please read the stickies

Please read the stickies regarding DOCTYPEs.

Verschwindende wrote:
  • CSS doesn't make pies