Tab element acting very strange

Support
#1

In the first screenshot, you can see the first tab behavior of the container and it looks good.
The second screenshot shows what the second tab and all the rest of the tabs container looks like.

Any ideas?

Let me know if you want to see the HTML that in the tabs. It is repeated for all the tabs yet it looks different.

#2

Hello @thoughtsociety,

Thanks for writing in! This issue usually happens when you have inserted an invalid html code. Your html code might have orphaned </div> item or any other <body> or <html> tag that i have spotted in one of your screenshot in another thread. Could you please provide us the html code that you have insert in each tab content so that we can inspect it?

Regards.

#3

Here is the HTML from the tab.

<html>
<style>

.column {
  float: left;
  width: 24%;
  padding: 6px 6px 6px 6px; /* top, rt,bot,left */
  border-width: 2px;
  border-style:outset;
  border-color: lightgrey;
  margin:4px
}

</style>

<body>

<div class="row">
  <div class="column" >
    <img src="https://thoughtsociety.org/wp-content/uploads/2018/12/2018-12-11_09-01-49-150x150.png" alt="Forest" style= width="150" height="150">
    <br>
    <p> <font size="2">  Amazon is one of the greatest companies in the world.</p>
    <br>
    <a href="https://amazon.com"> Amazon  </a>
  </div>

  <div class="column">
    <img src="https://thoughtsociety.org/wp-content/uploads/2018/12/2018-12-11_09-01-49-150x150.png" alt="Forest" style= width="150" height="150">
    <br>
    <p> <font size="2"> Amazon is one of the greatest companies in the world.</p>
    <br>
    <a href="https://amazon.com"> Amazon</a>
  </div>
  <div class="column">
    <img src="https://thoughtsociety.org/wp-content/uploads/2018/12/2018-12-11_09-01-49-150x150.png" alt="Mountains" style= width="150" height="150">
    <br>
    <p> <font size="2"> Amazon is one of the greatest companies in the world.</p>
    <br>
    <a href="https://amazon.com"> Amazon</a>
  </div>
 <div class="column">
   <img src="https://thoughtsociety.org/wp-content/uploads/2018/12/2018-12-11_09-01-49-150x150.png" alt="Mountains" style= width="150" height="150">
  <br>
  <p> <font size="2"> Amazon is one of the greatest companies in the world.</p>
  <br>
  <a href="https://amazon.com"> Amazon</a>
</div>
</div>

</body>
</html>
#4

Hi @thoughtsociety,

Thanks for writing in!

can you please try this HTML and let us know if that works!


<div class="row">
  <div class="column" >
    <img src="https://thoughtsociety.org/wp-content/uploads/2018/12/2018-12-11_09-01-49-150x150.png" alt="Forest" style= width="150" height="150">
    <br>
    <p> <font size="2">  Amazon is one of the greatest companies in the world.</p>
    <br>
    <a href="https://amazon.com"> Amazon  </a>
  </div>

  <div class="column">
    <img src="https://thoughtsociety.org/wp-content/uploads/2018/12/2018-12-11_09-01-49-150x150.png" alt="Forest" style= width="150" height="150">
    <br>
    <p> <font size="2"> Amazon is one of the greatest companies in the world.</p>
    <br>
    <a href="https://amazon.com"> Amazon</a>
  </div>
  <div class="column">
    <img src="https://thoughtsociety.org/wp-content/uploads/2018/12/2018-12-11_09-01-49-150x150.png" alt="Mountains" style= width="150" height="150">
    <br>
    <p> <font size="2"> Amazon is one of the greatest companies in the world.</p>
    <br>
    <a href="https://amazon.com"> Amazon</a>
  </div>
 <div class="column">
   <img src="https://thoughtsociety.org/wp-content/uploads/2018/12/2018-12-11_09-01-49-150x150.png" alt="Mountains" style= width="150" height="150">
  <br>
  <p> <font size="2"> Amazon is one of the greatest companies in the world.</p>
  <br>
  <a href="https://amazon.com"> Amazon</a>
</div>
</div>
<div style="clear: both;"></div>

This CSS to your theme option -> CSS

.column {
  float: left;
  width: 24%;
  padding: 6px 6px 6px 6px; /* top, rt,bot,left */
  border-width: 2px;
  border-style:outset;
  border-color: lightgrey;
  margin:4px
}

Hope this helps!

#5

Yes, that fixed it but how come the first tab always has mis-aligned panels in it even though the code is the same?

this is obviously content mockups to settle on a good card design.

thanks

#6

Hello @thoughtsociety,

There are still some errors in your custom html code. It should be like this instead:

<div class="row">

  <div class="column" >
    <img src="https://thoughtsociety.org/wp-content/uploads/2018/12/2018-12-11_09-01-49-150x150.png" alt="Forest" style= width="150" height="150">
    <br>
    <p style="font-size: 14px;">Amazon is one of the greatest companies in the world.</p>
    <br>
    <a href="https://amazon.com"> Amazon  </a>
  </div>

  <div class="column">
    <img src="https://thoughtsociety.org/wp-content/uploads/2018/12/2018-12-11_09-01-49-150x150.png" alt="Forest" style= width="150" height="150">
    <br>
    <p style="font-size: 14px;">Amazon is one of the greatest companies in the world.</p>
    <br>
    <a href="https://amazon.com"> Amazon</a>
  </div>

  <div class="column">
    <img src="https://thoughtsociety.org/wp-content/uploads/2018/12/2018-12-11_09-01-49-150x150.png" alt="Mountains" style= width="150" height="150">
    <br>
    <p style="font-size: 14px;">Amazon is one of the greatest companies in the world.</p>
    <br>
    <a href="https://amazon.com"> Amazon</a>
  </div>
 
</div>
<div style="clear: both;"></div>

I have removed <font> tag in the code because it has been deprecated along time ago.

Indention is necessary so that you can clearly see which tag is not properly closed to avoid any issues and will not messed up your page layout.

#7

The code you provided does this:

#8

Hi @thoughtsociety,

Please change your column CSS to this,

.column {
    float: left;
    width: 32%;
    padding: 12px 12px 12px 12px;
    border-width: 2px;
    border-style: outset;
    border-color: lightgrey;
    margin: 4px !important;
}

That should fix it. Cheers!

#9

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.