Help with weird rendering of page on iPhone

[PmattF]

I am working on a website http://justcauseit.com. On Mac Safari (and other browsers we have tested) it works fine. But if you open that url in iPhone Safari, there is a very strange rendering glitch where the background banner image at the top of the page shows up twice.

Are there any html experts out there that can tell me what is causing this?

 

[badtzmaru]

how many pixels wide is that image?

 

[PmattF]

how many pixels wide is that image?

1300 pixels, I believe.

 

[badtzmaru]

I don't have an exact answer for you but I believe your issue has something to do with the way safari "resizes" images for display. It was explained at a tech talk I went to but I can't recall the details off the top of my head.

If you check the iphone tech dev site, you might find some answers. Wish I could be of more help.

 

[wareagle1982]

I took a look at your code and I can offer a few suggestions. First, your !DOCTYPE is xhtml 1.0 strict, but your code does not validate to this standard. Before you start trying to troubleshoot any funny issues like this, it is important to know that you are starting with clean, valid code.

Secondly, I took a look at your css. The code for the #header div looks like this:

#header {
background-color: #444;
background-image: url(/sites/default/themes/justcause/images/jc/header-background.jpg);
background-repeat: repeat-y;
background-position: center top;
}


I belive the problem you are having relates to the repeat-y declaration. There is no need for this background image to repeat. Instead, change this to the following code: background-repeat: no-repeat;


I bet this will fix your problem.

Jonathan

 

[PmattF]

I belive the problem you are having relates to the repeat-y declaration. There is no need for this background image to repeat. Instead, change this to the following code: background-repeat: no-repeat;


I bet this will fix your problem.
Jonathan

You are right, this solves the problem. Thanks so much for the help!