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?
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.
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:
.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.)
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.
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.
