www.webdeveloper.com
Results 1 to 7 of 7

Thread: iPad web page display problem

  1. #1
    Join Date
    Mar 2004
    Location
    Nevada, USA
    Posts
    210

    iPad web page display problem

    I have a problem with a single page which does not display properly on an iPad, yet all the other pages on the same website display correctly.

    This page: http://www.lawrencecreativephotograp...ut/index.shtml

    Is shrunk down on the iPad screen because, I believe, there appears to be a black element on the right side of the page which is the same height as the page and about 1/3 of the width of the original page.

    This same page looks correct in all my other computers with different browsers.

    I have this same problem on another website I am building, but on this website it is happening on all of the pages.

    Seeing all the pages on the first website use the same CSS, I don't believe the problems is with the CSS.

    Here is the HTML code for this page:
    Code:
    <!doctype html>
    
    <html lang="en">
    <head>
      <meta charset="utf-8">
    
      <title>Lawrence Creative Photography - Home</title>
      <meta name="description" content="Lawrence Creative Photography">
      <meta name="author" content="Lawrence Keeney">
      <meta name="copyright" content="Lawrence Keeney">
    
      <link rel="stylesheet" type="text/css" media="screen, print, projection"  href="../css/main.css">
      <link rel="stylesheet" type="text/css" media="screen, print, projection"  href="../css/nav.css">
      <link rel="stylesheet" type="text/css" media="screen, print, projection"  href="../css/banner.css">
      <link rel="stylesheet" type="text/css" media="screen, print, projection"  href="../css/footer.css">
    
      <!--[if lt IE 9]>
      <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
      <![endif]-->
    
       <script>
      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
      (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
      m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
      })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
    
      ga('create', 'UA-48451236-1', 'lawrencecreativephotography.com');
      ga('send', 'pageview');
    
    </script>
    
    <style type="text/css">
    
    #page {
        position: relative;
    	width: 960px;
        margin-left: auto;
        margin-right: auto;
    	margin-top: 0px;
        margin-bottom: 0px;
    }
    
    #content{
        height: 500px;
    }
    
    #photo1{
      position: absolute;
      top: 70px;
      left: 40px;
    }
    #pagetitle{
      position: absolute;
      top: 0px;
      left: 535px;
    }
    #text{
      position: absolute;
      top: 40px;
      left: 300px;
      height: 325px;
      width: 640px;
      background-color: #c0c0c0;
      border: 0px;
      margin: 0px;
      padding: 0px;
      padding-top: 10px;
      color: black;
      }
    
    #signature{
      position: relative;
      top: 430px;
      left:300px;
    }
    
      </style>
    
    </head>
    
    <body>
    <div id="page">
    
    <div id="navigation">
        <div id="nav">
            
               <a href="../index.shtml">
                    <div class="frame1"><p>HOME</p></div>
                </a>
    
                <a href="../about/index.shtml">
                    <div class="frame2"><p>ABOUT US</p></div>
                </a>
    
                <a href="../portraits/index.shtml">
                     <div class="frame3"><p>PORTRAITS</p></div>
                </a>
    
                <a href="../dance/index.shtml">
                    <div class="frame4"><p>DANCE & PERFORMANCE</p></div>
                </a>
    
                <a href="../services/index.shtml">
                    <div class="frame5"><p>SERVICES</p></div>
                </a>
    
                <a href="../contact/index.shtml">
                    <div class="frame6"><p>CONTACT US</p></div>
                </a>
    
    
        </div><!-- end nav -->
    </div><!-- end navigation -->
    
    <div id="banner">
         <!--<h1>Lawrence Creative Photography LLC</h1>
    
    <h2>"Performance Art Photography"</h2>-->
    
    <div id="logo">
        <img src="../images/logo-110H.png" alt="Logo" />
    </div>
    
    <div id="logotitle">
        <img src="../images/LawrenceCreative-80H-Black.png" alt="Lawrence Creative Photography" />
    </div>
    
    <!-- end logo -->
    
    
    </div><!-- end banner -->
    
    <div id="content">
    
        <div id="pagetitle">
           <h3>- About Us -</h3>
        </div>
    
        <div id="photo1">
            <img src="images/LarryPortrait.jpg" alt="Lawrence Keeney" />
        </div>
    
        <div id="text">
           <p>I am the owner and primary photographer at Lawrence Creative Photography LLC.</p>
    
           <p>I have been photographing models, actors, singers and dancers for many years. Recently, I have been concentrating
           on photographing dancers in an attempt to capture great action jump shots. </p>
    
           <p>While the majority of my photography is shooting portraits, I have also photographed products, food, jewelry, industrial, and corporate events.
           I have traveled half way across the country to do a number of different on-location industrial shoots.</p>
    
           <p>I developed a unique lighting technique for lighting quilts which emphasizes the texture of the stitching on the surface
           of the quilts, and gives it a "3D" look. I now photograph quilts for a number of different people who make quilts and
           quilt patterns. My quilt photographs are being used on the packages of quilt patterns sold in a national fabric store all around
           the country.</p>
    
           <p>I pride myself on making every photo shoot a relaxed and fun experience.</p>
    
           <p>My Mission Statement is simple: "Provide great products at reasonable prices, and ensure our customers
           are happy with the experience."</p>
        </div>
    
        <div id="signature">
            <img src="images/Signature.png" alt="Lawrence Keeney signature" />
        </div>
    
    </div><!-- end content -->
    
    <div id="footer">
    
            <div id="copyright">
        <p>All images  Copyright 2014 Lawrence Creative Photography LLC <br />
        Website Design  Copyright 2014 Lawrence Keeney<br />
        All rights reserved.</p>
    </div>
    
    </div><!-- end footer -->
    
    </div> <!-- end page -->
    </body>
    
    </html>
    Can anyone help with this problem?
    Last edited by jedaisoul; 03-11-2014 at 09:12 AM.

  2. #2
    Join Date
    Mar 2005
    Location
    Behind you...
    Posts
    1,031
    Firstly (because the statement jumped out at me), when you are talking about the way something looks on a webpage, it is always about CSS. The other pages may appear correct because as the content and page elements change, the CSS being used will change.

    It looks like for this page your 'signature' element is causing a problem. Because it is positioned relatively and is a block element, it maintains it's full width (based on its parent element) but is being moved to the right, forcing the page to extend further right (under lower resolutions). There are a couple of ways to fix this. You can try something like this:
    HTML Code:
    #signature {
      display: inline-block;
      zoom: 1;
      *display: inline;
    }
    The last 2 lines of CSS are for older versions of IE. They typically don't like applying inline-block to block elements. Which is why an alternative solution would be to change that element from a <div> to a <span>.

  3. #3
    Join Date
    Mar 2004
    Location
    Nevada, USA
    Posts
    210
    Quote Originally Posted by Sup3rkirby View Post
    Firstly (because the statement jumped out at me), when you are talking about the way something looks on a webpage, it is always about CSS. The other pages may appear correct because as the content and page elements change, the CSS being used will change.

    It looks like for this page your 'signature' element is causing a problem. Because it is positioned relatively and is a block element, it maintains it's full width (based on its parent element) but is being moved to the right, forcing the page to extend further right (under lower resolutions). There are a couple of ways to fix this. You can try something like this:
    HTML Code:
    #signature {
      display: inline-block;
      zoom: 1;
      *display: inline;
    }
    The last 2 lines of CSS are for older versions of IE. They typically don't like applying inline-block to block elements. Which is why an alternative solution would be to change that element from a <div> to a <span>.
    Thank you, thank you.

    I would probably never have figured this one out.

    When I get back to the office in the morning I will check this out.

  4. #4
    Join Date
    Mar 2005
    Location
    Behind you...
    Posts
    1,031
    Just a quick update... (not sure where my mind wanders off to sometimes)
    You could simply use 'display: inline;' in the CSS instead of those 3 lines I have. Both 'inline-block' and 'inline' should work, but you won't need the IE fix with 'inline'. This would probably be the simplest fix.

  5. #5
    Join Date
    Mar 2004
    Location
    Nevada, USA
    Posts
    210
    Quote Originally Posted by Sup3rkirby View Post
    Just a quick update... (not sure where my mind wanders off to sometimes)
    You could simply use 'display: inline;' in the CSS instead of those 3 lines I have. Both 'inline-block' and 'inline' should work, but you won't need the IE fix with 'inline'. This would probably be the simplest fix.
    I couldn't wait until the morning to take a look at this. I solved the problem by just specifying a width of the offending item.

    This also solved a similar problem on another website where the offending item was in the footer so it effected all the pages on the website. One simple width statement solved the problem there too.
    Last edited by lkeeney; 03-11-2014 at 12:31 AM.

  6. #6
    Join Date
    Mar 2005
    Location
    Behind you...
    Posts
    1,031
    I don't want to really jump too far off-topic with this, but I do feel I should note a few things that might help you with potential future similar issues, and to improve the site overall.

    You do need to be careful with setting absolute widths around the site. I noticed the '#page' element has an absolute height set, however not all pages fill this height with content, leaving you with empty space that you can scroll down to. It's much like what was going on with that signature element, but vertically.

    Try using properties like 'max-width' to help prevent elements from forcing your page to extend beyond the content in any direction. Typically, your main content container should have a 'max-width' of 100%. This allows your site to display on mobile devices (and all resolutions) much better as it prevents horizontal scrolling, which is typically undesirable. You have several absolute widths set for various elements, which means that no matter the resolution of the device, your page will always be that width (even if the device resolution has width less than 960 pixels). You can still use the absolute widths, but they should be followed up with a 'max-width: 100%;' to allow your site to scale better across all mobile devices.

    It's nothing dire to your site, it's just a suggestion. For these same reasons using something like 'display: inline;' on any element that doesn't need to stretch and fill a space will work out better overall (as its width is automatically determined by the content inside, which is an image in your case).

  7. #7
    Join Date
    Mar 2004
    Location
    Nevada, USA
    Posts
    210
    I thought I had responded to your reply earlier but I must not have saved it.

    In any case, thanks for the additional suggestions.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles