faint border on transparent background, but only when used in Dreamweaver

Thank you Ben, osgood, and Jon!

     Ben, your suggestion of using the <div> tag instead of the <img> tag did the trick! I had started out calling for <img src="#"> but then realized that this would cause a problem because the image file used for the logo changes depending on the size of the device. I neglected to properly change the entire structure of this code. But, now I know that the <img> tag automatically puts a gray border around an image!

osgood, thank you for noticing my faulty use of 'alt' instead of 'title' in my links - all fixed now.

And Jon, thank you for reminding me about code validation. When I did that it found some other faulty code relative to my favicon - all cleaned up now. The only thing I couldn't fix per the validation warnings was the use of pipe , "|" , between fonts called to from Google Fonts. That is the code provided/suggested by Google, and it seems to work. Any idea if there is another format that would work in this situations that would not cause validation issues?

Thanks everyone!

Tracy

You could try testing it by creating a css general rule that applies to all image borders or all linked image borders.

a img {

     border: none;

}

img {

     border: none;

}

Thank you Nancy and Fritz - sorry for the late response, I didn't see that you'd commented. I'm working on getting my host connection to work and then I will link this request to the site so that you can better see what I'm talking about.

I looked through my css and there doesn't appear to be any code that should be applying a border to this. If there was css that was more global it would be applying the border to the social media icons I'm using, and it is not.

Also, I found that the border shows up in Chrome and Safari, but when I view it on Firefox there is no border.

While we are waiting for my host connection to work, does this give you any more clues to what could be going on?

If it's not there in Photoshop or InDesign, it's likely being put on the image, or possibly the image's container by the css code of your page.

Look for a border setting in your css, something like...

border:2px solid gray;

If you have Firefox or Chrome, right click the image in the browser and choose Inspect Element, that will show you what css is affecting the image or container and which file it's coming from.

Can you upload your work to a remote web space you control (your web site) and post the URL?  The border could be coming from a parent HTML element.  We can't tell much from your screenshot.

Nancy