Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 9 of 9
  1. #1
    Senior Member diddy's Avatar
    Join Date
    Jun 2008
    Location
    Sydney, Australia
    Posts
    502
    Member #
    16955
    Hi all, I have got a problem with a page I am working on, and I haven't seen it before.
    What happens, is that when I visit it, immediately after it has loaded, the page skips down, so my view is halfway down the page. I don't know what has caused the problem, but I really want to fix it because it is really annoying! :ichatangry:

    So what I want to know, is how do I make my screen view start at the top of the page?

    Any help wold be appreciated.

  2.  

  3. #2
    Senior Member
    Join Date
    May 2003
    Location
    UK
    Posts
    2,354
    Member #
    1326
    I could be wrong but it sounds like you could be viewing a page with an anchor specified.

    Such as http://www.domain.com/file.html#lorem

    Can you confirm or deny this?

    Also can we see the page in question?

  4. #3
    Senior Member diddy's Avatar
    Join Date
    Jun 2008
    Location
    Sydney, Australia
    Posts
    502
    Member #
    16955
    As far as I know, there is no anchor. The HTML and CSS are below.

    The HTML
    HTML 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" xml:lang="en" lang="en"> 
    <head>
    <title>Nick's homepage</title>
    <link rel="stylesheet" type="text/css"
    href="style.css" />
    </head>
    <body>
    <div class="spacer">
    </div>
    <div id="left">
    <div id="navcontainer">
    <p>
    This is the homepage for Nick Every. It contains links to recently visited sites, sites of 
    'notice' and sites that he visits often.
    </p>
    <p>
    There is also a Google search box, and a colour picker and other useful tools. 
    </p>
    <ul id="navlist">
    <li><a href="http://www.google.com.au/">Google Australia</a></li>
    <li><a href="http://images.google.com.au/">Google Images</a></li>
    <li><a href="http://news.google.com.au/">Google News</a></li>
    <li><a href="http://video.google.com.au/">Google Video</a></li>
    <li><a href="http://maps.google.com.au/">Google Maps</a></li>
    <li><a href="http://groups.google.com.au/">Google Groups</a></li>
    <li><a href="http://mail.google.com/">Gmail</a></li>
    <li><a href="http://www.blogger.com.au/">Blogger</a></li>
    <li><a href="http://www.youtube.com/">YouTube</a></li>
    <li><a href="https://portal.det.nsw.edu.au/">DET Portal</a></li>
    <li><a href="http://www.smh.com.au/">Sydney Morning Herald</a></li>
    <li><a href="http://www.weather.smh.com.au/">Sydney Morning Herald Weather</a></li>
    <li><a href="http://www.bom.nsw.gov.au/">BOM</a></li>
    <li><a href="http://www.diddycreations.site90.net/">Diddy Creations</a></li>
    <li><a href="http://www.webdesignforums.net/">Web Design Forums</a></li>
    <li><a href="http://saltyouth.aceboard.com/">Salt Youth</a></li>
    <li><a href="http://diddysexpressions.blogspot.com/">Diddy's Expressions</a></li>
    <li><a href="http://www.tricki.com.au/">Tricki</a></li>
    <li><a href="#">9men</a></li>
    <li><a href="http://www.banking-granville.swisi.wikispace.net/">Banking Granville 
    Wikispace</a></li>
    <li><a href="http://www.pagetutor.com/colorpicker/">Page Tutor's Colour Picker</a></li>
    </ul>
    &copy; 2008 to Nick Every for deisgn of website.
    </div>
    </div>
    <div item="right">
    <fieldset class="item">
    <legend>Google search</legend>
    <img src="google.gif" width="138" height="55" alt="" />
    <p class="main">
    Search <a href="http://www.google.com.au/">Google Australia</a>
    </p> 
    <form method="get" action="http://www.google.com/search">
    <input type="text" name="q" size="25"
    maxlength="255" value="" />
    <input type="submit" value="Google Search" />
    </form>
    </fieldset>
    <div class="spacer">
    </div>
    <fieldset class="item">
    <legend>Colour Chart</legend>
    <p class="main">
    A colour chart you say? Why do I need a colour chart? I'm not a little kid. 
    <br />
    Well you aren't. And I know that. However, this is no ordanary colour chart. It contains 
    all the 256 RBG colours used to make webpages. Quite useful. It works in HTML, XHTML (all 
    doctypes) and CSS. 
    <br />
    It is from <a href="http://html-color-codes.com/">http://html-color-codes.com</a>, in 
    conjunction with <a href="http://www.visibone.com">Visibone</a>.
    <br />
    <br />
    <br />
    <img src="color-chart.jpg" width="480" height="544" alt="" />
    </p>
    </fieldset>
    <div class="spacer">
    </div>
    <fieldset class="item">
    <legend>Computer & Browser Details</legend>
    <!-- iWEBTOOL - www.iwebtool.com - Your Browser Details -->
    <form method="post" name="pageform" 
    action="http://www.iwebtool.com/tool/tools/browser_details/browser_details.php" 
    target="pageframe">
    <input type="hidden" name="action" value="whois">
    <input type="hidden" name="show" value="1">
    <table border="0" style="border-collapse: collapse" width="100%">
    <tr>
    <td width="956" valign="top">
    <table style="border-collapse: collapse" width="100%" class="tooltop" height="50">
    <tr>
    <td>
    <p align="center">
    <input type="submit" value="View my Internet and Browser details!"></td>
    </tr>
    </table>
    </td>
    </tr>
    <tr>
    <td width="956">
    <iframe name="pageframe" width="100%" height="353" class="toolbot" frameborder="0">
    </iframe></td>
    </tr>
    </table>
    </form><p class="main">><a href="http://www.iwebtool.com/" target="_blank">Powered by 
    iWEBTOOL</a></p>
    <!-- iWEBTOOL - www.iwebtool.com - Your Browser Details -->
    <p class="main">
    &nbsp;
    </p>
    </fieldset>
    <div class="spacer">
    </div>
    <fieldset class="item">
    <legend>RSS feeds</legend>
    <p class="main">
    We are still working on this item, it will be up and running soon.
    <br />
    <br />
    <br />
    What this item does, is show (in iframes) some selected RSS feed pages that you might be 
    interested in. 
    </p>
    <div class="feed-iframe-div">
    <span class="compare-1">Site:</span><span class="compare-spacer"></span><span 
    class="compare-2">Spoonman ATFS</span>
    <br />
    <span class="compare-1">Notes:</span><span class="compare-spacer"></span><span 
    class="compare-2">notes</span>
    <br />
    <p class="main">
    <a href="#" target="_blank">Launch in new window/tab</a>
    </p>
    <br />
    <iframe src="http://www.google.com.au" class="feed-iframe-iframe"></iframe>
    </div>
    <div class="spacer">
    </div>
    <div class="feed-iframe-div">
    <span class="compare-1">Site:</span><span class="compare-spacer"></span><span 
    class="compare-2">Spoonman ATFS</span>
    <br />
    <span class="compare-1">Notes:</span><span class="compare-spacer"></span><span 
    class="compare-2">notes</span>
    <br />
    <p class="main">
    <a href="#" target="_blank">Launch in new window/tab</a>
    </p>
    <br />
    <iframe src="http://www.google.com.au" class="feed-iframe-iframe"></iframe>
    </div>
    <div class="spacer">
    </div>
    <div class="feed-iframe-div">
    <span class="compare-1">Site:</span><span class="compare-spacer"></span><span 
    class="compare-2">Spoonman ATFS</span>
    <br />
    <span class="compare-1">Notes:</span><span class="compare-spacer"></span><span 
    class="compare-2">notes</span>
    <br />
    <p class="main">
    <a href="#" target="_blank">Launch in new window/tab</a>
    </p>
    <br />
    <iframe src="http://www.google.com.au" class="feed-iframe-iframe"></iframe>
    </div>
    <div class="spacer">
    </div>
    <div class="feed-iframe-div">
    <span class="compare-1">Site:</span><span class="compare-spacer"></span><span 
    class="compare-2">Spoonman ATFS</span>
    <br />
    <span class="compare-1">Notes:</span><span class="compare-spacer"></span><span 
    class="compare-2">notes</span>
    <br />
    <p class="main">
    <a href="#" target="_blank">Launch in new window/tab</a>
    </p>
    <br />
    <iframe src="http://www.google.com.au" class="feed-iframe-iframe"></iframe>
    </div>
    <div class="spacer">
    </div>
    <div class="feed-iframe-div">
    <span class="compare-1">Site:</span><span class="compare-spacer"></span><span 
    class="compare-2">Spoonman ATFS</span>
    <br />
    <span class="compare-1">Notes:</span><span class="compare-spacer"></span><span 
    class="compare-2">notes</span>
    <br />
    <p class="main">
    <a href="#" target="_blank">Launch in new window/tab</a>
    </p>
    <br />
    <iframe src="http://www.google.com.au" class="feed-iframe-iframe"></iframe>
    </div>
    <div class="spacer">
    </div>
    <div class="feed-iframe-div">
    <span class="compare-1">Site:</span><span class="compare-spacer"></span><span 
    class="compare-2">Spoonman ATFS</span>
    <br />
    <span class="compare-1">Notes:</span><span class="compare-spacer"></span><span 
    class="compare-2">notes</span>
    <br />
    <p class="main">
    <a href="#" target="_blank">Launch in new window/tab</a>
    </p>
    <br />
    <iframe src="http://www.google.com.au" class="feed-iframe-iframe"></iframe>
    </div>
    <div class="spacer">
    </div>
    <div class="feed-iframe-div">
    <span class="compare-1">Site:</span><span class="compare-spacer"></span><span 
    class="compare-2">Spoonman ATFS</span>
    <br />
    <span class="compare-1">Notes:</span><span class="compare-spacer"></span><span 
    class="compare-2">notes</span>
    <br />
    <p class="main">
    <a href="#" target="_blank">Launch in new window/tab</a>
    </p>
    <br />
    <iframe src="http://www.google.com.au" class="feed-iframe-iframe"></iframe>
    </div>
    <div class="spacer">
    </div>
    <div class="feed-iframe-div">
    <span class="compare-1">Site:</span><span class="compare-spacer"></span><span 
    class="compare-2">Spoonman ATFS</span>
    <br />
    <span class="compare-1">Notes:</span><span class="compare-spacer"></span><span 
    class="compare-2">notes</span>
    <br />
    <p class="main">
    <a href="#" target="_blank">Launch in new window/tab</a>
    </p>
    <br />
    <iframe src="http://www.google.com.au" class="feed-iframe-iframe"></iframe>
    </div>
    <div class="spacer">
    </div>
    <div class="feed-iframe-div">
    <span class="compare-1">Site:</span><span class="compare-spacer"></span><span 
    class="compare-2">Spoonman ATFS</span>
    <br />
    <span class="compare-1">Notes:</span><span class="compare-spacer"></span><span 
    class="compare-2">notes</span>
    <br />
    <p class="main">
    <a href="#" target="_blank">Launch in new window/tab</a>
    </p>
    <br />
    <iframe src="http://www.google.com.au" class="feed-iframe-iframe"></iframe>
    </div>
    <div class="spacer">
    </div>
    <div class="feed-iframe-div">
    <span class="compare-1">Site:</span><span class="compare-spacer"></span><span 
    class="compare-2">Spoonman ATFS</span>
    <br />
    <span class="compare-1">Notes:</span><span class="compare-spacer"></span><span 
    class="compare-2">notes</span>
    <br />
    <p class="main">
    <a href="#" target="_blank">Launch in new window/tab</a>
    </p>
    <br />
    <iframe src="http://www.google.com.au" class="feed-iframe-iframe"></iframe>
    </div>
    <div class="spacer">
    </div>
    </fieldset>
    </div>
    </body>
    </html>
    CSS
    Code:
     
    body
    {
    margin: 0px;
    padding: 0px;
    background: #006633;
    }
    a {color: #66ffff; text-decoration: underline;}
    a:visited {color: #66ffff; text-decoration: underline;}
    a:active {color: #66ffff; text-decoration: underline;}
    a:hover {color: #00cc33; text-decoration: none; background: #000000; border: 1px solid #ffff00; padding: 3px 3px 3px 3px;}
    #navcontainer
    {
    width: 12em;
    padding: 0 0 1em 0;
    margin-bottom: 1em;
    font-family: Verdana, Lucida, Geneva, Helvetica, Arial, sans-serif;
    background-color: #90bade;
    color: #333;
    }
    #navcontainer ul
    {
    list-style: none;
    margin: 0;
    padding: 0;
    border: none;
    }
    #navcontainer li
    {
    border-bottom: 1px solid #90bade;
    margin: 0;
    }
    #navcontainer li a
    {
    display: block;
    padding: 5px 5px 5px 0.5em;
    border-left: 10px solid #1958b7;
    border-right: 10px solid #508fc4;
    background-color: #2175bc;
    color: #fff;
    text-decoration: none;
    width: 100%;
    }
    html>body #navcontainer li a { width: auto; }
    #navcontainer li a:hover
    {
    border-left: 10px solid #1c64d1;
    border-right: 10px solid #5ba3e0;
    background-color: #2586d7;
    color: #fff;
    border-top: 0px;
    border-bottom: 0px;
    }
    div#left
    {
    float: left;
    width: 220px;
    display: inline;
    }
    div#right;
    {
    display: inline;
    }
    p.main
    {
    font-family: century gothic;
    color: #ffffff;
    font-size: 70%;
    line-height: 220%;
    }
    div.spacer
    {
    height: 50px;
    }
    fieldset.item
    {
    border: 1px solid #ffffff;
    }
    fieldset.item legend
    {
    border: 1px solid #ffffff;
    font-family: arial;
    color: #ffff00;
    line-height: 100%;
    padding: 5px 5px 5px 5px;
    }
    div.feed-iframe-div
    {
    border: 1px solid #ffff00;
    padding: 10px 10px 10px 10px;
    width: 900px;
    }
    iframe.feed-iframe-iframe
    {
    border: 0px;
    width: 800px;
    height: 600px;
    }
    span.compare-1
    {
    font-family: arial;
    color: #000000;
    font-size: 80%;
    line-height: 220%;
    background: #ffff00;
    padding: 3px 3px 3px 3px;
    font-weight: bold;
    }
    span.compare-2
    {
    font-family: arial;
    color: #ffffff;
    font-size: 80%;
    line-height: 220%;
    background: #990000;
    padding: 3px 3px 3px 3px;
    }
    span.compare-spacer
    {
    padding: 0px 5px 0px 5px;
    }

  5. #4
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,717
    Member #
    5580
    Liked
    718 times
    hey people, can you just give us a link to your problem web sites so
    we can view it in several browsers? We don't all have the time to install
    your HTML and CSS on our computers.

    If you don't have a site online ... put it online and THEN ask your questions.


  6. #5
    Senior Member
    Join Date
    May 2003
    Location
    UK
    Posts
    2,354
    Member #
    1326
    Your HTML is pretty crazy.

    This is probably not causing the jumping, but Inotice you have fieldset tags outside of <form> </form> tags. If I recall correctly they have to be inside them.

    Tip: Instead of trying to sort out the mass of code, perhaps remove all but one fieldset/the content in the fieldset and once you get that working move on to the next.

  7. #6
    Senior Member diddy's Avatar
    Join Date
    Jun 2008
    Location
    Sydney, Australia
    Posts
    502
    Member #
    16955
    Yeah, the HTML was a bit of a mess, I cleaned it up a little.

    I also put it on the internet, images are coming later, but the images aren't the problem.; the problem still occurs with no images. I've tried what you suggested, bfsog, but it still had the same problem.
    Maybe it will be easier for you to help me once it's on the net.

    It's located here:
    http://www.diddy29.110mb.com/homepage.html

    thanks

  8. #7
    Senior Member
    Join Date
    May 2003
    Location
    UK
    Posts
    2,354
    Member #
    1326
    Try what I suggested, only have one section (the first section you have is Google so perhaps leave that in), delete the rest and once you got that working, move on to the next.

    Obviously, if you only have a small section then the page will not jump as there will not be enough content, but once you have added 2 or 3 sections then you will be able to tell where things start to go wrong.

    Edit: I think I know what the problem is.

    You see the last iframe you have, the one with the URL http://www.google.com.au

    If you are familar with Google you know that the search box receives focus when you visit the page. That is what is happening, the code behind the file http://www.google.com.au is setting focus to that text element meaning your page jumps down to it.

    I simply replaced the src of the frame to # to test and when I view the page the page stays at the top.

  9. #8
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,717
    Member #
    5580
    Liked
    718 times
    Andrew is right ... I think it's the Google focus, doing what it's supposed to do.


  10. #9
    Senior Member diddy's Avatar
    Join Date
    Jun 2008
    Location
    Sydney, Australia
    Posts
    502
    Member #
    16955
    Ok, thanks a lot guys it works now.


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 09:29 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com