7 Replies Latest reply: Sep 14, 2014 2:30 PM by Nancy O. RSS

    Page Loading Too Far Up

    Max Resnikoff Community Member
    Max Resnikoff Sep 14, 2014 8:30 AM

      Hi,

       

      I have a problem on all my record pages; When I load the page, everything is shifted upwards (Note the Title is behind the tabs):

      1.JPG

       

      And If I reload the page, It jumps to where it is meant to be:

      2.JPG

       

      At first im thinking it may be that there is an error message which is hidden by the header? (I have added a: 'include' script in all my pages which displays the same header on all pages)

      This is the case when I load it on the server. But on the local testing server, it all looks fine! Maybe its the header? or the main body?

       

      Here is the code for one of the pages which has this issue:

       

      <?php require_once('Connections/drama_database.php'); ?>

      <?php

      if (!isset($_SESSION)) {

        session_start();

      }

      $MM_authorizedUsers = "";

      $MM_donotCheckaccess = "true";

       

      // *** Restrict Access To Page: Grant or deny access to this page

      function isAuthorized($strUsers, $strGroups, $UserName, $UserGroup) {

        // For security, start by assuming the visitor is NOT authorized.

        $isValid = False;

       

        // When a visitor has logged into this site, the Session variable MM_Username set equal to their username.

        // Therefore, we know that a user is NOT logged in if that Session variable is blank.

        if (!empty($UserName)) {

          // Besides being logged in, you may restrict access to only certain users based on an ID established when they login.

          // Parse the strings into arrays.

          $arrUsers = Explode(",", $strUsers);

          $arrGroups = Explode(",", $strGroups);

          if (in_array($UserName, $arrUsers)) {

            $isValid = true;

          }

          // Or, you may restrict access to only certain users based on their username.

          if (in_array($UserGroup, $arrGroups)) {

            $isValid = true;

          }

          if (($strUsers == "") && true) {

            $isValid = true;

          }

        }

        return $isValid;

      }

       

      $MM_restrictGoTo = "login.php";

      if (!((isset($_SESSION['MM_Username'])) && (isAuthorized("",$MM_authorizedUsers, $_SESSION['MM_Username'], $_SESSION['MM_UserGroup'])))) {  

        $MM_qsChar = "?";

        $MM_referrer = $_SERVER['PHP_SELF'];

        if (strpos($MM_restrictGoTo, "?")) $MM_qsChar = "&";

        if (isset($_SERVER['QUERY_STRING']) && strlen($_SERVER['QUERY_STRING']) > 0)

        $MM_referrer .= "?" . $_SERVER['QUERY_STRING'];

        $MM_restrictGoTo = $MM_restrictGoTo. $MM_qsChar . "accesscheck=" . urlencode($MM_referrer);

        header("Location: ". $MM_restrictGoTo);

        exit;

      }

      ?>

      <?php

      if (!function_exists("GetSQLValueString")) {

      function GetSQLValueString($theValue, $theType, $theDefinedValue = "", $theNotDefinedValue = "")

      {

        if (PHP_VERSION < 6) {

          $theValue = get_magic_quotes_gpc() ? stripslashes($theValue) : $theValue;

        }

       

        $theValue = function_exists("mysql_real_escape_string") ? mysql_real_escape_string($theValue) : mysql_escape_string($theValue);

       

        switch ($theType) {

          case "text":

            $theValue = ($theValue != "") ? "'" . $theValue . "'" : "NULL";

            break;   

          case "long":

          case "int":

            $theValue = ($theValue != "") ? intval($theValue) : "NULL";

            break;

          case "double":

            $theValue = ($theValue != "") ? doubleval($theValue) : "NULL";

            break;

          case "date":

            $theValue = ($theValue != "") ? "'" . $theValue . "'" : "NULL";

            break;

          case "defined":

            $theValue = ($theValue != "") ? $theDefinedValue : $theNotDefinedValue;

            break;

        }

        return $theValue;

      }

      }

       

      $maxRows_cosinv = 10;

      $pageNum_cosinv = 0;

      if (isset($_GET['pageNum_cosinv'])) {

        $pageNum_cosinv = $_GET['pageNum_cosinv'];

      }

      $startRow_cosinv = $pageNum_cosinv * $maxRows_cosinv;

       

      mysql_select_db($database_drama_database, $drama_database);

      $query_cosinv = "SELECT * FROM costume";

      $query_limit_cosinv = sprintf("%s LIMIT %d, %d", $query_cosinv, $startRow_cosinv, $maxRows_cosinv);

      $cosinv = mysql_query($query_limit_cosinv, $drama_database) or die(mysql_error());

      $row_cosinv = mysql_fetch_assoc($cosinv);

       

      if (isset($_GET['totalRows_cosinv'])) {

        $totalRows_cosinv = $_GET['totalRows_cosinv'];

      } else {

        $all_cosinv = mysql_query($query_cosinv);

        $totalRows_cosinv = mysql_num_rows($all_cosinv);

      }

      $totalPages_cosinv = ceil($totalRows_cosinv/$maxRows_cosinv)-1;

       

      $maxRows_cosinv = 1;

      $pageNum_cosinv = 0;

      if (isset($_GET['pageNum_cosinv'])) {

        $pageNum_cosinv = $_GET['pageNum_cosinv'];

      }

      $startRow_cosinv = $pageNum_cosinv * $maxRows_cosinv;

       

       

      if (isset($_GET['totalRows_cosinv'])) {

        $totalRows_cosinv = $_GET['totalRows_cosinv'];

      } else {

        $all_cosinv = mysql_query($query_cosinv);

        $totalRows_cosinv = mysql_num_rows($all_cosinv);

      }

      $totalPages_cosinv = ceil($totalRows_cosinv/$maxRows_cosinv)-1;

       

      $maxRows_cosinv = 10;

      $pageNum_cosinv = 0;

      if (isset($_GET['pageNum_cosinv'])) {

        $pageNum_cosinv = $_GET['pageNum_cosinv'];

      }

      $startRow_cosinv = $pageNum_cosinv * $maxRows_cosinv;

       

      $colname_cosinv = "-1";

       

      mysql_select_db($database_drama_database, $drama_database);

       

      if (isset($_POST['txt_search']))

      {    //Only show what is being searched

          $searchword = $_POST['txt_search'];

          $query_cosinv = "SELECT * FROM costume WHERE name LIKE '%".$searchword."%' OR description LIKE '%".$searchword."%' OR type LIKE '%".$searchword."%' OR material LIKE '%".$searchword."%' OR size LIKE '%".$searchword."%' OR gender LIKE '%".$searchword."%' OR colour LIKE '%".$searchword."%' OR timeperiod LIKE '%".$searchword."%' OR accessories LIKE '%".$searchword."%' OR value LIKE '%".$searchword."%' OR conditions LIKE '%".$searchword."%' OR notes LIKE '%".$searchword."%' OR location LIKE '%".$searchword."%' OR code LIKE '%".$searchword."%'";

      }

      else //show all records

      {

          $query_cosinv = "SELECT * FROM costume";

      }

      $query_limit_cosinv = sprintf("%s LIMIT %d, %d", $query_cosinv, $startRow_cosinv, $maxRows_cosinv);

      $cosinv = mysql_query($query_limit_cosinv, $drama_database) or die(mysql_error());

      $row_cosinv = mysql_fetch_assoc($cosinv);

       

      if (isset($_GET['totalRows_cosinv'])) {

        $totalRows_cosinv = $_GET['totalRows_cosinv'];

      } else {

        $all_cosinv = mysql_query($query_cosinv);

        $totalRows_cosinv = mysql_num_rows($all_cosinv);

      }

      $totalPages_cosinv = ceil($totalRows_cosinv/$maxRows_cosinv)-1;

       

      $queryString_cosinv = "";

      if (!empty($_SERVER['QUERY_STRING'])) {

        $params = explode("&", $_SERVER['QUERY_STRING']);

        $newParams = array();

        foreach ($params as $param) {

          if (stristr($param, "pageNum_cosinv") == false &&

              stristr($param, "totalRows_cosinv") == false) {

            array_push($newParams, $param);

          }

        }

        if (count($newParams) != 0) {

          $queryString_cosinv = "&" . htmlentities(implode("&", $newParams));

        }

      }

      $queryString_cosinv = sprintf("&totalRows_cosinv=%d%s", $totalRows_cosinv, $queryString_cosinv);

      ?>

       

      <title>Costume Inventory</title>

      <?php session_start();?>

       

       

      <!--HEADER CONTENT START -->

      <link href="stylesheet.css" rel="stylesheet" type="text/css" />

      <head>

      <style type="text/css">

      body{ margin:0px; background:#FFF;}

      .header {

          height:165px;

          background:#FFF;

          border:1px solid#CCC;

          position:fixed;

          width:100%;

          top:0px;

      }

      </style>

      </head>

       

      <div class="header"><?php include('defaultheader.php');?></div>

      <div class="addnewequipsidebutton"></div>

      <br>

      <br>

      <br>

      <br>

      <br>

      <br>

      <br>

       

       

      <!--HEADER CONTENT END -->

       

       

        <?php

      $currentPage = $_SERVER["PHP_SELF"];

       

      $queryString_invlist = "";

      if (!empty($_SERVER['QUERY_STRING'])) {

        $params = explode("&", $_SERVER['QUERY_STRING']);

        $newParams = array();

        foreach ($params as $param) {

          if (stristr($param, "pageNum_invlist") == false &&

              stristr($param, "totalRows_invlist") == false) {

            array_push($newParams, $param);

          }

        }

        if (count($newParams) != 0) {

          $queryString_invlist = "&" . htmlentities(implode("&", $newParams));

        }

      }

      $queryString_invlist = sprintf("&totalRows_invlist=%d%s", $totalRows_invlist, $queryString_invlist);

      ?>

        <style type="text/css">

      .equiptitle {

          font-size: xx-large;

          font-weight: bold;

      }

      .titlelist {

          font-size: xx-large;

          font-weight: bold;

      }

      </style>

       

       

      <div align="center">

        <h1>Costume Inventory</h1>

      </div>

      <div align="center">

        <table width="1212" border="0" align="center">

          <tr valign="top">

            <td width="468" height="26"> Records <?php echo ($startRow_cosinv + 1) ?> to <?php echo min($startRow_cosinv + $maxRows_cosinv, $totalRows_cosinv) ?> of <?php echo $totalRows_cosinv ?> | <a href="costumeinventory.php">Show All</a></td>

            <td width="258" align="center"><input type="button" onclick="window.print()" value="Print Table" /></td>

            <td width="472" align="right"><form id="search" name="search" method="post" action="">

              <label for="txt_search">Search</label>

              <input type="text" name="txt_search" id="txt_search" />

              <input type="submit" name="btn_search" id="btn_search" value="Search" />

            </form></td>

          </tr>

        </table>

        <h4>

      </div>

      <?php do { ?>

        <?php if ($totalRows_cosinv > 0) { // Show if recordset not empty ?>

          <div align="center"> <img src="images/divider.JPG" width="1085" height="29">

            <table width="1652" border="0">

              <tr>

                <td width="9"> </td>

                <td width="271" height="173"><input name="image" type="image" src="<?php echo $row_cosinv['image']; ?>" width="250" border="1"></td>

                <td width="1358"><form name="form1" method="post" action="">

                  <table width="954" border="0">

                    <tr>

                      <td colspan="5" class="titlelist"><?php echo $row_cosinv['name']; ?></td>

                      <td width="160">Internal  ID: <strong><?php echo $row_cosinv['id']; ?></strong></td>

                    </tr>

                    <tr>

                      <td colspan="2"><em><?php echo $row_cosinv['description']; ?></em></td>

                      <td> </td>

                      <td> </td>

                      <td> </td>

                      <td>External ID:<strong> C<?php echo $row_cosinv['id']; ?></strong></td>

                    </tr>

                    <tr>

                      <td width="131" height="146" rowspan="3"><strong>Type:<br>

                        Material:<br>

                        Size:<br />

                        Gender: <br>

                        Colour:<br>

                        Time Period:<br />

                        Value: <br>

                      </strong><br></td>

                      <td width="267" rowspan="3"><?php echo $row_cosinv['type']; ?><br />

                        <?php echo $row_cosinv['material']; ?><br />

                        <?php echo $row_cosinv['size']; ?><br>

                        <?php echo $row_cosinv['gender']; ?><br>

                        <?php echo $row_cosinv['colour']; ?><br />

                        <?php echo $row_cosinv['timeperiod']; ?><br>

                        <?php echo $row_cosinv['value']; ?><br>

                        <br></td>

                      <td width="109" rowspan="3" valign="top"><strong>Condition:<br />

                        Accessories:<br />

                        Notes: <br />

                        Location:<br />

                        Tag Number: </strong></td>

                      <td width="226" rowspan="3" valign="top"><?php echo $row_cosinv['conditions']; ?><br />

                        <?php echo $row_cosinv['accessories']; ?><br />

                        <?php echo $row_cosinv['notes']; ?><br />

                        <?php echo $row_cosinv['location']; ?><br />

                        <?php echo $row_cosinv['code']; ?><br />

                        <br /></td>

                      <td width="35" rowspan="3"><img src="images/dividerhor.jpg" width="35" height="115"></td>

                      <td height="38">TAG Number: <strong><?php echo $row_cosinv['code']; ?></strong></td>

                    </tr>

                    <tr>

                      <td height="27"><a href="costumeupdate.php?id=<?php echo $row_cosinv['id']; ?>"><img src="images/updatebutton.png" width="71" height="25" alt="update" /></a></td>

                    </tr>

                    <tr>

                      <td height="31" align="left" valign="middle"><a href="deletecostume.php" onClick="return confirm('Are you sure you want to delete this costume?')"><img src="images/deletebutton.png" width="71" height="25"></a>

                        <input name="id" type="hidden" id="id"></td>

                    </tr>

                  </table>

                </form></td>

              </tr>

            </table>

          </div>

          <?php } // Show if recordset not empty ?>

        <?php } while ($row_cosinv = mysql_fetch_assoc($cosinv)); ?>

      <br>

      <br>

      <?php if ($totalRows_cosinv == 0) { // Show if recordset empty ?>

        <div align="center">

          <h3>No Results Found<img src="images/divider.JPG" alt="" width="1085" height="29" /></h3>

        </div>

        <?php

      mysql_free_result($cosinv);

      ?>

        <?php } // Show if recordset empty ?>

       

       

      And here is the code for the default header which is on every page:

      <?php error_reporting(0);

      ini_set('display_errors', 0);

      ?>

      <style type="text/css">

      .textsize {

          font-size: x-large;

      }

      .positionright {

          text-align: right;

      }

      </style>

      <link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />

      <link href="stylesheet.css" rel="stylesheet" type="text/css" />

       

       

       

      <html>

      <!--favicon -->

      <script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>

      <head>

          <link href="images/favicon.ico" rel="icon" />

          <META HTTP-EQUIV="refresh" CONTENT="600;URL=logouttimout.php?timeout">

      </head>

       

      <!--Main Header -->    

       

        <table width="100%" border="0" cellpadding="10" cellspacing="0">

        <tr>

            <td width="54%" height="146">

         

      <!--header links -->

              <div style="width: 500px; height: 40px; text-align: left; vertical-align: top; padding: 0px 0px 0px 7px;"><a href="home.php">Home</a> | <a href="controlpanel.php">Control Panel</a> | <a href="admin.php">Admin</a></div>

      <!--Acs-Egham Logo -->

              <div> <a href="home.php"><img src="images/logo_acs_egham.gif" alt="Acs-Egham International School" width="387" height="59"></a>

              </div>

          </td>

         

      <!--Database logo -->

          <td width="20%"><a href="home.php"><img src="images/dramadatabase.jpg" alt="Acs-Egham International School" width="171" height="119"></a>

          </td>

       

      <!--Last Updated Text -->

          <td width="26%">

              <p align="right"><font size="1">Last Maintenance Update:

              <!-- #BeginDate format:Am3m -->09/14/2014  16:25<!-- #EndDate -->

              </font>

                      <br>

                 

      <!--Logged in as text and log out button -->

                  <font size="1">Email Support at:<a href="mailto:EMAIL">EMAIL</a></font>

              </p>

              <div align="right">

              <p align="right"><b>Logged in as:<b>

                  <br>

                <?php echo $_SESSION['MM_Username']; ?> <br>

                  <br>

                     <a href="logout.php">Logout</a>

              </div>

          </td>

            </tr>

      </table>

        <p> </p>

       

       

        <div class="menubar">

        <ul id="MenuBar1" class="MenuBarHorizontal">

          <li><a href="home.php">Main Page</a></li>

          <li><a href="#" class="MenuBarItemSubmenu">Equipment</a>

            <ul>

              <li><a href="equipmentinventory.php">Inventory</a></li>

              <li><a href="equipmentadd.php">Add New</a></li>

      </ul>

          </li>

          <li><a href="#" class="MenuBarItemSubmenu">Props</a>

            <ul>

              <li><a href="propsinventory.php">Inventory</a></li>

              <li><a href="propadd.php">Add New</a></li>

      </ul>

          </li>

          <li><a href="#" class="MenuBarItemSubmenu">Costumes</a>

            <ul>

              <li><a href="costumeinventory.php">Inventory</a></li>

              <li><a href="costumeadd.php">Add New</a></li>

      </ul>

          </li>

          <li><a href="#" class="MenuBarItemSubmenu">Scenery</a>

            <ul>

              <li><a href="sceneryinventory.php">Inventory</a></li>

              <li><a href="sceneryadd.php">Add New</a></li>

      </ul>

          </li>

          <li><a href="#" class="MenuBarItemSubmenu">Books</a>

            <ul>

              <li><a href="bookinventory.php">Inventory</a></li>

              <li><a href="bookadd.php">Add New</a></li>

            </ul>

          </li>

        </ul>

        <p>

          <script type="text/javascript">

      var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});

          </script>

       

        </div>

       

      <div class="reportissuesidebutton"> <a href="mailto:support@eghamdrama.com"><img src="images/reportissue.png" width="50" height="100" /></a></div>

        </html>

       

       

       

      Any help would be very much appreciated!

        • 1. Re: Page Loading Too Far Up
          Nancy O. CommunityMVP
          Nancy O. Sep 14, 2014 11:35 AM (in response to Max Resnikoff)

          What's in your stylesheet.css?

           

           

          Nancy O.

          • 2. Re: Page Loading Too Far Up
            Max Resnikoff Community Member
            Max Resnikoff Sep 14, 2014 12:03 PM (in response to Nancy O.)

            This:

             

            @charset "utf-8";

             

            .reportissuesidebutton {

                position: fixed;

                top: 40%;

                right: 0%;

            }

             

            .menubar {

                position:fixed;

                top: 148px;

                left: 10px;   

            }

             

            .formfielddesc {

                text-align: left;

                height: 60px;

                width: 300px;

                vertical-align: middle;

                white-space: pre;

                clear: both;

                float: left;

                font-size: 18px;

                margin: 0px;

                padding-top: 0px;

                padding-right: 0px;

                padding-bottom: 0px;

                padding-left: 6px;

                overflow: visible;

            }

             

            .formtag {

                text-align: left;

                font-family: Arial, Helvetica, sans-serif;

            }

             

            .formfield {

                text-align: left;

                height: 25px;

                width: 300px;

                clear: left;

                float: left;

                font-size: 18px;

                padding-left: 6px;

                text-transform: none;

            }

            .button {

                font-size: 16px;

                font-family: Arial, Helvetica, sans-serif;

            }

             

            .divcenter {

                width: 800px;

                height: 400px;

                border-radius: 5px;

                padding: 10px;

                position: absolute;

                margin-top: -300px;

                margin-left: -400px;

                top: 408px;

                left: 50%;

               

            }

               

                /* Sortable tables */

            table.sortable thead {

                background-color:#eee;

                color:#666666;

                font-weight: bold;

                cursor: default;

            }

             

            table.sortable th:not(.sorttable_sorted):not(.sorttable_sorted_reverse):not(.sorttable_nosort):after {

                content: " \25B4\25BE"

            }

            • 3. Re: Page Loading Too Far Up
              Nancy O. CommunityMVP
              Nancy O. Sep 14, 2014 1:27 PM (in response to Max Resnikoff)

              Why are you using Fixed positioning for any of this?

               

               

              Nancy O.

              • 4. Re: Page Loading Too Far Up
                Max Resnikoff Community Member
                Max Resnikoff Sep 14, 2014 1:28 PM (in response to Nancy O.)

                Because i want my main header to always be visible even when the user is all the way down the record list.

                • 5. Re: Page Loading Too Far Up
                  Nancy O. CommunityMVP
                  Nancy O. Sep 14, 2014 1:52 PM (in response to Max Resnikoff)

                  Fixed positioning removes content from the normal document flow.  So you'll need to add plenty of wiggle room between fixed and static elements.

                   

                  Preview your site in a web browser like Firefox or Chrome.  Use Right Click > Inspect Element tools and add ample top padding (approx 100px) to your main content div.

                   

                   

                  Nancy O.

                  • 6. Re: Page Loading Too Far Up
                    Max Resnikoff Community Member
                    Max Resnikoff Sep 14, 2014 2:24 PM (in response to Nancy O.)

                    instead of the;

                    <br>

                    <br>

                    <br>

                    <br>

                    <br>

                    <br>

                    <br>

                    <br>

                     

                    ?

                    • 7. Re: Page Loading Too Far Up
                      Nancy O. CommunityMVP
                      Nancy O. Sep 14, 2014 2:30 PM (in response to Max Resnikoff)

                      instead of the;

                      <br>

                      <br>

                      <br>

                      <br>

                      <br>

                      <br>

                      <br>

                      <br>

                       

                      Absolutely.  Spacebar, Shift+Enter and tab key strokes are NOT styling devices.    Learn to use CSS margins and padding to put space between elements.  Review the  CSS Box Model

                       

                       

                       

                      Nancy O.