CODEWITHSUNDEEP
htmlcssweb
Francesco64
Francesco64

Reputation: 1

Image PNG on Internet Explorer 10?

because a png image that I put in the header of my website on all browsers display correctly on Internet Explorer and 10 displays a square around it? I'm going crazy trying to figure out why. Can anyone help me? The image has no background, is transparent. I attach a screenshot for you to understand the problem better.

enter image description here

The blue part is the logo (which I covered)

Upvotes: 0

Views: 1378

Answers (4)

TheCodeDestroyer
TheCodeDestroyer

Reputation: 762

People say that this is an issue of IE, but its actually not exactly an issue, its just their browsers default CSS rule which in a lot of cases is overridden. Basically if you are making a page that is compatible with a lot of browsers, specially if IE is included in that case its wise to use Reset.css, which reduces the browser inconsistencies and which allows you to specify your own rules from scratch. I know you got your answer, but I would recommend this approach.

Upvotes: 0

CalebC
CalebC

Reputation: 952

It's IE10 issue. Give it a style and remove the border.

<img src="/YourImage.png" style="border-style:none;">

Same issue here

Upvotes: 0

coolprarun
coolprarun

Reputation: 1163

To get rid of the blue border you can use the border attribute for the img element like so:

You need to set the Border to 0 or None:

There are two ways to delete the Border using CSS or Direct way

Direct implementation is

<a href="#"><img src="image path" alt="" border="none"></a>

Using CSS :

<style type="text/css"> a img {border:none;} </style>

HTML

<a href="#"><img src="image path" alt=""></a>

Upvotes: 0

user2645981
user2645981

Reputation:

<a href="http://www.boutell.com/"> <img src="/boutellcomlogo.png" style="border-style: none"/> </a>

An even cleaner solution, if you never want the blue border, is to say so in a style sheet:

img
  {  
    border-style: none;
  }

And then reference that style sheet in the head element of your page:one

or

 img
  {
     border: 0 none;
  }

Upvotes: 1

Related Questions