PNG image appears in IE8, disappears in IE7

Question

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.

It appears to be the `float: right` that messes it up; if I remove that, then the image appears. Alternatively, if I remove the `background-color`, then the image appears. — Roger Lipscombe, Feb 01 '10 at 15:34

score 1 · Answer 1 · answered Feb 01 '10 at 14:34

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)

score 0 · Answer 2 · answered Feb 01 '10 at 14:28

0

HTML or XHTML? Don't think that a self-closing img-tag is valid in HTML.

EDIT: You are also missing the alt-attribute.

answered Feb 01 '10 at 14:28

dalle

18,057
5
57
81

It's a logo; it has no vision-impaired equivalent. Do I still need an alt-attribute? – Roger Lipscombe Feb 01 '10 at 15:27

score 0 · Accepted Answer · answered Feb 01 '10 at 15:39

0

If it is the float:right that messes it up perheps you should try to clear your floats. Try setting overflow:hidden; on .header class, or apply clear:both on the element that follows it in the markup.

Also the img tag always requires the alt attribute - you can however leave it blank - alt=""

answered Feb 01 '10 at 15:39

easwee

15,757
24
60
83

By setting th attribute overflow:hidden; on the container div you somehow remid it that it is wrapping the element inside it and it somehow clear itself. I believe it is considered as a CSS bug but works in all browsers. You can also clear it with :auto or :scroll properties and sometimes you will need to set width too (100% usually does it). Just watch out, to not use this to clear a div containing dropdown menus, or with ay other situations where content is offset out of the container, since it will cut it at the edge. – easwee Feb 01 '10 at 16:47

score 0 · Answer 4 · edited May 23 '17 at 10:24

I have this problem in an MVC.NET application using an IMG tag with a src=data string.

At the end of the day, I don't care what's causing it, since it's 1 image out of 60000 (and only in IE)

function showPicture() {
        if ($('#picture').css("display") == "none") {
            $('#picture').css("display", "");
            clearInterval(interval);
        }
    }

    var ua = window.navigator.userAgent;
    var msie = ua.indexOf("MSIE ");
    if (msie > 0 || !!navigator.userAgent.match(/Trident.*rv\:11\./))
        interval = setInterval(showPicture, 500);

While I think it's strange that only certain records cause the Display:None attribute to be applied inline, I'm comfortable with sharing this, since the CSS Display:None is not coming from my code.

At any rate, theoretically, you can check to see if it's IE before running this code using the snippet from check for IE browser

PNG image appears in IE8, disappears in IE7

4 Answers4