Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Jan 2012
    Posts
    84
    Thanks
    49
    Thanked 0 Times in 0 Posts

    Site Loading below navigation bar?

    Hey all,

    My site is acting really weird - two pages are loading with the top of the screen below the header and navigation bar... Been two weeks now and I still cant figure it out... I cut out the php code and it still does this... Any help would be greatly appreciated.

    here is my code and css for one of the pages...

    PHP Code:
    <!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_runmysql_query($query)) {
       while (
    $query_rowmysql_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'];
          
          
    $urleventstr_replace(" ","_"$event);
          
          echo 
    '<div class="where"><a href="http://www.hedgevent.com/eventdetails.php?id='.$id.'&event='.$urlevent.'" class="event">'.$event.'</a></div>'.$company.'<div class="date">'.$month.'/'.$day.'/'.$year.'</div> - '.$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="19000" 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"></div>
        
      
    </div>
    </div>
    <footer> 
    </footer>
    </body>
    </html>
    Here is my CSS...

    Code:
    @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;	
    }

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,672
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello jchrisphonte,
    The first thing you should do is validate your code. Check out the links about validation in my signature line. You have a lot of errors that would be easy to fix.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    New Coder
    Join Date
    Jan 2012
    Posts
    84
    Thanks
    49
    Thanked 0 Times in 0 Posts
    Thanks for your reply excavator..

    I'm new to coding so when I post this into the validator I do not understand how to fix the errors that they produce.

    While I'm sure I have a number of errors - do you know why the page is loading so low?

    JC


  •  

    Posting Permissions

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