SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Evangelist WebMachine's Avatar
    Join Date
    Jun 2007
    Location
    Ontario, Canada
    Posts
    417
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    page breaks briefly on page load - how do I fix it?

    I don't know if this is the correct forum for this problem ... please move it if it isn't.

    I maintain a site to which I am adding a login area to a members only section. The login form sits at the lower righthand corner of the home page.

    If the username/password is incorrect, the user is redirected to the home page. But I want the user to be redirected straight back to the login form at the bottom of the page instead of the default position of the home page so I used the url index.php#members. This works fine, except for a split second I get a flash of a blue rectangle extending below the page. What is causing this and is there any way I can fix it?

    Thank you

    sample1.jpgsample2.jpg

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,296
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Hi WebMachine. Unfortunately, we can't possibly work out what's causing this without a live link. Otherwise, it's like sending your doctor a photo of yourself and asking why you are sick.

  3. #3
    SitePoint Evangelist WebMachine's Avatar
    Join Date
    Jun 2007
    Location
    Ontario, Canada
    Posts
    417
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry, I meant to include the link, but forgot it. Here it is.

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,296
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    OK, the problem is with the gallery. By its very nature, it is quite tall, but your script constrains it to a height of 500px. However, it takes a while for the JS script to kick in when the page loads, and in the meantime, the gallery appears full height. This is a common issue with JS galleries.

    The solution is to place the height setting in the CSS as well. Try something like this:

    Code:
    .gallery {height: 500px; overflow: hidden;}
    It may need some tweaking but try it anyhow, and post back if it's not quite right. (It's hard to test from here, because the temporary styles get wiped on page load.)

  5. #5
    SitePoint Evangelist WebMachine's Avatar
    Join Date
    Jun 2007
    Location
    Ontario, Canada
    Posts
    417
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That worked beautifully. Thanks for your help. I've never really used the overflow attribute before (never thought I had a use for it). But I notice it being used alot by people on this forum. I guess it's time to get up to speed with it.

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,296
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    overflow: hidden generally is best to avoid, as it can make content inaccessible. But it is very handy for forcing a container to wrap around floated content, which is its main use around here.


Bookmarks

Posting Permissions

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