Can't see image in IE8

HTML & CSS
1

good evening,

I have some simple html code with an <img> tag that is trying to display an image in IE8. I am using an external CSS file. for the jpg I am just using an id with width and height properties set.

I am unable to see the image when I click on the html file. If I go to IE and click File/Open, I can see it. If I remove my line of code that links to my CSS file, I can also see it.

The jpg has been created in Photoshop CS2 and CS4. I also installed Photoshop clean on another machine that also has IE8 and same thing. I tired changing color profiles in PHotoshop to no avail and nothing. Funny thing is that a jpg I created on 11/16/10 does work. Any others don’t.

I can see the file in Firefox, Opera, Chrome, etc.

Is there a bug in IE8 with CSS that I need to know about?

I am about to try IE7 and IE9 to see if same thing happens.

Thanks for any advice.

2

if you post your html and css it will be easier to see exactly what is going on

3

here is the html and css…not too complicated.



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml11/DTD/xhtml11-transitional.dtd">

<html xmlns = "http://www.w3.org/1999/xhtml">
   <head>
      <link rel="stylesheet" type="text/css" href="css/whoah.css">
      <title>Welcome to My Page!</title>
   </head>

   <body>
      
      <img src="images/test.jpg" id="logo" alt="logo" />

      <ul>
         <li><a href="index.html">HOME</a></li>
         <li><a href="about.html">ABOUT US</a></li>
         <li><a href="services.html">SERVICES</a></li>
         <li><a href="faqs.html">FAQ'S</a></li>
         <li><a href="contact.html">CONTACT US</a></li>
         
      </ul>

      <div class="box">
         <h2>Welcome!</h2>
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce facilisis magna sed urna ultrices aliquet. 
            Sed tempor, ante et semper molestie, metus metus ultricies arcu, ornare iaculis tellus justo at dui. Ut 
            tempor commodo elit, fringilla malesuada sapien suscipit et. Vestibulum bibendum dapibus porttitor. Proin 
            condimentum volutpat ultrices. Ut in aliquam ipsum. Donec tempor placerat feugiat. Mauris in elementum mi. 
            Sed lobortis congue est, sed rhoncus justo imperdiet et. Nunc malesuada aliquam lobortis. Morbi sit amet sapien
            ac urna hendrerit varius. Sed luctus cursus enim. Nulla vestibulum lacus quis lectus aliquet scelerisque. Sed 
            vulputate accumsan massa convallis vehicula. Suspendisse eget imperdiet arcu. Pellentesque nisi elit, mollis 
            in aliquam eget, accumsan id diam.  </p>
      </div>
      <br />
      
      <div id="footer">
         Copyright &copy; 2010 
      </div>
     
   </body>
</html>


body { background-color: black;
       font-size: .8em;
       font: verdana, arial, sans-serif; }

#logo { width: 425px;
        height: 150px;
        margin-bottom: 10px; }

ul { margin: 10px 0 100px 0;
     padding: 0;
     list-style: none;
     width: 575px;
     float: right; 
   }

ul a { display: block;
       width: 8em;
       padding: 0.2em;
       line-height: 1.4;
       background-color: black;
       font-family: Verdana, Georgia, arial, sans-serif;
       color: #cccccc;
       text-decoration: none;
       text-align: center; }

ul li { float: left; }

#border2 { border: 1px solid white;}

.box { margin: 0 25px 0 25px;
       width: 780px;
       clear: both; 
       margin-right: auto;
       margin-left: auto;
       background: #FFFD34 url(../images/pod_bottom.gif) no-repeat left bottom; }

.box h2 { background: url(../images/pod_top.gif) no-repeat left top;
          padding: 10px 20px 0 20px; }

.box p { color: black;
         font-size: 1em;
         font-family: verdana, georgia, sans-serif;
         padding: 0 20px 10px 20px; }

#footer { clear: both;
          font-family: biondi, verdana, georgia, sans-serif;
          font-size: 1em;
          color: yellow;
          text-align: center;
        }
4

what image are you referring to? You said

I am just using an id with width and height properties set.
But I can’t figure where you’re talking about. The only rules I see in your css are classes not id’s. Or is it this one: <img src=“images/test.jpg” id=“logo” alt=“logo” />

5

ok, I have some good news :slight_smile: and some bad news :frowning:

The good news is that I copied and pasted your html and css into a file and used my own jpg with

 
<img src="pic1.jpg" id="logo" alt="logo" />

