Help needed with attribute selectors

[monique]

Hi there,

I am building a new website, see http://fo3.cemius.nl/dev_degroeneher...laatste-nieuws.

On this website I would like external links to have an icon (arrow) right of the link so people can easily see this concerns an external link.

To achieve this I used following code in my CSS using an attribute selector:

div.alinea a:hover[href^="http:"] {
	color				: #e36b0e;
	font-weight			: bold;
	text-decoration			: underline;
	padding-right			: 18px;
	background-image		: url(../images/external.gif);
	background-repeat		: no-repeat;
	background-position		: center right;
}

This works well (in all (main) browsers), however also for an image which has a link to an external website the icon is shown. Which I don't want!!

You can see this on the page I have given you the link above. The images are links to external blogs.

So far I have found two possible solutions to exclude images from the above code, which are:

div.alinea a:contains(img) {
	background-image		: none;
}

and

div.alinea $("a:has(img)") {
	background-image		: none;
}

Funny enough they both seem to work in IE7 and IE8, but not in other important browser like FF, Opera, Safari, Google Chrome...

Does anyone know another way to exclude images getting the icon too???

Of course a way which works in all browsers?

Thanks a lot in advance!!

Monique

[jscheuer1]

My suggestion would be to not do it like that.

Rather give one class name to links that you want treated a certain way, and give another class name to links you want treated in another way. You can have as many different kinds as you like.

I would however note that, as far as I know, this:

div.alinea $("a:has(img)") {
	background-image		: none;
}

isn't a valid css selector. It might be in CSS 3, but I'm pretty sure it's not in CSS 2 (still the current standard, though various browsers are incorporating more and more of CSS 3 as they go along their respective update paths). More than that though, it looks like a jQuery selector. Are you using jQuery or another javascript library for this, or is this CSS 3, or what exactly?

[monique]

Thanks for your reply John!

I also understood this is jQuery. Someone gave me this possible solution for my problem, but like I said, it only solves the issue in IE, not other browsers.

I have no real experience with jQuery (yet), so I just followed the instructions...

Using classes would be rather easy and when building a static website I know what to do. But unfortunately the CMS I am working with doesn't allow me to give a class to a link. I have asked the programmers to incorporate this in their next release, but I am not sure they can/will do that and if yes, when it will be done.

In the meantime I was looking for a solution which I could work with without being dependend on them. And like I said, I've come far, but 'not yet all the way'.

[jscheuer1]

You don't have jQuery on that page, but you do have Prototype. It too uses $, but that's only for javascript, it has nothing to do with stylesheets. It can affect style, but must do so via javascript.

Now, these:

div.alinea a:contains(img) {
	background-image		: none;
}

div.alinea $("a:has(img)") {
	background-image		: none;
}

do nothing in any browser. They're invalid and ignored. The fact that IE 8 doesn't show the box with the arrow is because in that browser it's behind the image. IE 9 and Firefox both show the box with the arrow. If you remove those two rules, IE 8 will still not show the box with arrow for those links.

Since you cannot use normal css methods (class is blocked you say, and there is no selector that determines if an element has a descendant), you can use Prototype. Put this script on the page:

<script type="text/javascript">
document.observe("dom:loaded", function() {
	// remove background image from links with image tags
	$$('div.alinea a').each(function(s){
		if(s.down('img')){
			s.setStyle({backgroundImage: 'none'});
		}
	});
});
</script>

or put its highlighted code in an external script and associate it with the page via an external script tag.

That only works if the user has javascript enabled, but most do, and having that little box with an arrow for those few that don't have javascript is really no big deal.

It's fairly certain that by making the links display block and setting their background position to top left, that the image will cover the box with an arrow for all browser as it currently does in IE 8, but that would probably cause layout problems elsewhere for the external links without images.

BTW - I looked at the page in IE 7 mode too, no box with arrow, but the layout gets really messed up.

Also - I don't see any external links without images, why not get rid of that rule altogether? You don't seem to be using it, at least not on that page.

Edit: If you want it to layout just like IE 8, add display block:

s.setStyle({backgroundImage: 'none', display: 'block'});

Notes: IE 7 will still be messed up, this has nothing to do with the other problems in that browser, which are a separate issue. IE 7 already had this part 'right'. Also, doing this will not mess up IE 8.

[monique]

This is good news!! I put your code in an external js file and it works!! In all browsers it now looks the same.

I tried the

display:block;

, but like you said, the pages were messed up.

Although I do my main work on FF, I am checking (still) on IE8, IE7 and all other main browsers. I don't dare to upgrade to IE9 yet, because than I 'loose' one pc with an older IE browser. I got very interested to know how you 'look in IE7 / IE8 mode'. Is there a certain programm you use for that? I know there are several options to run a sort of combined IE version on one pc, but they seem to be not that stable...

The external links are in different variations on different pages, like ie. http://fo3.cemius.nl/dev_degroeneher...meren-algemeen, which uses just normal links (without image).

May I ask you one more question?

On http://fo3.cemius.nl/dev_degroeneher...uws/in-de-pers you will see various pdf files to be downloaded. There the arrow icon is shown too. Knowing your solution not to show the icon in combination with an image, I am sure there must be a way to exclude pdf files too!?

Can you let me know please?

[jscheuer1]

document.observe("dom:loaded", function() {
	// remove background image from links with image tags or to PDF files
	PDFre = /\.pdf/i;
	$$('div.alinea a').each(function(s){
		if(s.down('img') || PDFre.test(s.href)){
			s.setStyle({backgroundImage: 'none'});
		}
	});
});

Added Later:

I forgot to mention about testing. I use IE 9. Both it and IE 8 have a developer tool (F12). It allows you to test in various modes. It's not perfect. But for layout it's usually very good. I also have a virtual machine where I run IE 8 and standalone versions of 6 and 7. These come in handy for subtle script differences. The developer testing modes for IE 9 and 8 sometimes use the more modern script engine when they shouldn't. But the standalones have a few quirks, like treating select elements as pop ups and blocking them without letting you approve them. For stuff like that, sometimes IE Tester comes in handy.

[monique]

This is wonderful John, thanks a lot!!

I will look into your suggestions on various IE versions straight away.

What I always find so frustrating is the fact that I test in IE7 on XP and than someone I sometimes work with and who has IE7 on Vista says that I still have mistakes in my layout...

It was nice meeting you again here!

I will close this thread now... hmm, forgot how to do that