28

Here is the site in question: www.prestigedesigns.com

The problem is that my header and footer won't stretch to their assigned 100% but only on iPhone/iPad.

I've tried what I think is everything and I could really use some help? Is there anyone else that has a similar issue?

Thanks.

Paul D. Waite
  • 96,640
  • 56
  • 199
  • 270
george
  • 291
  • 1
  • 3
  • 4

5 Answers5

71

It's kind of a viewport issue with mobile Safari, but you can get the same effect by shrinking the width of your desktop browser window and scrolling right, you'll see your background starts dropping out.

This is because when you're setting width:100% to your #top and #header divs, you're telling them to resize to the width of the containing element, which in this case is the browser window, (or viewport). You're not telling them to resize to the content within.

Mobile Safari's default viewport width is 980px, so it uses 980px as the width of the containing element for your divs. This is why your layout, which is around 1050px, is getting its background chopped off.

You can fix this for mobile Safari by directly setting its viewport (read Apple's Docs), or by adding min-width:width of your design in pixels; to your body. Mobile Safari will use the min-width's value for setting its viewport, and it'll also keep it from happening in desktop browsers as well.

Walter Cameron
  • 2,383
  • 19
  • 9
36

Set the viewport to adapt your page on any device.

<meta name="viewport" content="width=device-width, initial-scale=1.0" />
Jivings
  • 22,834
  • 6
  • 60
  • 101
helpyou
  • 361
  • 3
  • 2
2

Set min-width:(Width of your design)px; in CSS file and this issue will be solved.

p.s.w.g
  • 146,324
  • 30
  • 291
  • 331
Shalmal Sheth
  • 41
  • 3
0

it's not assigned width: 100% the header is getting width: 1009px; same thing with the footer.

David Nguyen
  • 8,368
  • 2
  • 33
  • 49
  • hey David. how is the header getting 1009px? im confused. cause if thats the case it would render on desktop browsers at that px. but its not. thats what im confused about – george Jul 14 '11 at 15:53
  • looks like I read it wrong, your page doesn't seem to work very well in safari. my guess is the way the head is nested in the header. you are more then likely having a viewport issue with the iphone – David Nguyen Jul 14 '11 at 16:03
  • it looks ok on my safari desktop browser (mac). it may be a viewport issue. its driving me nuts – george Jul 14 '11 at 16:30
0

Just a hunch as I can't actually test it, but the foot element you have within footbar is set to an absolute width in pixels while the footbar is set to % - the same with your header element - try switching these to % too?

allanmayberry88
  • 113
  • 1
  • 12
  • infact, as David says above, the header is not assigned a `width: 100%;` at all – allanmayberry88 Jul 14 '11 at 15:36
  • im confused my css has a containing div #top set to 100% then a containing div #topbox set to hold top elements centered on the page within the 1024px width of the footer/header – george Jul 14 '11 at 15:45
  • #top is being overrided by another style, try !important where the width is 100% – David Nguyen Jul 14 '11 at 15:51
  • I'm just looking at it purely through firebug and it doesn't look as if it is nested properly to catch the 100% that it should be inheriting. I presume that everything within the 'top' div is displaying OK on the ipad/iphone? – allanmayberry88 Jul 14 '11 at 15:57
  • yes it is displaying correctly with the only exception that the background for both the #footbar #header, and #top is not extending to 100% – george Jul 14 '11 at 16:04
  • I suggest you have a go with Firebug (plugin for firefox) and it should become a bit clearer as to what I am trying to explain RE the styles not appearing to be being nested correctly. – allanmayberry88 Jul 14 '11 at 16:09
  • im looking at it in firebug and i still dont get it. i dont think im that dense to not understand why its not correctly nesting... hmmm maybe im just stoopid or just looking at it too much – george Jul 14 '11 at 16:25
  • it's all about learning so dont give up :) When you look at the css for the 'header' style for example, there is no 100% width listed. It is listed within your 'top' div, however your 'header' div isn't within the 'top' div as far as I can make out, and so 'header' won't be inheriting the 100% width atribute as they exist within the same level, as opposed to 'header' being within 'top' - I hope this makes sense? – allanmayberry88 Jul 14 '11 at 16:34
  • Thanks Alan for your input sir. Appreciated. – george Jul 14 '11 at 18:22