a:visited problems with pics 2

[Zych]

Hello Everybody,

I am going crazy trying to do just a simple thing. I have a picture that is hyperlinked with an anchor. I do not want the color of the borders to change to purple when the link is "visited". Therefor I have tried this:

In the linked css:

a.4:visited {
     color: 0C0BE5;
	}

In the actual page:

<td width="49"><div align="center"><a CLASS="a.4" href="index.php"><img src="images/Home.jpg" width="30" height="30"></a></div></td>

I have tried to change it to white, etc. but nothing seems to change. Does the visited work different with pictures? I am new to CSS but from different sites I have gone to this seems to be the answer. Here is one site I went to:

http://css.nu/faq/anchors.html

Thanks,

Zych

 

[Vragabond]

Many things wrong with what you showed us:
1. The border appears around the image, not aroun the anchor albeit your code might work (if all else was correct) due to default css behaviour. Still, it is not good to rely on default behaviour.

2. Your class is "4" and applies only to <a> elements. This is what your css syntax says. Your html is looking for a class of name "a.4" and cannot find it. I don't think you can use dots in class names.

3. Classes must begin with alpha character, thus a class by the name "4" (like your code) is invalid and should be ignored.

The solution I would go for would be:

a:visited img {
  border-color: 0C0BE5;
}

<a href="index.php"><img src="images/Home.jpg" width="30" height="30"></a>

 

[CliveC]

<img src="images/Home.jpg" style="border:0px" ...

Clive

http://tubularity.com

http://PalliativeCareConsulting.org

http://port-lucaya.com

 

[Zych]

Thanks,

The border:0px fixed the problem. I am still a little confused on why the color property does not affect this but I guess I can work through it.

Thanks,

Zych

 

[Vragabond]

Sometimes reading posts helps understand things. Other times it is just a waste of somebody's time. I can see examples of both above.

 

[Zych]

Hey Vragabond,

I guess the part that confuses me most is how the color specification for the anchor works. I am not sure why you need to specify border-color. I would think that the visited property would change the color for all colors it would change being it text or border around an image.

I do know that a.1, a.2, and a.3 work, so I would imagine that a.4 would also. I see that you specified not only visited but img and border-color. I guess I need to study up more on this.

In this case removing the whole border was the easiest to do.

Thanks again for your help,

Zych

 

[Vragabond]

http://gallery.theopalgroup.com/selectoracle/

Check this link to see what your css means. I am getting [tt]Syntax error at `.4' at or near line[/tt]. Who knows, maybe the website is on something. Let's try to alter things a bit and switch the '4' to a4 to read a.a4. Explanation is:

Selects any a element with a class attribute that contains the word a4 and whose target has been visited.

So, if a.4 would be valid, you would need to have a class attribute with the value "4", however, what you have is "a.4". Since programming (even low key html programming) should be an exact science a.4 will very seldom equal 4. Maybe in IE, but we shouldn't delve into this right now. Further on W3C states that classes beginning with a numeric value are illegal and all classes should begin with an alpha character. Any decent browser should therefore choke on the code you provided. Let's continue.

Your request in your first post was:

I do not want the color of the borders to change to purple when the link is "visited".

I read here that you do not want the color of the border to change to purple, not remove the border in its entirety. As such, I gave you the solution you were looking for. Were you to say that your goal is to remove the border I would only change it to:

a img {
  border: none;
}

That is, if you want to do this for all the link images on the page. Moving on...?

I see that you specified not only visited but img and border-color. I guess I need to study up more on this.

I suppose you can go and study this but you can also believe what I have told you so far. Img is there because the border is around the image. Makes sense, doesn't it? And border-color is there because you're changing border-color. Oh my, that sure was puzzling.

Treading through your error-ridden code I also skipped one error. [tt]color: 0C0BE5;[/tt] will left browser confused and will either make it render the color black, make up closest color from that or simply ignore it. Maybe your browser was ignoring it. You need to specify '#' before all color values in HTML/CSS: [tt]color: #0C0BE5;[/tt].

Like I said, your code should probably work. Specifications state that unless border color is specified, the color of the text is used. Provided you're not setting border-color anywhere else in the code, your code should work (provided all the other errors were fixed), however I think it is sometimes risky to rely on default behaviour of browsers according to the standards. Especially when you can be so much more thorough so easily. That is why I suggested the solution. I hope it makes sense to you now.

I still think you should do some research on CSS in general so that you won't think a.1, a.2 and a.3 are working and imagine that a.4 should work.

 

[Zych]

Thanks for the links. It looks like a lot of coders need to read this. Since I bought this as a template (I am better at this than designing graphics. LOL), I am not planning at this time in fixing it. I am also using osCommerce. Lucky for me this looks correct. So I will only have to change the main section.

I actually did have the # in the begining but took it out to match what the template had in it. (Guess they have more than one mistake in it.)

I suppose you can go and study this but you can also believe what I have told you so far. Img is there because the border is around the image. Makes sense, doesn't it? And border-color is there because you're changing border-color. Oh my, that sure was puzzling.

The reason why I would like to study more on this is that I would like to understand why it works this way. If I took what everybody said as gospel and never learned the reasons why, then what have I learned?

The reason I am having some problems grasping this is that it does not make sense to me. To explain this further I probably do not understand the "visited" reference. I would think that you should only specify color to have this work for all things, not just text.

In other words if I said give all cars the color black, I would think all cars would be black. I don't care if the car is a ford or chevy. (I am comparing this to visited, since all links clicked through or "visited" changes the text or borders to purple.)

But now it seems to say well that does not include VW's. (In other words graphics.) I understand that graphics have borders and text does not, but they all behave the same way by changing to the color purple (by default in I.E.) when "visited". It would make more sense to me if the color attribute when applied to visited would affect all objects that it would turn purple, not just text.

The only reason I can see for this is if you wanted graphics and text to behave differently. But in this case you can just use class selectors instead. This way you can have one text act different than another. I would think this would be the better way in the long run but then again you are more of an expert in this than I am.

When I get some more time I will go back and fix the class selector as a numeral in the future to verify that this will be cross browser compatable. Thank you letting me know about this. It will at least help me keep my own code clean while I am learning more about CSS.

- Zych

 

[Vragabond]

In other words if I said give all cars the color black, I would think all cars would be black. I don't care if the car is a ford or chevy. (I am comparing this to visited, since all links clicked through or "visited" changes the text or borders to purple.)

Like I said, your logic holds, however there is no code to support it. Have you tried fixing all the errors in the code and going with your initial solution? I just did that and here are the results:

FireFox/Mozilla: acts just like you would expect -- according to your logic;
IE6 (with or without doctype): fails to adhere to the standards;
Opera: does not wrap the picture link in a border.

As you can see, default behaviour is different across different browsers. Let's switch up your analogy a little bit. Say you make a car that can go 200 km/h. Now presume users of the car obey speed limits. Your car will go 200 km/h in Germany, 130 km/h in Austria and 65 mph (=~105 km/h) in Maryland, USA. However, if you make a car with a top speed of 100 km/h, you can expect it to go 100 km/h in all three places. I have told you twice that your logic is correct. The code should work according to what standards specify. It is different venues that makes your code to behave differently. That is why it is best to be more strict than to assume all the different browsers will adhere to the strictly implied rules of W3C.