Image in HTML doesn't show

[Tewhano]

I am having an odd problem with one of the web designs I downloaded. I wanted to use the upper section of the page and just replace it with my own images. One image is defined in the style.css file and the other is in the index.html file:

Style.css

 
#head {
           position: absolute;
           top: 0px;
           left: 400px;
           width: 370px;
           height: 256px;
           background: url(images/header.jpg) no-repeat;
}

Index.html

<h1><img src="images/logo.jpg" width="401" height="271" alt="Logo" /></h1>

My problem is that the image referenced by the HTML code doesn’t show. I don’t get the red ‘X’ but instead get a tiny icon representing an image file and the ‘ALT’ text shows. The files I downloaded were the Party Time design.

I tried copying the index.html file and not altering it and the image doesn’t show. It shows with the original image file just not mine. To determine if there was a problem with the image file I created a bare bones HTML file with just the <img> tag and it shows. As soon as I add the CSS file it stops showing even though the image defined in that file does show.

Anybody come across this before and know what is causing it?

[ishkey]

I downloaded the template and it works just fine, can not reporduce your problem.
It's possible the problem is on your pc. I would leave the directory you have been working on alone and download the zip file again to a new location. Unzip it into a new directory and try again. You could have a bad spot on your hard drive. If that works just delete the old stuff. If it doesn't work then I would say your hard drive and registry needs cleaning up. Have you had this problem with any other templates, then it could be the software you are using. Maybe it's messed up or needs reinstalling.

[Tewhano]

Thanks for the reply. The original files work fine, its when I change the two images header.jpg and logo.jpg that the problem shows up. I'm experimenting with the size of the images to see if that is where the problem lies.

[Tewhano]

Well it doesn't look like the size is the problem. I resized my two images to the same size as the original images and get the same problem. The image defined in the HTML file doesn't show but the one in the CSS file does.

I tried using different formats as well for the image files but nothing seems to work. It just doesn't make any sence that changing the images would screw up the display, after all that is what the templates are suppose to be used for. I'm stumped.

[ishkey]

did you give the images the same name as those listed in the css and html files or you could have changed the name in css and html files to your files names.
here's mine

[Tewhano]

Yes I named my image files logo.jpg and header.jpg just like the original files. Note that it is the logo.jpg file that doesn't show, thats the left image in your example above. The more I fool around with this the more I think it has something to do with my graphic program. If I drop any image file from my collection of web objects (renaming it to logo.jpg of course) into the image folder it works. It doesn't work if I create my own image with CorelDraw 12 and drop that in there. Odd that it only doesn't work for the HTML declaration but works in the CSS file??? I even swapped the two image files (swapped their names) and get the same result.

I'm using IE8. I'm wondering if IE8 doesn't like the Corel format being called from the image tag but is okay with it in the CSS file???

[ishkey]

CorelDraw 12 is not a program for editing either css/ html files. You use a plain txt editor or a html editor.
I'm confused with this lingo.

If I drop any image file from my collection of web objects (renaming it to logo.jpg of course) into the image folder it works. It doesn't work if I create my own image with CorelDraw 12 and drop that in there.

[bmcoll3278]

Try to open the image with something like gimp and then save it as the same filename and type.

[Tewhano]

CorelDraw 12 is not a program for editing either css/ html files.

I use Notepad to edit my text not CorelDraw. It would seem we aren't on the same page. I used CorelDraw to make the images which is what I said above:

...if I create my own image with CorelDraw 12...

Let me see if I can clear up the confusion. I have a collection of web objects; images for backgrounds, logos, bullets and lines, etc. All the cool things you find on the web. When I say 'drop' I mean that I copy an image from my collection and paste it into the 'image' folder in the parent folder where the HTML file resides. So if I take another JPG file (regardless of size or shape) rename it to ‘logo.jpg’ and place that in the 'images' folder then it shows. If I create an image file in Corel and name that ‘logo.jpg’ and place that in the 'images' folder it will not show.

After much experimentation I finally pinpointed the problem to an incompatibility with the JPG format Corel uses and IE8. I opened the file in FireFox and it worked fine. The only difference is that in the CSS file the image is defined as a background and in the HTML file it places the image via an <img> tag. Why that makes a difference in displaying the images is anybody’s guess. I only know that in IE8 it doesn’t work.

I only downloaded this template because I thought it would save time in making a new web page I'm working on and I liked the design of the template. I've been using Corel for years and it’s been a love/hate relationship. I know its problems and rather just work around them rather than use another program and have to relearn how to work around its drawbacks. So I'll just use the template as a visual aid and build a web page from scratch.

I appreciate your time and effort to help me resolve this problem. Thank you.

[Tewhano]

Try to open the image with something like gimp…

Here is some more Microsoft black magic. I had a colleague create an image from my raw image (the image I am using is cropped from a screen capture) who cropped it, sized it and then saved it as a JPG file. I used that and it worked. I sent her the image file I created and she did nothing to it but save it from PhotoPaint and it didn’t work. So creating the file in another application works but using ‘export’ doesn’t. I’m guessing an ‘export’ doesn’t change the header in the file or something. At any rate it is one of those Twilight Zone moments…queue the theme song.

Thanks for your suggestion.