SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Member
    Join Date
    Mar 2011
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Image problems IE8

    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. #2
    SitePoint Guru
    Join Date
    Jun 2009
    Posts
    815
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    you don't specify height for the images.. I would start there....

  3. #3
    SitePoint Member
    Join Date
    Mar 2011
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I tried that, doesn't do anything

  4. #4
    Non-Member
    Join Date
    Jun 2010
    Location
    4727′35″N 2618′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    No DTD on your document. That makes IE go in quirks mode. Add this at the top of your html:

    Code:
    <!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:

    Code:
    <img width="250" height="1" src="http://www.sitepoint.com/forums/images/image2.jpg"/>
    where red means wrong ; ),

    even though your mark up is missing height value:

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

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

  5. #5
    SitePoint Guru
    Join Date
    Jun 2009
    Posts
    815
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    once I put in image-heights, it works fine for me in IE8, IE7 and IE6...

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

  6. #6
    SitePoint Addict AtSea webdesign's Avatar
    Join Date
    May 2010
    Location
    Newark, Delaware
    Posts
    283
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    not sure if it matters or not. (Haven't tested) but you should have a space before your closing />

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

  7. #7
    SitePoint Guru
    Join Date
    Jun 2009
    Posts
    815
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by AtSea webdesign View Post
    not sure if it matters or not. (Haven't tested) but you should have a space before your closing />

    Code:
    <img src="http://www.sitepoint.com/forums/images/image1.jpg" height="" width="250" />
    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!!!! ;-) which obviously is moot by now...

  8. #8
    Non-Member
    Join Date
    Jun 2010
    Location
    4727′35″N 2618′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by AtSea webdesign View Post
    not sure if it matters or not. (Haven't tested) but you should have a space before your closing />

    Code:
    <img src="http://www.sitepoint.com/forums/images/image1.jpg" height="" width="250" />
    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. #9
    SitePoint Member
    Join Date
    Mar 2011
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  10. #10
    Non-Member
    Join Date
    Jun 2010
    Location
    4727′35″N 2618′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •