IE7 and Mobile Safari is displaying the website in a weird way

I have some problems with my client’s website in IE7, iPad/Mobile Safari 4.0.4 and iPhone 4.4.1/Mobile Safari 4.0.5. The problems are as of the following:

  • #mainWrapper appears down the screen
  • #bgWrapper doesn’t appear on the screen

iPad/Mobile Safari 4.0.4

  • #footer appears up the screen
  • #bgWrapper doesn’t appear on the screen
  • #pageWrapper appears on only a part of the screen, and not fully down the screen

iPhone 4.4.1/Mobile Safari 4.0.5

  • #bgWrapper doesn’t appear on the screen

Here is the IE7 screenshot:
Here is the iPad screenshot:
Here is the iPhone screenshot:

Here is the actual website:

Please help me with this. I have a deadline to meet, which Monday Australia time. Thanks in advance.

I only have an iPhone simulator, but I also notice the your main menu is partly hidden by the cover image on the right.

One thing worth trying is add this to your style sheet:

body {-webkit-text-size-adjust: none;}

and add this code in the head of your documents:

<meta name="viewport" content="width=device-width, initial-scale=1" />

That won’t fix all your problems, but may help a bit on the iPhone, all the same.

Thanks, I have just placed all of that code in the web page. So what about the rest of the problems?

Someone please help me with the rest of the problems, this needs to go live by Monday morning (Australian time).

I can’t help with everything here, but one problem you have is that the main background iamge (which I think you had on the body originally) has a fixed width, of course, but your main wrapper (which needs to sit over the top of it) has a % width, so that width will be different on different viewports, meaning that on some screens th bg image won’t be seen at all. If you want that bg image as is, you need to put it back on the body and give the wrapper a fixed width that matches the bg image.

Thanks, I have adjusted the percentage to pixels in the #bgWrapper. I did take the background image back to the body, but it didn’t work out for me, so I just changed the percentage to pixels instead.

It’s looking OK on the iPhone simulator to me, but how is t looking on a real iPhone now?

I have been testing the iPhone through, and it looks all right now. It is just iPad and IE7 which needs to be fixed now.


The IE7 problem can be fixed like this:

Move the latest edition into #mainwrapper because #mainwrapper clears the floats due to haslayout and that’s why you have a gap.

e.g. do this:

				<div id="mainWrapper">
						<div class="latestEdition"><img alt="Summer 2011 edition is out now" height="454" src="" width="323" /></div>
						<div id="colLeft">

Next don’t use position:relative to move things because it doesn’t actually move anything and will leave holes on the page that you can’t fill. Position:relative only moves things visually but they still occupy the same space in the flow that they always did hence the holes that appear in the page.

Use margin-top instead and then all the element in that column get moved and not just the one single element.

.latestEdition {
	float: right;
	width: 323px;
	position: relative;
[B]	/*top: -290px;*/
	left: -11px;
#colRight {
	float: right;
	width: 350px;
	position: relative;
[B]	/*	top: -220px;*/[/B]
	left: -2px;

Tried, tested and working in IE7 :slight_smile:

It already looks ok on my ipad2 and on the ipad emulator.

Wonderful, thanks, now the web page can go live on Monday morning Australian time. Once again thanks for everyone help on this, it is very much appreciate.