#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2012
    Posts
    26
    Rep Power
    0

    Container background not showing in the iPhone 5 and other mobile devices


    The parchment container background (wrap) on this site is not showing up on the iPhone 5, Skyfire Android and possibly other devices.

    debbierking.com/hobbitnews

    I am hoping someone can help me out here....this is my first attempt at responsive design. Here's my code:

    #wrap {
    background: url(../img/wrap-bg.jpg) repeat;
    padding-top: 25px;
    }


    #wrap:after {
    content: ".";
    visibility: hidden;
    display: block;
    height: 0;
    clear: both;
    }
  2. #2
  3. For POny!
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2012
    Location
    Amsterdam
    Posts
    416
    Rep Power
    115
    add
    Code:
    #wrap{overflow:hidden}
    see how that goes. Just make sure you don't declarate any height or width to #wrap or it will be cut off
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2012
    Posts
    26
    Rep Power
    0
    Aeternus,

    I can't...using overflow:hidden crops off the date ribbons on the left. That's why I used the pseudo element :after instead.
  6. #4
  7. For POny!
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2012
    Location
    Amsterdam
    Posts
    416
    Rep Power
    115
    Instead of that, add an extra element to your container just before the bottom.
    oldschool. (instead of pseudo stuf some browsers prolly don't understand)

    Code:
       <div class="clear"></div>
    </div> <!-- closing tag #wrap -->
    
    
    div.clear{height:0;clear:both;}
    Let me know if it works for you.

    P.s. Keep in mind browser caching when tweaking. add a $_GET variable to the stylesheet just in case.
    stylesheet.css?v=123
    Last edited by aeternus; September 24th, 2012 at 12:29 PM.
  8. #5
  9. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2012
    Posts
    26
    Rep Power
    0
    I just tried this and the clear class attached to the wrap container in the .php file completely eliminates all the content and background between the header and footer. Did I not do this right?
  10. #6
  11. For POny!
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2012
    Location
    Amsterdam
    Posts
    416
    Rep Power
    115
    Originally Posted by DesignLady94
    I just tried this and the clear class attached to the wrap container in the .php file completely eliminates all the content and background between the header and footer. Did I not do this right?
    I don't see it on your page, but I am certain you made an error when that happens.

    I will clarify it a bit more. If your wrapper div has no dimensions (like a set width or height) it normally fits its size to the inner elements. Unless these elements, mainly the last one is floated. To deal with this problem you can either use overflow:hidden or a clear div (and for modern browsers pseudo stuff). To demonstrate this clear div:

    Code:
    <div id="wrapper">
                <div class="floated"></div>
                <div class="floated"></div>
                <div class="floated"></div>
                <div class="clearfix"></div><!-- added to give the wrapper layout -->
            </div>
    So in other words right before the closing tag you place this clearfix div to compensate for floated things.

    Easy test btw to see if you wrapper has layout, is to give it a pink color and see if that shows up on the iphones If it does show up but the image not, something is wrong with your image.
    In old IE browsers (ie5/6) a problem could be that you didnt used a space between the ) and repeat attribute like so:
    Code:
    url(../images/bla.gif)repeat-x;
     instead of
    url(../images/bla.gif) repeat-x;
    Also it might help if you add these guys ' '
    Code:
    url('../images/bla.gif') repeat-x;
    Last edited by aeternus; September 24th, 2012 at 03:09 PM.
  12. #7
  13. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2012
    Posts
    26
    Rep Power
    0
    Aeternus, you are *the best*! Thanks so much...so far everything is working okay. I just downloaded iOS 6 to my phone and it seems to be working okay there. Just to make sure, I'll check with my friend who just got the iPhone 5 ...it wasn't working on his the other day. Thanks so much for your helpful explanations.
  14. #8
  15. For POny!
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2012
    Location
    Amsterdam
    Posts
    416
    Rep Power
    115
    Originally Posted by DesignLady94
    Aeternus, you are *the best*! Thanks so much...so far everything is working okay. I just downloaded iOS 6 to my phone and it seems to be working okay there. Just to make sure, I'll check with my friend who just got the iPhone 5 ...it wasn't working on his the other day. Thanks so much for your helpful explanations.
    No problemo! happy coding!
  16. #9
  17. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2012
    Posts
    26
    Rep Power
    0
    So apparently the background is still not showing up on the iPhone 5, which is iOS6-based. Yet its showing up on my iPhone 3G, which I just updated to iOS6. That doesn't make any sense to me...any ideas?
  18. #10
  19. For POny!
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2012
    Location
    Amsterdam
    Posts
    416
    Rep Power
    115
    Hi i cant realy respond good ( phone) because i ruined my computer. Anyway did you try the pink backgriund tip? And the adding of the getvariable? Hope.i have a new mats soon for a new comp.
  20. #11
  21. For POny!
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2012
    Location
    Amsterdam
    Posts
    416
    Rep Power
    115
    oh can you maybe also try to directly view that image on that device. Sometimes the image is corrupt. Some browsers still show it others dont. So check if ir shows when targeted directtly if not that is the problem. Happend to me 2 times in 12 years
  22. #12
  23. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2012
    Posts
    26
    Rep Power
    0
    Originally Posted by aeternus
    Hi i cant realy respond good ( phone) because i ruined my computer. Anyway did you try the pink backgriund tip? And the adding of the getvariable? Hope.i have a new mats soon for a new comp.
    Where would I add get variable? I'm pretty limited on js skills. Why do I need to do pink..the parchment bg is pretty easy to see.

    Sorry to hear about your computer...thanks for helping.
  24. #13
  25. For POny!
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2012
    Location
    Amsterdam
    Posts
    416
    Rep Power
    115
    Hmm this confuses me. You say you see the parchement... On that iphone? I thought it was not showing up. I use pink jus temporary so i can see on that device that ddevice where the image is not showing wether its the image or the container that screws up.

    The get variable you can add to any link to a resource to force the browser to get a new version. Like so:

    src="css/my-awesome-stylesheet.css?version=5"

    As you can see the link to the resource has a ?version appended that is a get variable with in this case a value of 5

    Did you try to directly check the image? On the device that us not showing it. Sorry for my spellling these touchscreens sucl :-P
    Last edited by aeternus; September 25th, 2012 at 06:45 PM.
  26. #14
  27. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2012
    Posts
    26
    Rep Power
    0
    I don't have an iPhone 5...a friend checked it and he told me it's not showing up.

    Do you have any ideas on the other problem I posted about a couple of hours ago about the font glyphs not showing up?
  28. #15
  29. For POny!
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2012
    Location
    Amsterdam
    Posts
    416
    Rep Power
    115
    Originally Posted by DesignLady94
    I don't have an iPhone 5...a friend checked it and he told me it's not showing up.

    Do you have any ideas on the other problem I posted about a couple of hours ago about the font glyphs not showing up?
    I wanted to check that out but it wiser than i dont respond to new topics because i cant inspect the website (as in source code) . I wouldnt be able to really help with that adequately. Sirry

IMN logo majestic logo threadwatch logo seochat tools logo