What is causing this?

[DebiR]

On my website I used a nice contrasting color for the borders on images that are links. I don't see them anymore. Is it IE11, a new java update, or something else. Can anyone please tell me if there's some setting I need to change? I want them back!

I'm just a novice as far as most tech stuff goes (can't even figure out how to use most of the new slideshows, etc.) and I don't understand how or why the html is completely overridden.

DebiR

[ajfmrf]

Please post a link to the page on your site that contains the problematic script so we can check it out.

Otherwise your question is extremely vague

[DebiR]

It isn't just one page it's the entire website at http://www.opensalts.us. Here's one direct page link: http://opensalts.us/References/Catalogs/catalogs-USA.html. Each image should have a light blue border indicating it is a link. They were all there before but now are just gone. I don't know if it's just me that doesn't see them and I need to change some settings on my computer, or if some recent change like IE11 or a Microsoft update or something else made them go away.

This is what I have been using with no recent changes to anything:

<style type="text/css">
<!--
body, td
{
color:#ffffff;
background-color:#000066;
font-family:arial;
font-size:15pt;
font-color:#ffffff
}

a:link{color:#6699ff}
a:visited{color:#ffffff}
-->
</style>

[traq]

Each image should have a light blue border indicating it is a link.
Which I can see, for example, in Chrome and Firefox.


They were all there before but now are just gone. I don't know if it's just me that doesn't see them and I need to change some settings on my computer, or if some recent change like IE11 or a Microsoft update or something else made them go away.
Something changed. You mention IE11 - did you upgrade recently?

Have you checked your page in other browsers?


This is what I have been using with no recent changes to anything:
<style type="text/css">
<!--
body, td
{
color:#ffffff;
background-color:#000066;
font-family:arial;
font-size:15pt;
font-color:#ffffff
}

a:link{color:#6699ff}
a:visited{color:#ffffff}
-->
</style>

Actually, it has nothing to do with that code, or that it is a link. What's causing that border is this:

<table cellpadding="20" style="border: 3px solid #0000ff">
I don't see any reason IE11 wouldn't be respecting this. I don't have a copy to investigate, though.

[DebiR]

I know the royal blue (#0000ff) table border is there. I see that too. What I don't see is the border that goes around my image links (#6699ff) which is a light blue color. Each of the images on that page is a link but the colored border is not there.

There were Microsoft updates about the same time I upgraded to IE11 and I don't know exactly when the link borders disappeared but it has to be something like that because I have not changed my website pages. If all you see is the royal blue table border and not a light blue border around just the picture using a different browser then I'm guessing that IE11 isn't the problem, but whatever it is, it is common between our computers. What about Java updates? There is one of those every other month.

[jscheuer1]

In the past, IE erroneously applied boarders to linked images unless their border width was set to 0. With IE 11 this is no longer the case. If you want a border around an image now, even if it's linked, it must be explicitly specified. You can add this to the style section:


a img {border: 2px solid #6699ff;}
a:visited img {border: 2px solid #ffffff;}

[DebiR]

Thank you SOOOOOOOOOOOO much! This looks like an easy fix. I knew there had to be some explanation why they just disappeared. I see you are using img instead of link. As soon as I can get into my space I will try it both ways because I also use the same color for underlined text links and I don't want to lose those either.

[DebiR]

http://opensalts.us/References/Catalogs/catalogs-Belgium.html

Apparently not so easy after all. This is the page I tried it on and it's just weird. I tried "img" instead of "link" but that doesn't work at all. Not that "link" works very well either. And for a clicked link it shows up purple instead of white. You can view the source to see what I put in.

Could it be conflicting with the fact I use a 0 border spec on all the flags at the bottom? Simple stuff like this drives me nuts!

[jscheuer1]

Works fine for me if I do it like I have it in my previous post. If you want to use the pseudo class link, then this is how it needs to be*:


a:link img {border: 3px solid #6699ff;}
a:visited img {border: 3px solid #ffffff;}

Demo:

http://home.comcast.net/~jscheuer1/side/demos/tidbits/imgborder.htm

It will interfere with (override) the attribute border="0" on a linked image. To prevent a border on a linked image you will now have to set it in style. I used a class for the table that contains them (the flags. etc. at the bottom) in the above demo. Use your browser's "View Source" to see how. Any questions, just ask.

Alternatively, you can add a class for just those images requiring borders:

http://home.comcast.net/~jscheuer1/side/demos/tidbits/imgborder2.htm


*you can do it on the a tag alone if you make it display block, but that's more complicated, and could mess up the rest of the layout.

[DebiR]

I am going to go with your first solution since I'd rather not have to alter every single one of the many images throughout the website. I also have some pages where regular images are intermingled with image links so having a border around the non-links would be confusing. That is why I felt using "link" instead of "img" would be better.

I did consider trying to use Expando for the images a few year back but many are larger than screen size and most need to stay that way. Besides, I don't understand how to download those .js files and upload them to my server (Speedfox). That's true of most of the scripts on Dynamic Drive. It got too complicated for my limited tech brain. You should have an instructional page for people like me.

Thank you for your assistance on this. I'll have to tackle my scripts problem another time. Lots of website maintenance to do now.

[DebiR]

Apparently my last post didn't make it....
http://opensalts.us/References/Catalogs/catalogs-Belgium.html
Here's the update I used. I am assuming that a img is used instead of a: img because it's referring to the a href image. I thought it was originally a typo that the colon was omitted. My fault.

Since the last two tables require the class of no borders, I removed the border="0" from each individual image link. I hope that's right...it seems to work. But I will not change my other pages until I hear it's correct. I thought it was redundant and I don't like the excess if there's no reason for it.

A couple years ago I thought about using the Dynamic Drive Expando script for the images but many images are larger than screen size and they need to stay that way for the detail. There are now .js files that need to be downloaded by me. I can follow the instructions to save these files but it doesn't say what to do with them after that. I surely don't know. Has DD ever considered adding an instruction page for novices like me? There are many places on my website I could use Expando but I don't know how.

[jscheuer1]

I think you're right that expando would not be a good fit for this even if it was easy for you to install. As you say, the images are too big for that. In fact, I cannot think of a single script that would be better than what you are doing now linking to the larger images. They're just too large to be handled well any other way.

To answer your other question, about the border="0" attribute, once you are using style to set the border, the attribute is no longer needed, and style will always override the attribute if the attribute is still there and is different than the style. So, yes, you can remove border="0" as long as you have the border (border-width) set to 0 (or whatever you actually want it to be) in style.

[DebiR]

Thank you John. Without your help I don't know if I would have ever found out what happened and how to fix it. Well, I'm off to begin the tedious process of changing all my pages because IE11 is making me!!

[jscheuer1]

If you have a lot of similar pages, you can set the styles in an external stylesheet and link it to all of your pages. That way future style changes can be made for all of those pages from a single stylesheet.