SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    Non-Member
    Join Date
    Dec 2006
    Posts
    46
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Exclamation 2 Images not displaying in IE

    I recently published my site and it looks great in Mozilla and Opera but when I try to view it in IE 6 or 7 a couple images are not displaying properly.
    Could someone possibly take a look and let me know how I could possibly correct this.
    A little feedback on the site would be cool too.

    http://www.greggoodwin.com

    Thanks,
    Greg

  2. #2
    SitePoint Addict
    Join Date
    Apr 2007
    Location
    Phoenix, AZ
    Posts
    230
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Site is rendering in quirks mode. Put in a Doctype statement then see how it looks. Different browsers render differently in quirks mode.
    Joe

  3. #3
    SitePoint Addict CaryD's Avatar
    Join Date
    Nov 2006
    Location
    San Diego, CA
    Posts
    389
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I can't see any difference between Firefox and IE6.

    You need to add a doctype and validate your code. It's better to have extraneous content taking up the right side of the page rather than the left. As people view the page with smaller windows, it's the right side that gets cut off.

    If you made the #home div position:relative you could center it on the page and still have all the absolutely positioned elements within the the #home div remain correctly positioned relative to each other regardless of screen width.

    Use something like this:

    Code:
    body { /% instead of applying it to the html %/
         background: url(../images/bg.png) top left no-repeat #1e90ff;
         text-align:center;
    }
    
    #home {
        position:relative;
        margin:0 auto;
        text-align:left;
        width:800px;
        height:600px;
    }
    You'll need to change the positioning of all the absolutely positioned elements within the #home div, but at least they will all probably only need to be changed by the same amount.

    For instance, your #home div is currently set to left:200px. Since you no longer need that you can subtract 200px from the left positioning of all the absolutely positioned elements within the #home div.

  4. #4
    Non-Member
    Join Date
    Dec 2006
    Posts
    46
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks that fixed most of it.
    now my background image is no longer transparent, but I can always manually add the color to the bg.

  5. #5
    Non-Member
    Join Date
    Dec 2006
    Posts
    46
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks Cary I will make these changes and see how it turns out.

  6. #6
    SitePoint Addict CaryD's Avatar
    Join Date
    Nov 2006
    Location
    San Diego, CA
    Posts
    389
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ggoodwin View Post
    thanks that fixed most of it.
    now my background image is no longer transparent, but I can always manually add the color to the bg.
    I didn't realize your background image was a transparent png. If it works better for you when applied to html, then go with that. Keep the text-align:center on the body.

    What character encoding are you using? The meta tag says iso-8859-1 and the page info in Firefox seems to indicate the page is being served as iso-8859-1, but it looks like the page is starting with a pair of byte-order-marks (BOM), aka utf-8 signatures. What editing software are you using?

  7. #7
    SitePoint Addict CaryD's Avatar
    Join Date
    Nov 2006
    Location
    San Diego, CA
    Posts
    389
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You have this at the end of your page. Remove those first 3 characters (if you can see them in your editor). Looks like another BOM.

    HTML Code:
    &#239;&#187;&#191;</div>
    	<div id="contentbottom"></div>
    	<div id="footer"><a href="http://www.blueskies9.com" target="_blank"><img src="images/footer.jpg" width="800" height="32" alt=""></a></div>
    </div>
    </body>
    </html>

  8. #8
    Non-Member
    Join Date
    Dec 2006
    Posts
    46
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Cary I applied your changes and things seem to be looking good.


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
  •