Image problems IE8

HTML & CSS
1

I’m having problems with my images displaying in IE8, they work fine in Firefox and Chrome. I’m stumped at what could be the problem. Here is the link that I just stuck online.

http://alyssaschaad.com/lifestyles/index.html

This is my image tag for the image that is supposed to display on the top
<img src=“images/imageHead.jpg” width=“1024” height=“” />

I should also have images along the right side of the page

<div id=“rightContainer”>
<div class=“images”>
<img src=“images/image1.jpg” height=“” width=“250”/>
</div>
<div class=“images”>
<img src=“images/image2.jpg” height=“” width=“250”/>
</div>
<div class=“images”>
<img src=“images/image3.jpg” height=“” width=“250”/>
</div>
</div> <!-- end right container–>

–Just added px to the numbers, thought that might work but it didn’t

Any ideas?

2

you don’t specify height for the images… I would start there…

3

I tried that, doesn’t do anything

4

No DTD on your document. That makes IE go in quirks mode. Add this at the top of your html:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

and make sure these are always the first lines in your html.

Also, you have this as IE interpreted code:


<img width="250" [COLOR="Red"]height="1"[/COLOR] src="http://www.sitepoint.com/forums/images/image2.jpg"/>

where red means wrong ; ),

even though your mark up is missing height value:


<img src="images/image1.jpg" [COLOR="Red"]height=""[/COLOR] width="250"/>

As maya said, put proper width AND height values on your images, or don’t put any at all.

5

once I put in image-heights, it works fine for me in IE8, IE7 and IE6…

http://mayacove.com/misc/ls/

6

not sure if it matters or not. (Haven’t tested) but you should have a space before your closing />


<img src="images/image1.jpg" height="" width="250" />
7

actually my understanding is that that space is not necessary, it’s still done purely by convention (and I think it does make for slightly cleaner code…) that space was needed for Netscape 4 support!!! :wink: which obviously is moot by now…

8

Yes, it should, but no, it doesn’t matter. It’s not relevant to the issue.

What maya first said is what the OP should do to solve the problem: either use proper values for both width and height or completely forget about mentioning any of them.

Care to know why is that space used, or this is another technical matter you don’t care about? ; ) I mean, you don’t just say “you should have a space before your closing />” and not offer a reason other than a “probably, maybe”.

9

Sooo… I did put the doctype in before I posted the tread. Didn’t re upload the site. That slightly helped. It fixed like the centering of the page and stuff. Images still don’t appear… I don’t get why its working for some people but not for me. I tried putting numbers in both height and width, that didn’t work. Took the numbers out. That didn’t work. Tried the spacing at the end of the tag (which I don’t think matters) but that didn’t work. Any other suggestions?

Update:
Ok nevermind. I just commented stuff out and it works. I completely took out the height and width code and it works. Thanks so much. I’m still learning :slight_smile:

10

I’m sorry, but you seem to be keen on not listening.

  1. In your online mark up you still haven’t updated the height values. Put them there and let them there. As a rule, you should always specify dimensions (both of them) for replaced elements (like images) to avoid elements jumping all over the page when they get replaced, and to speed up the rendering.

  2. Empty your cache: F12, click on Developer Toolbar, CTRL+R, and then try again: Click on page, Refresh (F5). I believe this is what makes you believe it’s not working when you try after completing height values. You old web page is displayed from cache rather then from the updated version.

  3. It will work for you too, like it’s working for the rest of us.