Blue border on image - but it is not a link!

HTML & CSS
1

I have this image that is displaying a blue border in IE8. A couple of interesting things:

  • The image is not a link
  • When I check the page in my computer (I use XAMPP) it doesn’t show the blue border

This is the HTML


<div class="image">
<img src="logons.jpg" alt="Nutricion Solar" border="0" />
</div>

This is the CSS


.image {
	margin-top: 100px;
	margin-bottom: 100px;
	}
	
img {
	border: none;
	display: block;
	margin-left: auto;
	margin-right: auto;
	}

Any clues on what’s going on? Maybe something with the server?

Thanks for any guidance.

2

Hi,

Are you sure the border is on the image and not on a parent?

Use an important rule for testing.

e.g.


html body img {border:0 none!important }

If the border is still showing then double check with:


html body img {border:1px solid red!important }

The easiest solution is to use Firebug in Firefox and simply highlight the element to find where the border is being applied from.

If you still can’t find it we’d need to see a working demo for testing.

3

The image is not a link

Never mattered if it was. Browsers default blue borders on all images, whether they’re in a link or not.

I have this image that is displaying a blue border in IE8.

When I check the page in my computer (I use XAMPP) it doesn’t show the blue border

Do you mean, when you see the border, you are viewing locally? I’m confused what the difference is between these instances.

4

@Paul O’B:
Thanks for the tips! I used !important and detected the issue as being inherited…I also used Firebug - great add-on!

@Stomme poes:
Thanks for your input as well. I was referring that when I saw the page locally (in my PC) I couldn’t see the blue border, but when I uploaded to the server (www) it showed the blue border.

The error was fixed anyway. Thanks to both of you.

5