Exceptions to http

16 replies [Last post]

Mon, 2011-07-18 19:52

phipm1

Offline

newbie

Last seen: 10 years 29 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?

Tags:

Beginners CSS Questions

Mon, 2011-07-18 22:22

Tony

Offline

Moderator

Brisbane

Last seen: 4 days 22 hours 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.

Mon, 2011-07-18 22:25

Verschwindende

Offline

Guru

Last seen: 4 days 6 hours ago

Timezone: GMT-5

Joined: 2009-10-09

Posts: 2057

Points: 2289

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.

Tue, 2011-07-19 00:45

Tony

Offline

Moderator

Brisbane

Last seen: 4 days 22 hours 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
phipm1 you may be able to use:

a[href*="ql"]

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

Tue, 2011-07-19 11:35

Verschwindende

Offline

Guru

Last seen: 4 days 6 hours ago

Timezone: GMT-5

Joined: 2009-10-09

Posts: 2057

Points: 2289

Tony wrote: Thanks for

Tony wrote:

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

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

Tue, 2011-07-19 13:54

phipm1

Offline

newbie

Last seen: 10 years 29 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?

Tue, 2011-07-19 14:13

gary.turner

Offline

Moderator

Dallas

Last seen: 1 year 48 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.

Tue, 2011-07-19 17:50

phipm1

Offline

newbie

Last seen: 10 years 29 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: " "; }

Tue, 2011-07-19 14:51

gary.turner

Offline

Moderator

Dallas

Last seen: 1 year 48 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.

Tue, 2011-07-19 17:10

phipm1

Offline

newbie

Last seen: 10 years 29 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.

Tue, 2011-07-19 20:46

#10

Verschwindende

Offline

Guru

Last seen: 4 days 6 hours ago

Timezone: GMT-5

Joined: 2009-10-09

Posts: 2057

Points: 2289

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: " ";
}

Wed, 2011-07-20 00:31

#11

gary.turner

Offline

Moderator

Dallas

Last seen: 1 year 48 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.

Wed, 2011-07-20 16:42

#12

phipm1

Offline

newbie

Last seen: 10 years 29 weeks ago

Timezone: GMT-6

Joined: 2011-07-18

Posts: 9

Points: 12

thx for your help

Tue, 2011-08-09 19:56

#13

phipm1

Offline

newbie

Last seen: 10 years 29 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

Title1

Title2

send an email to [email protected]

Tue, 2011-08-09 19:57

#14

gary.turner

Offline

Moderator

Dallas

Last seen: 1 year 48 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.

Wed, 2011-08-10 17:58

#15

phipm1

Offline

newbie

Last seen: 10 years 29 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);

Wed, 2011-08-10 11:37

#16

thepineapplehead

Offline

Moderator

Last seen: 40 weeks 5 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

Hi phipm1, After what you

Tony wrote: ... as long as

Thanks for pointing that out

Tony wrote: Thanks for

Thanks so much for your

Show us the exact code you're

I created an example

Wrong symbol

Thx for your reply Gary. It

You should validate

Good catch, V. The missing

thx for your help

I have validated all my code,

Please read the sticky posts

I have validated all my code,

Please read the stickies

User login

Navigation