Enhanceable content tabs questions

[jmarrapodi]

There must be a better way! I've been tinkering with enhanceable content tabs all afternoon and just cannot get them to work right.

Question 1:

In this post, @john_torrent was able to get the tabs on the bottom. It looks like he just moved the #fragment-# lines in the unordered list to after the div-id=fragment-# group. But when I try to do that with a page that starts like my before image, they become a stack at the bottom like my after image. I've clearly missed something! I am using buttons within the fragment-# to look a little better than the straight HTML paragraph hyperlinked text. The functionality works just fine at the top.

Question 2:

I was playing around trying to get all the buttons on a single line and changed the image size from 128px to 12%. That was the only change I made, and they would only stack vertically, not go back to horizontal. Is there some extra something I need to do to make that work?

Question 3:

I am finding that the pictures on the buttons are too much so I'm experimenting with text only buttons. These need some cleanup, but they are all exactly the same size originating image. (I made them in Canva and just did duplicate and changed the text and icon.) They are all set to 128px wide, 64px high, but they are spacing differently and three of the buttons are smaller. That's the final image, and the code to match is the last upload. What am I doing wrong here?

Thanks for your help!

[SusanNiemeyer]

I can't be of much help with the coding, but I did want to say that your text buttons are much better than the ones with photos. Once you get them lined up, they will be very sharp. I hope that you might post a screenshot of the final version once you've worked out all of the bugs.

[nwilson7 · Accepted solution]

@jmarrapodi It looks like the issue is the sophistication of what you are trying to put inside each of the fragments.  I think the tables within the fragments may need their own div tags so that they are not trying to take on the enhanceable tabs div.  I removed all the content in all but the first fragment and then everything appears to work.  So, I would start adding back from there and see at what point it breaks.  

I could be completely wrong but I believe the the need for the additional div tag because if you look at how it is rendering (at least when I copied your code) it is trying to apply the enhanceable tabs to the first set of bullets in your 2nd fragment.

I have never tried to force sizes for the tabs before so I am no help there.  I have always let them auto-format.  

I do agree with @SusanNiemeyer that using just words may be much cleaner.

Hope this at least gives you some direction!

-Nick

[jmarrapodi]

Thanks @nwilson7 and @SusanNiemeyer for your comments. That makes sense so I shall try that and see if it helps. I did some additional fiddling and separated out the picture buttons from the picture, which helps. I'm just not sure I want this on two rows. Unless I combine topics I'm not sure if I have another option. It's definitely better than where I started with the text links of the tabs.