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 9 of 9
  1. #1
    Regular Coder
    Join Date
    Mar 2009
    Posts
    103
    Thanks
    14
    Thanked 1 Time in 1 Post

    Question div shifting until page reload

    Odd problem I just can't figure out. Allow me to describe it first before I provide a link, because the problem happens ONLY on the first time you view the page -- it corrects itself if you revisit/reload/refresh the page and then you never see the problem again (unless you delete all cookies and cache, etc.)

    (One could say if that's the case, it's not a huge deal -- but if a new visit sees a messed-up page, they may not want to revisit!)

    So, the page has a top-third that goes across the whole page. Then, the main section is divided into three div columns: a main center section bookended by two thinner columns.
    When the page loads, the center div will shift down to start below where the side columns end! Then, when you reload the page, it'll pop up to where it should be on the same horizontal plane.

    I've tried various combinations of CSS floats (and clearing floats), but nothing seems to fix it.

    Here's the link:
    http://www.girlscoutsmoheartland.org...100th-expo.php

    If I can get someone more experienced to say, "You have a problem with X, look to that," that'd be cool as it would give me direction and focus. Right now, I'm just scattershotting at what to look at/for.

    Thanks for any suggestions and help!
    Liam

  • #2
    Regular Coder
    Join Date
    Feb 2012
    Location
    Nebraska, USA
    Posts
    132
    Thanks
    8
    Thanked 19 Times in 19 Posts
    Would it be possible to get a screenshot of what you're seeing? What Browser are you viewing it on?

    I just loaded it Chrome, IE, Safari and FF and I noticed no shifts...

  • #3
    New Coder
    Join Date
    Oct 2011
    Posts
    44
    Thanks
    7
    Thanked 0 Times in 0 Posts
    Same here - it loaded fine with no shifts.

  • #4
    Regular Coder
    Join Date
    Mar 2009
    Posts
    103
    Thanks
    14
    Thanked 1 Time in 1 Post
    I've been able to see it on Firefox 10, IE 9 and 8, and Chrome...whatever the current is. 17?
    Now, this is just so weird. I was able to recreate the error on various browsers on three different PCs before I posted the problem, and now I can't recreate it again... yet I changed nothing!
    Ugh, so frustrating. I need to become a gardener or something.

  • #5
    New Coder
    Join Date
    Sep 2011
    Location
    United Kingdom
    Posts
    74
    Thanks
    2
    Thanked 3 Times in 3 Posts
    Using Firefox 7.0.1 on Linux loads fine no shift .

  • #6
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,957
    Thanks
    9
    Thanked 727 Times in 721 Posts
    I can't see it either. But what you're describing is float drop as if the central column has insufficient space. Looking at your css, while #content has sufficient left margin to accommodate #leftnavexpo, it doesn't allow for the width of #rightnav plus its padding. You can see this clearly in Firebug.

    Like I say, I can't recreate the problem, but you might try increasing the right-margin on #content.

  • Users who have thanked SB65 for this post:

    Mechphisto (02-17-2012)

  • #7
    Regular Coder
    Join Date
    Mar 2009
    Posts
    103
    Thanks
    14
    Thanked 1 Time in 1 Post
    Quote Originally Posted by SB65 View Post
    I can't see it either. But what you're describing is float drop as if the central column has insufficient space. Looking at your css, while #content has sufficient left margin to accommodate #leftnavexpo, it doesn't allow for the width of #rightnav plus its padding. You can see this clearly in Firebug.

    Like I say, I can't recreate the problem, but you might try increasing the right-margin on #content.
    Oh ho, I see! (I need to learn how to use Firebug proficiently.) Thanks for the clue! I made some adjustments and, while I can't confirm it fixed anything, I think it's a design improvement in any case.
    Thanks!!

  • #8
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Quote Originally Posted by Mechphisto View Post
    Oh ho, I see! (I need to learn how to use Firebug proficiently.) Thanks for the clue! I made some adjustments and, while I can't confirm it fixed anything, I think it's a design improvement in any case.
    Thanks!!
    The layout tab on the right of firebug is great for debugging box model issues. Select an element on the page and the Layout tab will show its diminsions with margins, paddings, and borders. You can also adjust those right in the box model simulation and see it's effects.
    Teed

  • Users who have thanked teedoff for this post:

    Mechphisto (02-17-2012)

  • #9
    Regular Coder
    Join Date
    Mar 2009
    Posts
    103
    Thanks
    14
    Thanked 1 Time in 1 Post
    Quote Originally Posted by teedoff View Post
    The layout tab on the right of firebug is great for debugging box model issues. Select an element on the page and the Layout tab will show its diminsions with margins, paddings, and borders. You can also adjust those right in the box model simulation and see it's effects.
    Fascinating! I'd never really looked at that before. (I need a continuing education class on Firebug.) Very useful! Thanks!!


  •  

    Posting Permissions

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