The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Gap in HTML CSS JS Tabs
valtam
post Nov 11 2016, 08:56 AM
Post #1





Group: Members
Posts: 2
Joined: 11-November 16
Member No.: 24,925



I can't for the life of me, find where I've gone wrong with my code.

I'm making it so that our Donators page isn't so long to scroll by having clickable tabs.

IPB Image

The current issue is that with each tab, the gap grows larger between the heading and the displayed donors names.

IPB Image

Does anyone know why this is happening? Thank you.

Source page - https://www.linuxliteos.com/dotest.html
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Nov 11 2016, 01:35 PM
Post #2


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 17,505
Joined: 9-August 06
Member No.: 6



Viewing rendered source I see you have two BR tags after each tab DIV. The script hides the DIV but since the BR tags are outside the DIVs you get more and more of them.

Attached Image

Viewing source the normal way there's only one BR, the non XHTML one. So I guess JavaScript is responsible for the second one. Anyway, you should get rid of them.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
valtam
post Nov 11 2016, 07:09 PM
Post #3





Group: Members
Posts: 2
Joined: 11-November 16
Member No.: 24,925



Thank you. Removing the extra BR tags fixed it.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 24th March 2017 - 05:06 AM