Results 1 to 2 of 2

Thread: Scrolling Issue in Mobile Browser - Please Help

  1. #1
    New Member
    Join Date
    Jul 2010
    Posts
    2

    Question Scrolling Issue in Mobile Browser - Please Help

    I'm planning to create a website for mobile. Created a basic template (see attached). When i upload this template to my hosting server and access the URL from my mobile - HTC EVO Android Stock Browser - the page is not getting scrolled. Im not sure if i've given the correct parameters in CSS.

    I would deeply appriciate if you can look at my CSS and let me know whats wrong - I've been breaking my head on this for the past two days.

    Please note: Only the bottom part (grid) will have to scroll - the top part will remain.

    Thanks a lot.
    Attached Files Attached Files

  2. #2

    Default

    here's a dirty fix. You can then fix it from here

    CSS
    Code:
    * {
        font-family: Helvetica, sans-serif;
    }
    body {
        margin: 0;
        font-family: Helvetica;
        background: #FFFFFF;
        color: #000000;  
        -webkit-text-size-adjust: none;
        background-repeat:repeat-x;
        background-position:top;
        overflow:hidden; 
    }
    #contentWrapper {
        clear:both;
        width:100%;   
    }
    .dark_line{ border-top:1px solid #666; height:1px; width:100%; min-height:1px;}
    .r1 {
        padding-bottom:5px;
        padding-top:5px;
        line-height:30px;
        font-weight:bold;
        padding-left:10px;
        border-bottom: 1px solid #E0E0E0;
        display:block;
    }
    .r2 {
        padding-bottom:5px;
        padding-top:5px;
        line-height:30px;
        font-weight:bold;
        padding-left:10px;
        border-bottom: 1px solid #E0E0E0;
        display:block;
    }
    
    #wrapper {
        width: 100%;
        overflow: hidden;
    }
    a, #menu, .linkbox, .blue {
        color: #0653A0;
        text-decoration: none;
    }
    img {
        border-style: none
    }
    
    
    .sec {
        background-repeat: repeat-x;
        background-position: top left;
        position: fixed;
        width: 100%;
        text-align: center;
        height: 20px;
    }
    
    .sub.light, .sub {
        padding: 4px 1px 7px 1px;
        background-color: #e3e1e1;
        position: fixed;
        width: 100%;
        text-align: center;
        height: 20px;
        top: 50px;
    }
    
    .tabs {
        width: 100%;
        clear: both;
        text-align: center;
        padding: 0;
    }
    .tab {
        font-size: 11px;
        padding: 5px 2px 4px 2px;
        margin: 0;
        display: inline;
        text-align: center;
        border: 1px solid #999999;
        color: #000000;
        font-weight: bold;
        background-repeat: repeat-x;
        overflow: hidden;
        background-color: #CCCCCC;
        width: 25%;
    }
    
    .tab a {
        color: black;
    }
    .tabSmall {
        font-size: 9px;
        padding: 4px 2px 4px 2px;
        margin: 2px 3px 2px 3px;
        display: inline;
    }
    
    .menu.tab {
        width: 60px;
    }
    
    .bottom {
        background-color: #003fa7;
    }
    #menuButton {
        margin-top:0px;
        
    }
    
    .row {
        font-size:  16px;
        min-height: 16px;
        color: #FFFFFF;
        padding: 15px 20px 13px 10px;
        background-repeat: repeat-x;
        background-position: top left;
    }
    .header.row {
        font-size:  20px;
        min-height: 20px;
        padding: 17px 10px 15px 10px;
    }
    .row a {
        color: #FFFFFF;
    }
    
    body {
        -webkit-text-size-adjust: none;
    }
    
    .sec, .shade.dark {
        background-color: #003fa7;
        border-bottom: 1px solid #004595;
        background-repeat: repeat-x;
    }
    HTML
    Code:
    <?xml version = '1.0' encoding = 'UTF-8'?>
    <!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
    <title xmlns="">Mobile</title>
    <link rel="apple-touch-icon" href="iroma.png"/>
    <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=0;" />
    <meta name="HandheldFriendly" content="true" />
    <style xmlns="http://www.w3.org/1999/xhtml" type="text/css" media="screen">
    @import "mobile.css";
    </style>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" xmlns="http://www.w3.org/1999/xhtml"/>
    </head>
    
    <body>
    <div id="wrapper">
      <div class="sec row" id="section1row"  style="float:left;">
        <div class="title" id="section1title">
          <div>Mobile View</div>
        </div>
      </div>
      <div class="section" id="section1">
        <div class="sub">
          <div class="tabs">
            <div class="tab" style="width:29%;"><a href="#">Link1</a></div>
            <div class="tab" style="width:29%;"><a href="#">Link 2</a></div>
            <div class="tab" style="width:29%;"><a href="#">Link 3</a></div>
            <br style="clear: both;" />
          </div>
        </div>
        <div id="gamesmlb" style="height: 80%; position: absolute; top: 90px; overflow:auto; width: 100%;">
          <div class="shadow spacer"></div>
          <div id="contentWrapper">
            <!-- START OF CONTENT -->
            <div class="r1"><a href="#" class="lnk_b">User 1</a></div>
            <div class="r2"><a href="#" class="lnk_b">User 2</a></div>
            <div class="r1"><a href="#" class="lnk_b">User 3</a></div>
            <div class="r2"><a href="#" class="lnk_b">User 4</a></div>
            <div class="r1"><a href="#" class="lnk_b">User 5</a></div>
            <div class="r2"><a href="#" class="lnk_b">User 6</a></div>
            <div class="r1"><a href="#" class="lnk_b">User 7</a></div>
            <div class="r2"><a href="#" class="lnk_b">User 8</a></div>
            <div class="r1"><a href="#" class="lnk_b">User 9</a></div>
            <div class="r2"><a href="#" class="lnk_b">User 10</a></div>
            <div class="r1"><a href="#" class="lnk_b">User 11</a></div>
            <div class="r1"><a href="#" class="lnk_b">User 12</a></div>
            <div class="r1"><a href="#" class="lnk_b">User 13</a></div>
            <div class="r1"><a href="#" class="lnk_b">User 14</a></div>
            <div class="r1"><a href="#" class="lnk_b">User 15</a></div>
            <div class="r1"><a href="#" class="lnk_b">User 16</a></div>
            <div class="r1"><a href="#" class="lnk_b">User 17</a></div>
            <div class="r1"><a href="#" class="lnk_b">User 18</a></div>
            <div class="r1"><a href="#" class="lnk_b">User 19</a></div>
            <div class="r2"><a href="#" class="lnk_b">User 20</a></div>
            <div class="r2"><a href="#" class="lnk_b">User 21</a></div>
            <div class="r2"><a href="#" class="lnk_b">User 22</a></div>
            <div class="r2"><a href="#" class="lnk_b">User 23</a></div>
            <div class="r2"><a href="#" class="lnk_b">User 24</a></div>
            <div class="r2"><a href="#" class="lnk_b">User 25</a></div>
            <div class="r2"><a href="#" class="lnk_b">User 26</a></div>
            <div class="r2"><a href="#" class="lnk_b">User 27</a></div>
            <div class="r2"><a href="#" class="lnk_b">User 28</a></div>
            <div class="r2"><a href="#" class="lnk_b">User 29</a></div>
            <!-- END OF CONTENT -->
          </div>
        </div>
      </div>
    </div>
    </div>
    </body>
    </html>

Similar Threads

  1. Preventing Horizontal Scrolling
    By TonyS in forum Mobile Web Development
    Replies: 3
    Last Post: 10-17-2010, 03:40 PM
  2. Execute code when Scrolling stops (Gestures Managed Code)
    By Scavenger in forum Windows Mobile App Development
    Replies: 0
    Last Post: 03-02-2010, 05:22 PM
  3. Replies: 0
    Last Post: 02-03-2010, 01:15 AM
  4. Replies: 0
    Last Post: 12-07-2009, 06:30 PM
  5. mobile technical issue
    By kutekutta in forum News & Discussion
    Replies: 0
    Last Post: 12-08-2008, 05:03 AM

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
  •  
A Yup.mobi Mobile Site
Mobile Dating