The forums have permanently moved to forum.kirupa.com. This forum will be kept around in read-only mode for archival purposes. To learn how to continue using your existing account on the new forums, check out this thread.


Results 1 to 3 of 3

Thread: How to get 100% footer at an ipad or iphone?

  1. #1

    How to get 100% footer at an ipad or iphone?

    Just wonder if you have any clue why my footer is not showing up 100% at an ipad or iphone in Safari (doing great in safari at my computer though)



    http://www.lexsign.se


    Code:
    div.footer {
    text-align: center;
    padding-top: 30px;
    padding-bottom:10px;
    margin-top:30px;
    width: 100%;
    position:relative;
    height:300px;
    bottom:0px;
    left:0px;
    right:0px;
    } 
    
    div.insidefooter {
    width:1080px;
    text-align: left;
    font-family:Verdana;
    padding-top:0px;
    margin:1px auto;
    margin-top:0px;
    margin-bottom:10px;
    }

    Thanks

  2. #2
    58
    posts
    Registered User
    It might be beacuse you have to wide information area inside your footer. The default viewport width in safari on ihpone is 980 px, so since your footer has width 100% that would then be 980 px wide but the insidefooter is 1080 px wide, so you got 100px overflow.
    You can set a min-width of your footer. Or force safari to render on a width of 1080px by adding this to your header:

    HTML Code:
     <meta name="viewport" content="width=1080" />
    check out the Safari web content guide on configuring the viewport to meet your needs

    http://developer.apple.com/library/s...eViewport.html
    ---
    VeVas

  3. #3
    Quote Originally Posted by VeVas View Post
    It might be beacuse you have to wide information area inside your footer. The default viewport width in safari on ihpone is 980 px, so since your footer has width 100% that would then be 980 px wide but the insidefooter is 1080 px wide, so you got 100px overflow.
    You can set a min-width of your footer. Or force safari to render on a width of 1080px by adding this to your header:

    HTML Code:
     <meta name="viewport" content="width=1080" />
    check out the Safari web content guide on configuring the viewport to meet your needs

    http://developer.apple.com/library/s...eViewport.html
    or just dont do any width at all. aslong as the body has no padding or margin set to it via css, then itll stretch across the whole screen with no problem.

    also what can help is, since you said iphone, if you add this line of code
    itll insure that the thing doesnt scroll anywhere but up/down etc.

    oh and add this to the head , /head tags in your html/php whatever.

    <meta name = "viewport" content = "initial-scale=1.0, maximum-scale=1.0, user-scalable=no, width=device-width " />

    then this alone should work. if like me, i plan on NOT maintaining to sites at the same time ( TEDIOUS ) and pulling
    the mobile contents from its main...via php, then some of the images or div tags MAY break the above rule since the content will
    "overflow" width wise....so to that, add a

    HTML Code:
    overflow-y:hidden;
    
    or a
    
    overflow-x:hidden;
    etc to it, an there you go...

    oh and i like this one...below, remove the addy bar on load.



    HTML Code:
    <script type="application/x-javascript">
    addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false);
    
    function hideURLbar(){
    window.scrollTo(0,1);
    }
    </script>

Thread Information

Users Browsing this Thread

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

Tags for this Thread

Posting Permissions

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

Home About kirupa.com Meet the Moderators Advertise

 Link to Us

 Credits

Copyright 1999 - 2012