Html – PNG image appears in IE8, disappears in IE7

csshtmlinternet-explorer-7png

I'm attempting to display a logo (PNG created in Paint.NET) on my web page (XHTML 1.0 Transitional), like this:

<body>
  <div class="header">
    <div class="logo">
      <img src="logo.png" />
    </div>
  <!-- etc. -->

.header is styled as follows:

.header {
  background-color: Black;
  color: White;
  margin-left: -3em;
  padding-top: 12px;
  padding-left: 2em;
  padding-bottom: 12px;
  font-size: 1.4em;
}

.header .logo {
  float: right;
}

The logo is white-on-black, with some other colours.

On IE8 (and Google Chrome), the image is displayed correctly. On IE7, the image is not displayed at all. What am I doing wrong?

I don't care about IE6.

Best Answer

If you drag-drop the image directly into IE7 does it display correctly?

If it does, then the issue isn't with the image but it's with your HTML or the CSS.

I don't have IE7 here so can't test directly, but I can recommend a simple approach to troubleshooting:

  • Remove the CSS styles one-by-one until the image renders in all of your target browsers. That should tell you what is causing the issue (hopefully the reason why will then be relatively easy to fathom)
Related Topic