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

[tlsherwood]

I created a logo for my client in Illustrator and 'exported for screens' with a transparent background. I've tried doing this creating a PNG file and also with an SVG file.

The problem I have is that when I use either of these files in Dreamweaver the image ends up having a faint gray outline, like the border of the artboard from Illustrator. This appears both in 'Live view' on my computer, but also when I preview it on my iPad or iPhone. If I 'place' this same image into InDesign the border does not appear. If I open it in Photoshop, the border does not appear.

I've read suggestions about eliminating the border in Photoshop, but since it does not appear there, doesn't seem to apply to this situation. I've also read that I should make sure that my Illustrator artboard is not aligned on partial pixels - did that, didn't help.

Here is a screenshot of what I'm seeing. The issue is the gray border that touches the logo.

Any suggestions about how I can either avoid this to begin with, or eliminate it afterward?

Thank you in advance.

[Nancy OShea]

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

[tlsherwood]

Hi Nancy,

Finally able to upload the site. Here is a link: Vern Vincent Consulting

As I mentioned to Jon and osgood below, the border on the logo image appears in Chrome and Safari, but NOT in Firefox. Hmmm...

If you can offer any suggestions, I'd appreciate it greatly!

Tracy

[BenPleysier · Accepted solution]

Change

<header>

  <img class="logo">

</header>

to

<header>

  <div class="logo"></div>

</header>

The reason is that Chrome and a few other browsers normally place a grey border around an image if it can't find the image

[osgood_]

That's not 'valid' html mark-up - the img tag needs a src="yourImage.svg" alt=""> to tell the browser where to find the image. I think DW should have flagged that as an error or warning, whatever it does.

<img class="logo">

<img src="yourImage.svg" class="logo">

HOWEVER you are using a background image not an inline image so follow Bens answer.

You have also inserted alt="" in your <a></a> tags which is not allowed.

<li><a class="linkedin" href="https://www.linkedin.com/in/vernon-lee-vincent-31024195/" alt="link to Verns's LinkedIn page" target="_blank"> </a></li>

<li><a class="twitter" href="https://twitter.com/VernVincent"

       alt="link to Vern's Twitter page" target="_blank"> </a></li>

<li><a class="email" href="mailto:xxxx@xxxxxxxxxxxx.xxx" alt="email Vern"> </a></li>

Change them to 'title' as below:

<li><a class="linkedin" href="https://www.linkedin.com/in/vernon-lee-vincent-31024195/" title="link to Verns's LinkedIn page" target="_blank"> </a></li>

<li><a class="twitter" href="https://twitter.com/VernVincent"

       title="link to Vern's Twitter page" target="_blank"> </a></li>

<li><a class="email" href="mailto:xxxx@xxxxxxxxxxxx.xxx" title="email Vern"> </a></li>

[Jon Fritz]

Aside from the above mentioned issues, you can see all of your html errors by running the validator, either through DW at File > Validate > Validate Current Document (W3C) or by going to http://validator.w3.org/nu

HTML errors are one of the main causes of display issues between various browsers/versions/platforms. Cleaning up any code problems should always be the first step when "it does XX in browser A but YY in browser B " comes up.

[Jon Fritz]

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.

[tlsherwood]

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?

[osgood_]

When you say the border does not appear in Photoshop have you zoomed right in close to the image?

[tlsherwood]

Hi osgood,

I can't say that I have, but it clearly doesn't appear when 'placed' in InDesign, and when the site is viewed in Firefox the border is also not present. The border DOES appear when viewed on Chrome and Safari though.

If you want to take a look, here is a link to the site: Vern Vincent Consulting http://vernvincent.com/

Thanks for anything you can suggest,

Tracy

[Jon Fritz]

Seeing the page in question really is going to be the only way to be sure, but I had a couple questions...

Is the image also a link?

If so, is the border there all the time, or does it show up after clicking the image?

[tlsherwood]

Hi John,

The image is the logo and not a link.  Just got the site uploaded finally. If you can, check it out on Firefox (no border) and either Chrome or Safari (border).

Vern Vincent Consulting

Thanks again,

Tracy

[happie_97]

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;

}

[tlsherwood]

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

[Jon Fritz]

You can replace each pipe character with %7C.

The link should look like...

https://fonts.googleapis.com/css?family=Open+Sans%7COpen+Sans+Condensed:300, 400, 700%7CPlayfair+Display%7CPlayfair+Display+SC: 400, 700

...and both go to the fonts and validate.

[Jon Fritz]

You'll also want to turn the spaces into %20 within the link to get them to validate.