SitePoint Sponsor

User Tag List

Results 1 to 16 of 16
  1. #1
    SitePoint Guru Todd Temple's Avatar
    Join Date
    Mar 2005
    Location
    Tennessee
    Posts
    797
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Background Doesn't Appear On Certain Browsers

    Here is the page...

    LINK-
    http://www.securehostserver.info/anderson/

    The background appears in the Mac versions of Safari, IE 6,7 and 8, Firefox, Chrome, Camino, Opera but the problem appears when I use Adobe Browser Lab to view the site in Firefox 3.0 and also on the iPhone. The same page when viewed on the iPhone does not have the backgrounds and it also does not center within the viewport. It appears locked to the left.

    Can someone take a look and tell me what is going on and what I can do to fix it? Thank you in advance!

    Todd
    Todd Temple > T2 Design

  2. #2
    SitePoint Addict svcghost's Avatar
    Join Date
    Oct 2010
    Posts
    288
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    To which image(s) are you referring? Please provide a link or links to the images that are not appearing, so we can compare them as they are used in your CSS. For example.. this image? or this image? both?

  3. #3
    SitePoint Guru Todd Temple's Avatar
    Join Date
    Mar 2005
    Location
    Tennessee
    Posts
    797
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by svcghost View Post
    To which image(s) are you referring? Please provide a link or links to the images that are not appearing, so we can compare them as they are used in your CSS. For example.. this image? or this image? both?
    It appears to be every background image. Here is the snapshot from my iPhone.

    http://securehostserver.info/anderson/i/photo.PNG
    Todd Temple > T2 Design

  4. #4
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,888
    Mentioned
    122 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by Todd Temple View Post
    http://www.securehostserver.info/anderson/

    The background appears in the Mac versions of Safari, IE 6,7 and 8, Firefox, Chrome, Camino, Opera but the problem appears when I use Adobe Browser Lab to view the site in Firefox 3.0 and also on the iPhone. The same page when viewed on the iPhone does not have the backgrounds and it also does not center within the viewport. It appears locked to the left.
    What's going on with this on the h1?
    Code:
    background: url(../i/gfx_logo.png) no-repeat 0 0; _bac\kground: url(../i/gfx_logo.gif) no-repeat 0 0;
    Jigsaw doesn't like it, and my guess is that some browsers may also be having a strop about it.

  5. #5
    SitePoint Guru Todd Temple's Avatar
    Join Date
    Mar 2005
    Location
    Tennessee
    Posts
    797
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The H1 uses a transparent PNG for replacing the logo and in IE6 the PNG did not show up at all. So I found an article here (http://www.ejeliot.com/blog/63) that showed how to add a CSS rule that would target IE6 browsers only. So that is the weird property... it is supposed to use the GIF to replace the logo.

    I am guessing that I should use a separate stylesheet just for IE6?
    Todd Temple > T2 Design

  6. #6
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,888
    Mentioned
    122 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by Todd Temple View Post
    The H1 uses a transparent PNG for replacing the logo and in IE6 the PNG did not show up at all. So I found an article here (http://www.ejeliot.com/blog/63) that showed how to add a CSS rule that would target IE6 browsers only. So that is the weird property... it is supposed to use the GIF to replace the logo.

    I am guessing that I should use a separate stylesheet just for IE6?
    If you need to use CSS hacks to target IE6 then yes, you should put those hacks into a separate stylesheet and use conditional comments to ensure that only IE6 sees it. That way, you're less likely to get into trouble with the hacks causing problems for other browsers. You don't need to replicate the whole stylesheet for IE6, only the bits that are different.

  7. #7
    SitePoint Guru Todd Temple's Avatar
    Join Date
    Mar 2005
    Location
    Tennessee
    Posts
    797
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Could I use the same stylesheet and just add a selector for that one rule? Something like this?


    USING THIS FOR IE6 ONLY-
    * html h1 { text-indent: -9999px; display: block; height: 71px; width: 267px; margin: 22px 0 0 93px; background: url(../i/gfx_logo.gif) no-repeat 0 0; }



    USING THIS FOR ALL OTHER BROWSERS-
    h1 { text-indent: -9999px; display: block; height: 71px; width: 267px; margin: 22px 0 0 93px; background: url(../i/gfx_logo.png) no-repeat 0 0; }
    Todd Temple > T2 Design

  8. #8
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,888
    Mentioned
    122 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by Todd Temple View Post
    Could I use the same stylesheet and just add a selector for that one rule? Something like this?

    USING THIS FOR IE6 ONLY-
    * html h1 { text-indent: -9999px; display: block; height: 71px; width: 267px; margin: 22px 0 0 93px; background: url(../i/gfx_logo.gif) no-repeat 0 0; }

    USING THIS FOR ALL OTHER BROWSERS-
    h1 { text-indent: -9999px; display: block; height: 71px; width: 267px; margin: 22px 0 0 93px; background: url(../i/gfx_logo.png) no-repeat 0 0; }
    Yes, that should work as well. * html is considered a 'safe' hack, and shouldn't break anything else, whereas the split word you'd used before is not a 'safe' method.

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by Todd Temple View Post
    It appears to be every background image. Here is the snapshot from my iPhone.

    http://securehostserver.info/anderson/i/photo.PNG

    What images are missing on that screenshot? I keep looking but can't spot anything missing. Or am I being thick again?

  10. #10
    SitePoint Guru Todd Temple's Avatar
    Join Date
    Mar 2005
    Location
    Tennessee
    Posts
    797
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    What images are missing on that screenshot?
    Here are the background images that repeat-x and do not appear... I have them circled in red.

    http://www.securehostserver.info/anderson/i/missing.jpg
    Todd Temple > T2 Design

  11. #11
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Ok, I see The background images are actually showing they are just not going to 100% width.

    I don't know if this will make a difference but try setting a min-width on those 100% wide elements that match the largest element in your page.

    e.g.

    Code:
    #header-container,#slider-container,
    #footer-container,#scroll-container,
    #main-container,#nav-container {min-width:1100px;margin:auto}
    Worth a try

  12. #12
    SitePoint Guru Todd Temple's Avatar
    Join Date
    Mar 2005
    Location
    Tennessee
    Posts
    797
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    I don't know if this will make a difference but try setting a min-width on those 100% wide elements that match the largest element in your page.
    Works now. I wonder why it was doing that? I haven't had that problem before. Of course, I seem to run into a CSS stumbling block daily and that is nothing new... Also, it seems that you are the one that has the best fixes! Thanks again!
    Todd Temple > T2 Design

  13. #13
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by Todd Temple View Post
    Works now. I wonder why it was doing that?
    The iphone scales layouts based on a 960px width I believe and as the minimum width of your page was 1100+ then you get the same effect as shrinking your browsers window to 960px and then scrolling to the right. In your previous set up you would notice that the 100% background all stop short when you scrolled right because 100% wide is only viewport wide and not the the part that needs to be scrolled to.

    Adding the min-widths to the 100% elements ensure the background is always as wide as the widest element that will ever be scrolled to. This seems to fix the display in the iphone also.

    Also, it seems that you are the one that has the best fixes! Thanks again!
    A lucky guess I suppose
    (Mind you the more I practice the luckier I get )

  14. #14
    SitePoint Guru Todd Temple's Avatar
    Join Date
    Mar 2005
    Location
    Tennessee
    Posts
    797
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Adding the min-widths to the 100% elements ensure the background is always as wide as the widest element that will ever be scrolled to. This seems to fix the display in the iphone also.
    Paul,

    I have modified the page per the clients request and now when I add the min-width to the appropriate DIVs I am getting the same problem on the iPhone and now in Firefox 3. Can you take one more look please? I would appreciate your help!

    LINK-
    Home Anderson Media Corporation


    Todd
    Todd Temple > T2 Design

  15. #15
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi Todd,

    It looks like you increased the width of #main so now its 1190px in total width so you need to adjust the min-widths to match.

    Code:
    #header-container, #logos-container, #banner-container, #nav-container, #slideshow-container, #main-container {
      margin: auto;
      min-width: 1190px;
    }

  16. #16
    SitePoint Guru Todd Temple's Avatar
    Join Date
    Mar 2005
    Location
    Tennessee
    Posts
    797
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    It looks like you increased the width of #main so now its 1190px in total width so you need to adjust the min-widths to match.
    Hmmmm, I obviously cannot add correctly. I saw the container that was exceeding the 1100 pixel target width and was able to correct it. Thanks again and sorry to bother you with these silly mistakes...
    Todd Temple > T2 Design


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
  •