www.webdeveloper.com
Results 1 to 6 of 6

Thread: Page shifts with scroll bar...

  1. #1
    Join Date
    Jul 2007
    Posts
    219

    Page shifts with scroll bar...

    To see this problem:
    Start at
    http://www.josiahkiehl.com/resume/resumeGeneral.shtml
    then follow the Education link to
    http://www.josiahkiehl.com/resume/resumeEducation.shtml

    The page shifts 10 or 20px when the scroll bar appears. This bothers my eyes a bit, and I was wondering if there was a way to stop this from happening beyond making the scroll bar appear on all pages, including ones that don't need scrolling.

    Thoughts?
    "...art can lead you to God...if it's not doing that, it's leading you the other way. It's certainly not leading you nowhere."
    Bob Dylan

  2. #2
    Join Date
    Dec 2005
    Location
    American, living in Toronto, ON. CANADA
    Posts
    6,746
    Do you mean that millisecond of white flash when loading the page? I see that in IE, but not in Fx.
    Noted: no errors or warnings. Nice.

    Some superfluous markup though, -why this way?

    <div id="subNav">
    <span class="subNavSlot"><a href="resumeGeneral.shtml">General</a></span>

    <span class="subNavSlot"><a href="resumeEducation.shtml">Education</a></span>
    <span class="subNavSlot"><a href="resumeWork.shtml">Work</a></span>
    <span class="subNavSlot"><a href="resumeVolunteer.shtml">Volunteer</a></span>
    </div>
    When this, -being a 'list', should/could be written as:

    CSS:
    #subNav li a {insert declarations for "subNavSlot" here}
    HTML:
    <ul id="subNav">
    <li><a href="resumeEducation.shtml">Education</a></li>
    <li><a href="resumeGeneral.shtml">General</a></li>
    <li><a href="resumeWork.shtml">Work</a></li>
    <li><a href="resumeVolunteer.shtml">Volunteer</a></li>
    </ul>
    Notably, the way you have it makes text-readers for the visually disabled 'confused'. It does not 'know' that this is a 'list of links'. Instead, it is 'hit or miss' to find the navigation links.

    Also, -I do not see a scrollbar, -anywhere. A scrollbar is 20-px wide, btw. I know that Mozilla 'includes' the width of a scrollbar when calculating the width of an element that requires scrolling. IE does not. Might this be your problem? (Since I see no scrollbar on either IE6 or Fx, cannot say either way).
    Last edited by WebJoel; 08-28-2007 at 05:51 PM.
    I build for: Firefox and tweak for IE

  3. #3
    Join Date
    Jul 2007
    Posts
    219
    Well, shorten the window until one has a scroll bar and the other doesn't. It shifts slightly to compensate for the width of the scroll bar, or at least does when I load it up. It's set to margin: 0 auto; so when the width changes, I'm guessing the "center" it's aligning to shifts a bit.

    Thanks for your suggestion on the links, I'll try to make it work as a list.


    edit: I use Blogger for the main page (http://www.josiahkiehl.com) and blog, and was wondering if there's any solutions for fixing the validation errors there. I plan to make pageTitle a class rather than an id, but beyond that, errors such as inappropriate use of & and such, I don't know if anyone has found a solution for fixing that, as it's generated by Blogger.
    Last edited by Ferret; 08-28-2007 at 07:43 PM.
    "...art can lead you to God...if it's not doing that, it's leading you the other way. It's certainly not leading you nowhere."
    Bob Dylan

  4. #4
    Join Date
    Jul 2007
    Posts
    113
    For blogger you can create your own templates and get pretty clean pages. The way around problems with entities like & is to use utf-8 encoding. With that character set most non-ascii characters will validate.

    Scroll bars are a fact of life. They're so common that most people don't even seen them unless they want to scroll. I've seen workarounds but nobody uses them for long. It's just not worth pushing the river. Don't make your content 100% width is about the best you can do.

  5. #5
    Join Date
    Jul 2007
    Posts
    219
    Quote Originally Posted by mactheweb
    For blogger you can create your own templates and get pretty clean pages. The way around problems with entities like & is to use utf-8 encoding. With that character set most non-ascii characters will validate.

    Scroll bars are a fact of life. They're so common that most people don't even seen them unless they want to scroll. I've seen workarounds but nobody uses them for long. It's just not worth pushing the river. Don't make your content 100% width is about the best you can do.

    If you go to my blog pages, you'll see that I do have a custom template... it's just that the Blogger Markup produces errors such as:

    General entity ... not defined and no default entity
    Cause:

    This is usually a cascading error caused by a an undefined entity reference or use of an unencoded ampersand (&) in an URL or body text. See the previous message for further details.
    Example:
    Bad <a href="http://www.domain.com/cgi?x=123&y=456">
    Good <a href="http://www.domain.com/cgi?x=123&amp;y=456">
    Solution:

    Replace "&" by "&amp;".
    References:

    * W3 validator: http://validator.w3.org/
    "...art can lead you to God...if it's not doing that, it's leading you the other way. It's certainly not leading you nowhere."
    Bob Dylan

  6. #6
    Join Date
    Feb 2003
    Location
    Michigan, USA
    Posts
    5,773
    Quote Originally Posted by Ferret
    The page shifts 10 or 20px when the scroll bar appears. This bothers my eyes a bit, and I was wondering if there was a way to stop this from happening beyond making the scroll bar appear on all pages, including ones that don't need scrolling.

    Thoughts?
    There is nothing you can do about this, since the browsers in question do not show scroll bars when they are not needed. This falls into a broad category of things that matter to page designers and not to users.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles