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?
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.
Tony wrote: ... as long as
... as long as the "//" don't interferer with the selection.
It's not supposed to but it does.
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
Tony wrote: Thanks for
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.
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?
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
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: " "; }
Wrong symbol
This a[href^="google"]{
should be a[href*="google"]{
. Note the asterisk in place of the caret.
cheers,
gary
Thx for your reply Gary. It
Thx for your reply Gary.
It still does not work.
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: " "; }
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
thx for your help
thx for your help
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
TEST PAGE
- send an email to [email protected]
Please read the sticky posts
Please read the sticky posts regarding how to post.
cheers,
gary/mod
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);
Please read the stickies
Please read the stickies regarding DOCTYPEs.