...

View Full Version : Weird, Page loading approx 300px from top.



jchrisphonte
01-26-2012, 06:53 AM
Hey Guys,

A bit stumped with this one....
The index.php and reviews.php pages of my site load about 300px below the top of the page... http://www.hedgevent.com
http://hedgevent.com/reviews.php

here is the homepage code and CSS below. excuse the messy coding -- this is my very first site...



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="style.css" rel="stylesheet" type="text/css" />
<title>Hedge Fund Events</title>
<style type="text/css">
body {
background-image:url('background.png');
}
</style>
<script type="text/javascript" src="js/search.js"></script>
<script type="text/javascript" src="js/pagination.js"></script>
<script> htmlData('search.php', ''); </script>
<style type="text/css">
#sidebar img {
margin-bottom:10px;
}
</style>
<script type="text/javascript">

var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-28203080-1']);
_gaq.push(['_trackPageview']);

(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();

</script>
</head>

<body>
<div class=wrapper>
<section id="bar">
<div class="header">
<div class="logo"><a href="index.php"><img src="logo.png"HEIGHT="80" width="200"/></a>
</div>
<div class="banner"><a href=http://www.thomsonreuters.com/><img src="thomson.gif"/></a>
</div>
</div>
<div class="navbar">

<ul class="firstbar">
<li><a href="index.php">Hedge Fund Events</a> </li>
<li><a href="calendar.php">Events Calendar</a> </li>
<li><a href="reviews.php">Submit Reviews</a> </li>
<li><a href="addevents.php">Add Events</a> </li>
<li><a href="directory.php">HF Vendors</a> </li>
</ul>
<ul class="secondbar">
<li><a href="contact.html">Contact</a></li>
<li><a href="adratetest.pdf">Advertise</a></li>
</ul>

</div>
</section>
<div id="container">
<div id="listing">
<!-- begin content -->
<div id="content">
<!-- begin form -->
<div id="form">
<input type="text" id="terms" size="40" onkeyup="getScriptPage('show_results','terms','1')" onblur="if ( this.value == '' ) this.value = this.defaultValue" onfocus="if ( this.value == this.defaultValue ) this.value = ''" value="type your search here" />
</div>
<!-- end form -->
</div>
<!-- end content -->
<span class='add'><a href='addevents.php' title='Add Event'>Add Event</a></span><p> ex. search by event, company, keyword, or city</p><br>
<!-- begin counter display -->
<div id="show_results"></div>
<!-- end counter display -->


<p style="font-family:arial;color:#C33;font-size:18px;margin-left: 35px ">
<a href="http://www.hedgevent.com/calendar.php?month=1&year=2012">Jan</a> |
<a href="http://www.hedgevent.com/calendar.php?month=2&year=2012">Feb</a> |
<a href="http://www.hedgevent.com/calendar.php?month=3&year=2012">Mar</a> |
<a href="http://www.hedgevent.com/calendar.php?month=4&year=2012">Apr</a> |
<a href="http://www.hedgevent.com/calendar.php?month=5&year=2012">May</a> |
<a href="http://www.hedgevent.com/calendar.php?month=6&year=2012">Jun</a> |
<a href="http://www.hedgevent.com/calendar.php?month=7&year=2012">Jul</a> |
<a href="http://www.hedgevent.com/calendar.php?month=8&year=2012">Aug</a> |
<a href="http://www.hedgevent.com/calendar.php?month=9&year=2012">Sep</a> |
<a href="http://www.hedgevent.com/calendar.php?month=10&year=2012">Oct</a> |
<a href="http://www.hedgevent.com/calendar.php?month=11&year=2012">Nov</a> |
<a href="http://www.hedgevent.com/calendar.php?month=12&year=2012">Dec</a>
</p>
<br>
<img src="hrline.png" HEIGHT="7" width="630"><br>
<br>
<h1 style="color:#999;margin-left: 205px">Upcoming Events</h1>
<br>
<div id="listing2">
<?php
require 'connect.inc.php';

$query = "SELECT id, event, company, location, city, month, day, year FROM calendar_event WHERE
year > '".date("Y")."' ||
(year = '".date("Y")."' && month > '".date("m")."') ||
(year = '".date("Y")."' && month = '".date("m")."' && day >= '".date("d")."')
ORDER by month,day ASC";

if ($query_run = mysql_query($query)) {
while ($query_row = mysql_fetch_assoc($query_run) ) {
$id= $query_row ['id'];
$event= $query_row ['event'];
$company= $query_row ['company'];
$location= $query_row ['location'];
$city= $query_row ['city'];
$month= $query_row ['month'];
$day= $query_row ['day'];
$year= $query_row ['year'];

$urlevent = str_replace(" ","_", $event);

echo '<div class="where"><a href="http://www.hedgevent.com/details/'.$urlevent.'-'.$id.'.html" class="event">'.$event.'</a></div>'.$company.'<div class="date">'.$month.'/'.$day.'/'.$year.'</div><br>'.$location.', '.$city.'<br><hr style= margin-top:5px;margin-bottom:5px;/>';
}

}
else{
echo mysql_error();
}
?>
</div>
</div>
<div id="vrule"><img src="vrline.png" HEIGHT="30800" width="12"></div>

<div id="sidebar"> <a href=http://www.advent.com/><img src="geneva.gif" HEIGHT="160" width="160"></a><a href=http://www.emirates.com/><img src="emirates.gif" HEIGHT="600" width="160"></a><a href=http://www.http://network.managedfunds.org//><img src="network.jpg" HEIGHT="600" width="160"></a><a href=http://www.convergex.com/><img src="convergex.gif" HEIGHT="600" width="160"></a><a href=http://www.ezecastle.com/><img src="ezecastle.gif" HEIGHT="600" width="160"></a><a href=http://http://www.maplesfundservices.com//><img src="maples.jpg" HEIGHT="600" width="160"></a><a href=http://www.sungard.com/><img src="sungard.gif" HEIGHT="600" width="160"></a><a href=http://www.ogier.com/><img src="ogier.gif" HEIGHT="600" width="160"></a><a href=http://www.scotia.com/><img src="scotia.gif" HEIGHT="600" width="160"></a><a href=http://www.sabrefund.com/><img src="sabre3.gif" HEIGHT="600" width="160"></a><a href=http://www.edhec.edu/><img src="edhec.jpg" HEIGHT="600" width="160"></a><img src="geneva.gif" HEIGHT="160" width="160"><a href=http://http://www.emirates.com/><img src="emirates.gif" HEIGHT="600" width="160"></a><a href=http://www.http://network.managedfunds.org//><img src="network.jpg" HEIGHT="600" width="160"></a><a href=http://www.convergex.com/><img src="convergex.gif" HEIGHT="600" width="160"></a><a href=http://www.ezecastle.com/><img src="ezecastle.gif" HEIGHT="600" width="160"></a><a href=http://http://www.maplesfundservices.com//><img src="maples.jpg" HEIGHT="600" width="160"></a><a href=http://www.sungard.com/><img src="sungard.gif" HEIGHT="600" width="160"></a><a href=http://www.ogier.com/><img src="ogier.gif" HEIGHT="600" width="160"></a><a href=http://www.scotia.com/><img src="scotia.gif" HEIGHT="600" width="160"></a><a href=http://www.sabrefund.com/><img src="sabre3.gif" HEIGHT="600" width="160"></a><a href=http://www.edhec.edu/><img src="edhec.jpg" HEIGHT="600" width="160"></a><img src="geneva.gif" HEIGHT="160" width="160"><a href=http://http://www.emirates.com/><img src="emirates.gif" HEIGHT="600" width="160"></a><a href=http://www.http://network.managedfunds.org//><img src="network.jpg" HEIGHT="600" width="160"></a><a href=http://www.convergex.com/><img src="convergex.gif" HEIGHT="600" width="160"></a><a href=http://www.ezecastle.com/><img src="ezecastle.gif" HEIGHT="600" width="160"></a><a href=http://http://www.maplesfundservices.com//><img src="maples.jpg" HEIGHT="600" width="160"></a><a href=http://www.sungard.com/><img src="sungard.gif" HEIGHT="600" width="160"></a><a href=http://www.ogier.com/><img src="ogier.gif" HEIGHT="600" width="160"></a><a href=http://www.scotia.com/><img src="scotia.gif" HEIGHT="600" width="160"></a><a href=http://www.sabrefund.com/><img src="sabre3.gif" HEIGHT="600" width="160"></a><a href=http://www.edhec.edu/><img src="edhec.jpg" HEIGHT="600" width="160"></a><img src="geneva.gif" HEIGHT="160" width="160"><a href=http://http://www.emirates.com/><img src="emirates.gif" HEIGHT="600" width="160"></a><a href=http://www.http://network.managedfunds.org//><img src="network.jpg" HEIGHT="600" width="160"></a><a href=http://www.convergex.com/><img src="convergex.gif" HEIGHT="600" width="160"></a><a href=http://www.ezecastle.com/><img src="ezecastle.gif" HEIGHT="600" width="160"></a><a href=http://http://www.maplesfundservices.com//><img src="maples.jpg" HEIGHT="600" width="160"></a><a href=http://www.sungard.com/><img src="sungard.gif" HEIGHT="600" width="160"></a><a href=http://www.ogier.com/><img src="ogier.gif" HEIGHT="600" width="160"></a><a href=http://www.scotia.com/><img src="scotia.gif" HEIGHT="600" width="160"></a><a href=http://www.sabrefund.com/><img src="sabre3.gif" HEIGHT="600" width="160"></a><a href=http://www.edhec.edu/><img src="edhec.jpg" HEIGHT="600" width="160"></a><img src="geneva.gif" HEIGHT="160" width="160"><a href=http://http://www.emirates.com/><img src="emirates.gif" HEIGHT="600" width="160"></a><a href=http://www.http://network.managedfunds.org//><img src="network.jpg" HEIGHT="600" width="160"></a><a href=http://www.convergex.com/><img src="convergex.gif" HEIGHT="600" width="160"></a><a href=http://www.ezecastle.com/><img src="ezecastle.gif" HEIGHT="600" width="160"></a><a href=http://http://www.maplesfundservices.com//><img src="maples.jpg" HEIGHT="600" width="160"></a><a href=http://www.sungard.com/><img src="sungard.gif" HEIGHT="600" width="160"></a><a href=http://www.ogier.com/><img src="ogier.gif" HEIGHT="600" width="160"></a><a href=http://www.scotia.com/><img src="scotia.gif" HEIGHT="600" width="160"></a><a href=http://www.sabrefund.com/><img src="sabre3.gif" HEIGHT="600" width="160"></a></div>


</div>
</div>
<footer>
</footer>
</body>
</html>



@charset "utf-8";
*{
margin:0px;
padding:0px;
text-decoration: none;
list-style: none;
}

.wrapper{
max-width:940px;
margin-left:auto;
margin-right:auto;
margin-top:10px;
}

.header {
margin: auto;
margin-top: 20px;
width: 940px;
height:90px;

}
.logo {
background: no-repeat top left;
width: 140px;
height: 90px;
position: relative;
float: left;
margin-bottom:5px;
}
.banner {
background: no-repeat top right;
width: 728px;
height: 90px;
position: relative;
float: right;

}
.navbar {
margin: auto;
margin-top: 20px;
width: 940px;
height: 65px;
background: url(navbar_bg.jpg) no-repeat top center;
font: normal 15px Arial, Helvetica, sans-serif;
color: #666;
}
.navbar.firstbar {
width: 700px;
position: relative;
float: left
}
.navbar .secondbar {
width: 220px;
float: right
}
.navbar .firstbar li, .navbar .secondbar li {
float: left
}
.navbar .firstbar li a, .navbar .secondbar li a {
padding: 0px 15px;
height: 45px;
background: url(sep.png) no-repeat top left;
font-weight: bold;
line-height: 45px;
color: #666;
display: block;
float: left
}
.navbar .secondbar li a {
padding: 0px;
width: 110px;
color: #CCC;
text-align: center
}
.navbar .secondbar li a:hover {
color: #FFF
}
.navbar .firstbar li:hover {
height: 65px;
background: url(arr.png) no-repeat center bottom
}
.navbar .firstbar li:hover .sub_navbar, .navbar .firstbar li:hover .col4, .navbar .firstbar li:hover .col2 {
position: absolute;
top: 65px;
left: 0px;
display: block
}

#container {
width: 870px;
margin: 20px auto;
padding: 35px;
border: 1px solid #cbcbcb;
background-color: #FFF;

-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;

box-shadow: 0 2px 5px rgba(50, 50, 50, 0.1);
-webkit-box-shadow: 0 2px 5px rgba(50, 50, 50, 0.1);
-moz-box-shadow: 0 2px 5px rgba(50, 50, 50, 0.1);
}
#listing{
width:630px;
float: left;
font-weight: bold;
font-family: arial;
color: #73ABCA;
-moz-box-flex:1;
-webkit-box-flex:1;
}
div.where {
font-size: 19px;
font-family: arial;
font-weight:500;
color: #C33
}
div.date{
float: right;
}
#listing2{
width:630px;
font-size: 16px;
font-family: calibri;
font-weight: 300;
color: #999;
float: left;
-moz-box-flex:1;
-webkit-box-flex:1;
}
hr {
border-bottom:1px dotted #E6E6E6;);
}
input {
width: 340px;
padding: 15px;
color: #666;
background: #f5f5f5;
border: 1px solid #ccc;
margin: 0px 0;
font:1em "Lucida Grande", "Lucida Sans Unicode", Arial, sans-serif;
-webkit-border-radius:8px;
-moz-border-radius:8px;
border-radius:8px;
vertical-align: top;

transition: all 0.25s ease-in-out;
-webkit-transition: all 0.25s ease-in-out;
-moz-transition: all 0.25s ease-in-out;

box-shadow: 0 0 8px rgba(81, 203, 238, 0);
-webkit-box-shadow: 0 0 8px rgba(81, 203, 238, 0);
-moz-box-shadow: 0 0 8px rgba(81, 203, 238, 0);
}
#vrule{
max-width:15px;
display:inline;
margin-top:160px;
margin-left: 35px;
}
#sidebar{
max-width:160px;
float: right;
}
span.add a { height:52px; width:250px; text-indent:-9999px; background:url(add.png) bottom no-repeat; float:right; margin-top:-53px; margin-right:0px; }
span.add a:hover { background-position:top; }