and the page and image displays without problems in my IE8 and FF3.6

that means there is no problem with IE8.

The bad news is that either your path to the jpg is incorrect or there is a physical problem with the jpg.

try changing the path to ./images/test.jpg

6

Since you’re using XHTML you should close that <link> tag properly:


<link rel="stylesheet" type="text/css" href="css/whoah.css" [color="Red"]/[/color]>
7

You’re right that he should close that tag properly, but that’s not the reason the image is not showing! It must be a mistake in the path ore something.

8

correct the id i’m referring to is the <img> tag.

I changed the link to include the / at the end.
Also changed the path to “./images/test.jpg”

neither worked.

weird because initally i thought it was a Photoshop issue. i thought something was wrong wiht the jpeg, but EVERY jpeg I Optimize for Web has the same issue. in either CS2 or CS4. I installed CS2 on a different machine, clean install, same thing. both machines have IE8. everytime i test, I create a new file in Photoshop. I changed my color profiles and all, nothing. However, I have one file that I created on 11/16 and it works fine! I tired comparing that file to the files I’ve been creating today and all the settings are the same as far as size, colors, etc.

i’m going to send my jpg (one of the ones that don’t work)…attached.

9

not a path issue either. my working jpg from 11/16 and any new one that I create or test with are in same directory.

here is the file that actually works. the only one. attached.

10

may I give a small suggestion unrelated to the issue you brought forth?

for semantics purposes and possible SEO impact, you should make your links inside of your unordered navigation list be proper capitalization, so


<ul id="nav">
     <li><a href="index.html">Home</a></li>
     <li><a href="about.html">About Us</a></li>
     <li><a href="services.html">Services</a></li>
     <li><a href="faqs.html">FAQs</a></li>
     <li><a href="contact.html">Contact Us</a></li>
</ul>

Semantically it makes no sense to have them be all uppercase. That’s not how we write proper documents.

If you want to style them to be uppercase, you can always do


ul#nav li a {
   text-transform: uppercase;
}

:slight_smile: proceed!

11

You actually would have got a smaller file size if you had used the PNG format. :wink:

I assume you are using RGB format which it looks like you are doing. Try with the CSS disabled and clear the browser cache, temporary files and history as sometimes with M$IE that can effect things.

12

I’ve tested locally your images in an ad-hoc page. I had no trouble with either images.

Make a simple page, with both test and working images, nothing else. Use img tag with src attribute, and a second pair, using CSS background declaration. If you still have trouble seeing both, in both cases, I assume it’s either a security related issue or it has something to do with decoders on your system.

This, or you have some CC in your code, gone wrong.

13

I will try to use a background image like you are suggesting, that crossed my mind yesterday.

It’s something with my CSS or xhtml. The files that are not working, when I insert them into other xhtml files with <img> tags they work fine. something wrong with this code, that’s preventing it from displaying. just so weird…

I did clean out my temp files and history xhtmlcoder. that was what I did when i first discoverd the issue, when I originally thought it was Photoshop related, which I know now it’s definitely not.

noonnope, i will try the CSS background dec and let you know. material designer thanks for the advise!

14

What html/css dev tool you’re using?

Do you have any CC?

15

what is CC?

sorry, i just woke up lol

update, background image works.
also when i validate my css code it complains that the foreground and background colors are same, but i wouldnt think that should make a difference…

believe it or not, i’m only using notepad.

this is simple and i should be able to place an <img> tag, i know i’m stubborn :slight_smile:

16

CC = Conditional Comment

Well, only a link, a live one, can shed more light on this. You’re right, is simple, and you should be able to place an <img> :slight_smile:

17

no CC. my code is in this thread.

it’s def a combo between the way the files are coming out of Photoshop and CSS. I checked for any inconsistencies with the DTD and it’s fine.

validation passes for both css and xhtml.

reason why i think it’s both is because a jpg i created on 11/16 DOES display. it’s any I create now.

but the weird thing is that on another machine the same thing happens with a clean install of Photoshop. very weird.

18

Take the advice from xhtmlcoder and try your code with a different image format: png.

19

I have an answer and it’s inexplicable. my original xhtml notepad file was corrupt. when I posted the code on here last night, i had created a copy. so for some reason I just went into that file thinking it was an old file I created a few weeks back and it works…wtf???

thanks guys for your help. doesn’t make sense. at least it explains why the problem followed my other machine. i was using the same file of code.