New Member - 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;
}

add

see how that goes. Just make sure you don't declarate any height or width to #wrap or it will be cut off

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.

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)



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

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:



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:

Also it might help if you add these guys ' '

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!

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?

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.

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

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.

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

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