a, a:visited { color:#626262; text-decoration:none; }
a:hover { color:#818181; text-decoration:none; }


/* search results */
#results { width:625px; position:relative; margin:20px auto; padding:0; }

/* search results top panel */

/* search results bottom panel */
#results_bottom { width:507px; height:25px; padding:10px 0 0 18px; }
#results_bottom p {margin:0; padding:8px 0; width:600px; height:22px; text-align:center; color:#ff8a00; font-weight:bold; }
#results_bottom a, #results_bottom a:visited { text-decoration:none; color:#73abca; display:inline-block; padding:3px; font-weight:normal; }
#results_bottom a:hover { color:#ff8a00; }

.item { background:#FFF; width:630px; margin:0 8px; padding:8px 0; border-bottom:1px dotted #E6E6E6; }
.details { width:390px; float:left; padding:0 5px 0 10px; font-size:14px; }
.details img { margin:0 8px 0 2px; padding:3px; border:1px solid #e8eff1; }
.title, .title:visited { color:#ff8a00; text-decoration:none; font-weight:bold; font-size:14px; }
.title:hover { color:#e07000; }
.details p { padding:5px 0 0 0; margin:0; }

.details span { font-weight:bold; color:#ff0000; background-color:#ffff00; } /* highlight text */

.played { width:110px; float:right; padding:0 10px 0 5px; height:35px; text-align:center; }
.played span, #played span span { color:#ff8a00; font-family:Georgia, "Times New Roman", Times, serif; font-style:italic; font-size:14px; font-weight:bold; margin:0; padding:0; }
.played p { margin:4px 0; padding:0; font-size:10px; }
.played p span { margin:0; padding:0; font-size:10px; color:#73abca; font-family:Verdana, Geneva, sans-serif; font-weight:normal; font-style:normal; }
}

footer {
background-image: url(footer.png);
background-repeat:repeat-x;
}

Frankie
01-26-2012, 11:40 AM
Hey there,

There are scroll functions in javascript, and when I disable javascript rendering in my browser, the problem doesn't occur. So see what happens if you disable the javascripts in your code one by one.

coothead
01-26-2012, 11:46 AM
Hi there jchrisphonte,

the cause of your problem appears to be this....


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

In that script there is this line of code...


document.getElementById("show_results").scrollIntoView();</script>

If you change it to...


//document.getElementById("show_results").scrollIntoView();</script>

...your page will start at the top. ;)

coothead



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum