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.
4 answers
solution1
1 2010-02-01 14:34:52
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)
solution2
0 2010-02-01 14:28:04
HTML or XHTML? Don't think that a self-closing img-tag is valid in HTML.
EDIT: You are also missing the alt-attribute.
solution3
0 ACCPTED 2010-02-01 15:39:30
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=""
solution4
0 2015-05-08 13:42:47
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
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.