SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Enthusiast
    Join Date
    Jun 2010
    Posts
    90
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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:
    IE7
    • #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: http://imageshack.us/photo/my-images/18/ie7winxp.png/.
    Here is the iPad screenshot: http://imageshack.us/photo/my-images...safari404.png/.
    Here is the iPhone screenshot: http://imageshack.us/photo/my-images...esafari40.png/.

    Here is the actual website: http://blueguminteractive.biz/neclmag/.

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

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,319
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    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:

    Code:
    body {-webkit-text-size-adjust: none;}
    and add this code in the head of your documents:

    Code:
    <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.

  3. #3
    SitePoint Enthusiast
    Join Date
    Jun 2010
    Posts
    90
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks, I have just placed all of that code in the web page. So what about the rest of the problems?

  4. #4
    SitePoint Enthusiast
    Join Date
    Jun 2010
    Posts
    90
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Someone please help me with the rest of the problems, this needs to go live by Monday morning (Australian time).

  5. #5
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,319
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    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.

  6. #6
    SitePoint Enthusiast
    Join Date
    Jun 2010
    Posts
    90
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  7. #7
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,319
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    It's looking OK on the iPhone simulator to me, but how is t looking on a real iPhone now?

  8. #8
    SitePoint Enthusiast
    Join Date
    Jun 2010
    Posts
    90
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I have been testing the iPhone through crossbrowsertesting.com, and it looks all right now. It is just iPad and IE7 which needs to be fixed now.

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,535
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    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:
    Code:
    				<div id="mainWrapper">
    						<div class="latestEdition"><img alt="Summer 2011 edition is out now" height="454" src="http://blueguminteractive.biz/neclmag/images/latest-edition.jpg" width="323" /></div>
    						<div id="colLeft">
    								<blockquote>

    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.

    Code:
    .latestEdition {
    	float: right;
    	width: 323px;
    	position: relative;
    	/*top: -290px;*/
    	margin-top:-290px;
    	left: -11px;
    }
    #colRight {
    	float: right;
    	width: 350px;
    	position: relative;
    	/*	top: -220px;*/
    	left: -2px;
    }
    Tried, tested and working in IE7

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

  10. #10
    SitePoint Enthusiast
    Join Date
    Jun 2010
    Posts
    90
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •