How to improve website table of contents

I have completed the draft of an article for my website. My questions are only about the table of contents. When a question in the table of contents is selected, the proper answer in the content below is provided. But the content above the answer in not visible. In other words only a partial web page is given. This results in a large white space at the bottom of the page. There are 21 questions in my table of contents. The farther down the list a selection is made, the greater the amount of content is cut off, and the larger the white space at the bottom of the page.

A reader is not able to scroll to the top of the page using for example, a pc mouse. In addition the browser back button does not work properly. It doesn’t go back to the same place as before the selection is made using the table of contents. It stays on the page rendered after the table of contents selection is made.

I have added “back to top” links positioned after each answer, that work properly. But I do not want readers to be restricted to using those. Based on normal website usage I’m sure that the current set up will be confusing to some people. How can I change my code to resolve these issues? How can I code my page so that the full web page is rendered, while directing the reader to the item selected in the table of contents?

Your help will be greatly appreciated!

https://notesolutions.us/21questionsaboutprivatemortgagenotebuyers.html

The problem is that you are using an ancient hack that was used for creating equal columns about 20 years ago :slight_smile:

This code is the equal column hack:

#column1, #column2 {
    padding-bottom: 32767px;
    margin-bottom: -32767px;
}

It should never have been used in production websites because it completely breaks any in page scrolling to anchors. This was a known bug at the time and users were made aware of this if they used it.

I suggest that instead of the floats and that hack you use flex for the equal columns and the problem will disappear.

e.g.

Try this:


html{
    scroll-behavior: smooth;
}
#wrapper{
    display:flex;
}
#column1, #column2 {
    padding-bottom: 0;
    margin-bottom: 0;
}

You’ll have to keep an eye out for anything misplaced as the wrapper expects only two direct children for the flex to work (which seems to be the case on that page).

1 Like

Thank you Paul, that worked! To test it I made the changes to a copy of my stylesheet and used that for the page in question. Since all my other pages are live, would proper procedure be to make a copy of each page and test them with the revised stylesheet? Or is there a better way?

It’s usually best to test on a local version before you go live but it depends on how many pages you have and how you have them set up.

If you don’t have that many pages then I would bite the bullet and make the change and test live.

Remember to clear cache or use a version number on the css.

Looks like my original testing yesterday did not go far enough. Testing only on the page in question, the concerns I stated were solved by the suggested code changes. Now I see that this change has affected the responsive nature of my webpage and column two is no longer adjusting properly to smaller screens. How do I proceed?

You have a small screen css file in the head and you can just over-ride the flex in that css file.

e.g.In small-deviceupdate.css add this:

#wrapper{display:block;}

Make sure the table of contents is accessible and logically organised. Use bullet points, subheadings, and headings to efficiently organise your text.

Thank you for the encouragement. I definitely believe in accessible websites.

Thank you Paul for your additional input. Using the combination of your code suggestions above got the job done. I have tested all my pages on desktop and smart phone and took my time to validate and clean up some other code issues. On my small-deviceupdate. css stylesheet I noticed that I also had used :

#column1, #column2 {
padding-bottom: 32767px;
margin-bottom: -32767px;
}
So I just deleted that.

I hope that this process helps some others as well.

1 Like

You can easily download a TOC plugin or tell chatgpt to make a custom script for you and it will do all your work

This has nothing to do with the problem. Did you even read the thread?