Problems with an internal page jump

[slb535]

I’m not sure where to turn with this, and while I know it isn’t css, I’m hopeful someone here can help. Here’s the page:

http://crowisland36pto.org/programsevents/extracurricular-activities/

The links at the top go to a spot in the same page. And then after each section, there is a return to top link. The problem is, the return to top link is only going to the top of the section that was just linked to. And actually, you can’t even scroll to the top of the page . The rest of the page seems to be gone. The link is in the header, just after the tag. (and I’ve tried it at the top of the post as well).

Now the internal page jump is HTML 101. And I have been doing this sort of thing since the mid-90s. (Although, I possibly haven’t done an internal page jump in about 7 years). Does anyone know what is going on or what stupid thing I’m missing? Is there something different about WordPress?

Much obliged for any help.

[TheDoc]

This margin can’t be right:

#leftTitle, #leftTitleMI {

padding: 5px 10px 1000em;

margin-bottom: -999.5em;

}

Not sure why it needs to be there, but removing it makes everything work.

[ptibbetts]

It seems to be working fine for me.
Google Chrome – Mac Mountain Lion.

However the page carries on after the last post (scouting), leaving 2/3 of the page blank. Possibly something to do with the left title column having a 1000em bottom padding?

* Beaten to it, didn’t realise it took me 16 minutes to post that, was watching the tv aha

[slb535]

Thanks so much for taking a look at it. That margin is there because of some problems I was having with the grey in the left column extending to the bottom of the page. I have removed it….And you’re right. That is clearly the problem.

However, if you look at it now, the grey stops right after the text. Do you have any thoughts on getting that column to be the same height as the center column, preferably using CSS?

[slb535]

@Ptibbetts, thanks to you as well. But you caught me mid-edit. If you see my followup to TheDoc, you’ll see I’ve exchanged one problem for another. :)

[TheDoc]

This article is eight years old, but it solves what you’re looking to do: http://www.alistapart.com/articles/fauxcolumns/

I haven’t needed to do this in a long time, perhaps there is another method now.

[slb535]

I have researched this to death. Unfortunately that method doesn’t work with a site that needs to adjust for different screen sizes.

[TheDoc]

Ah, didn’t realize the site was responsive.

http://blog.grayghostvisuals.com/tutorials/faux-column/faux-column-layout.html
https://github.com/redhotsly/responsive-faux-columns

[ptibbetts]

Have you tried setting a min-height:100% for the column?
http://www.tutwow.com/htmlcss/quick-tip-css-100-height/
Set up correctly it should stretch the div to the size of the page, however isn’t so great if you plan on putting something else in underneath, but that doesn’t seem to be a problem.

[slb535]

ptibbets, I have tried that. And I’ve tried it again (if you check now). Clearly I’m not setting up something correctly.

http://crowisland36pto.org/programsevents/extracurricular-activities/

TheDoc, I’ll take a look at those links later, but I think I’ve tried those as well.

I wonder if the fact that I’m using the less framework has anything to do with it.

[slb535]

Actually I haven’t seen that before. I will have time to play with it later this evening. Thank you!

[slb535]

OK, that’s it! Thank you, TheDoc! Now I just need to figure out some of what I screwed up in the responsive part, but that can wait until I have more time.

Thanks!!

[TheDoc]

Glad to have pointed you in the right direction!

[Author]

Posts