Right Hand Space – iOS Safari Bug

[bzmillerboy]

In iOS Safari my site has some blank space on the right hand side. If you look at my screen shot you’ll notice the blue header (div id=”header”) does not span to the edge of the screen. Here is the CSS for that div.

#header {background: url("images/header-bg.jpg") no-repeat scroll center top #055188;border-bottom:1px solid #FFFFFF;}

Screen Shot

Here is the site URL: http://cheatsheetsmarketing.com/

[mwdewitt]

It is not just Safari. It does it in Firefox as well. And in Firefox, there is also space on the right side of your content. I notice you are just using a single non-repeating image as your header background. Why not create a 1 pixel image that is 200 pixels tall and repeat it along the x-axis. That way it will span the full length of your site. And to handle the gradients on the header, just make *.png images of them and position them within a div tag. This way, it would take up less memory and it will load faster. I do not know what to do about the content though.

[bzmillerboy]

@mwdewitt – I do see this issue in Windows Firefox, however it doesn’t exist in OS X Firefox. I am using the single image on the div id header because it has circular uneven gradients which span about 100px wider than the main content width. The header is also set to a background color of #055188 so there is a blue background across the entire width of the browser window no matter how wide of a screen.

@wolfcry911 – thank you, setting the min-width has seemed to help it to match the width of the main content div however it still does not span the full width of the browser window. I want the blue header to span 100% of the browser window, no matter how wide. See the screen shot from my iMac in Firefox.

I’d think if my header div doesn’t have a width set and is not contained in any other div’s with set width’s it should span 100%…?

Thanks for the help!

[brotsky]

Check out the video I made for how to fix the problem on iOS devices. Hope this helps!

http://www.youtube.com/watch?v=P0yCo6g0goA&feature=youtu.be

http://www.brotskydesigns.com

[Senff]

Right now, on my iOS devices, the site has a grey bar on the right side. This is because the device zooms out to show as much width as possible.
Since the contents of your footer take up 1350 pixels wide, Safari iOS zooms out so that what you see, represents 1350 pixels.

I think changing the min-width of 1020 to 1024 may solve some issues too. Not sure.

[Author]

Posts