Web page jumping down issue.

Discussion in 'CSS' started by astup1didiot, Jan 31, 2008.

  1. #1
    In IE7 my website www.civicseo.com when any page is loaded jumps down some of the web page instead of loading at the top. I was reading that CSS could be the cause of this, any suggestions?
     
    astup1didiot, Jan 31, 2008 IP
  2. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #2
    I see the same effect in Opera, Safari and IE6 - meaning most likely the problem stems from your relying on a bug in Gecko's error correction since that seems to be the only browser that displays it right. (which is why the whole 'write for firefox hack for IE' rubbish is exactly that - rubbish)

    UNLIKE most pages I look at the HTML doesn't seem COMPLETELY flawed, though some indentation that makes SENSE might be nice, instead of this random-willy-nilly that it has... validation error appears to be a typo, so that's not it... on to the CSS... It does seem class heavy for such an incredibly simple layout. 17k of HTML for 3k of text content is USUALLY a good indication that there's about ten times the HTML there should be (I'd ballpark that page as not needing more than 6-7k total filesize)

    THIS RUBBISH
        <style type="text/css" media="screen"> /*<![CDATA[*/ <!--
        @import url(template/style.css);
        @import url(template/colors.css);
        --> /*]]>*/ </style>
        <style type="text/css" media="print"> /*<![CDATA[*/ <!--
        @import "template/print.css";
        --> /*]]>*/ </style>
    Code (markup):
    Should probably be axed down to two simple link tags - though neither would cause the issues you are seeing... though that whole 'separation of style from color' rubbish should get the axe - nothing more annoying than having elements styled in two separate stylesheets.

    Ok, looking at style.css - this is a train wreck - multiple conflicting properties, nonsensical source order, overblown reset that is then being reset again on each element, absolute positioning of elements that SHOULD be in flow...

    Yeah, I'd chuck it and start over with semantic minimalist markup, separation of presentation from content... and a HELL of a lot less DIV and classes.
     
    deathshadow, Jan 31, 2008 IP
  3. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Hmmm, strange. It's almost as if the links had a page reference inside them (though they don't).

    First thing I would do is run both the HTML and the CSS through the validator. It will call things it doesn't understand errors (like -moz border-radius) which you can ignore if you know they are safe to use. Border-radius itself is not, as far as I can see, a CSS2 feature. When they both come through as clean as possible, then it's time to go bug-hunting. I haven't heard anything about IE7 have this problem due to CSS alone-- it should be something like cursor-placement (my cursor is always being sent to the seach box by default and I suspect that's why the page goes down-- just enough to show the cursor.)
     
    Stomme poes, Jan 31, 2008 IP
  4. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #4
    It's clearly a template, with the usual 15-stylesheets so people buying the template can make certain types of changes without affecting other stuff (supposedly). De-bugging templates is a pain in the ass because of all the extra, unneeded CSS which is only there in case someone somewhere wants to use some little extra thing. This is how one gets CSS for elements that don't even exist in the HTML.
     
    Stomme poes, Jan 31, 2008 IP
  5. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #5
    DUH.

    Here's your culprit:

    javascript:focusOnSearchField();

    The search field is below the bottom of the page, when you focus it, the page scrolls to try and SHOW IT.

    I started a line-by-line rewrite - just saw that and went 'AH-HAH!'

    You know, for a page about SEO the complete lack of semantic markup and misuse of tags is atrocious.
     
    deathshadow, Jan 31, 2008 IP
    ssandecki likes this.
  6. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #6
    Ah, I wondered if it was the cursor... I almost didn't see it until like the 30th click in IE7 and it caught my eye cause it was blinking.
     
    Stomme poes, Jan 31, 2008 IP
  7. donross

    donross Active Member

    Messages:
    90
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    98
    #7
    this is the javascript code that tells the page to go when the page starts loading...

    below is id of input textbox which the cursor will automatically focus when the page loads...
    if you want to prevent it from jumping just delete the code show below on your html page.

     
    donross, Jan 31, 2008 IP
  8. astup1didiot

    astup1didiot Notable Member

    Messages:
    5,926
    Likes Received:
    270
    Best Answers:
    0
    Trophy Points:
    280
    #8
    I apperciate the help, but there is no need to attack my knowledge on search engine optimizing. As you can clearly see this is a "free" knowledge database script (phpmyfaq) which is created by Germans and this is an english translation, I haven't had the time to debug everything and been working on the basics. I can't even begin to explain all the "short" cuts and crap I've had to do to get this script working properly the way I want.

    And your complaining about CSS and Tags which are almost all orignal from the script :(

    If your interested in being hired to help me clean up the CSS I would gladly talk with you about it. Just send me a PM.

    +REP applied.
     
    astup1didiot, Jan 31, 2008 IP