Tabs breaking container

Good evening!

I’ve been working with some tabs lately and I’m starting to get the hang of it but this one has me stumped.

Please can you take a look at the following page: http://cbresources.uk/lycos/toplists.php

You’ll notice the data in the “Tab” is too wide for the container. It’s worth noting this ONLY happened when the data contained in the “Males” tab was entered. If I remove everything from the “Males” tab it loads correctly. I have studied all of the code for the offending tab and the applicable CSS rules but I cannot see anything that would cause it. I used the same method for creating the “Males” content as I did for the first two tabs and neither of those broke the layout.

There’s a lot of HTML/CSS so I can’t paste it here because it breaks the character limit. So it’s probably easier if you visit the page and use the browser’s inspect/firebug feature.

Any help with this would be appreciated.

Hi there,

So I wanted to make this a bit easier for people to help me troubleshoot because I understand linking to a page isn’t ideal.

Therefore, I’ve created a couple of JSFiddles…

Here is one of the code working (Minus the offending tab)

And here is what it looks like after I add the “Males” tab back in:

I’ve narrowed the error down by adding a chunk of code in at a time until it reproduced. It only happened when the tabular data for the “Males” tab was added, which is this part of code:

<table class="toplist-data">
  	<tbody class="toplist-body">
          	<th class="toplist-left"> No. </th>
            <th class="toplist-middle"> Chat Name </th>
            <th class="toplist-right"> Profile Visits </th>
       	<tr class="toplist-row">
                 	<td class="toplist-data-left"> 1. </td>
                    <td class="toplist-data-middle"> SomeRandomChatter </td>
                    <td class="toplist-data-right"> 300 </td>
		</tr>                                            
		<tr class="toplist-row">
                	<td class="toplist-data-left"> 2. </td>
                    <td class="toplist-data-middle"> SomeRandomChatter </td>
                    <td class="toplist-data-right"> 250 </td>
    	</tr>                                            
        <tr class="toplist-row">
                  	<td class="toplist-data-left"> 3. </td>
                    <td class="toplist-data-middle"> SomeRandomChatter </td>
                    <td class="toplist-data-right"> 200 </td>
		</tr>                                            
        <tr class="toplist-row">
                 	<td class="toplist-data-left"> 4. </td>
                    <td class="toplist-data-middle"> SomeRandomChatter </td>
                    <td class="toplist-data-right"> 170 </td>
    	</tr>                                            
        <tr class="toplist-row">
                  	<td class="toplist-data-left"> 5. </td>
                    <td class="toplist-data-middle"> SomeRandomChatter </td>
                    <td class="toplist-data-right"> 150 </td>
    	</tr>                                            
        <tr class="toplist-row">
                 	<td class="toplist-data-left"> 6. </td>
                    <td class="toplist-data-middle"> SomeRandomChatter </td>
                    <td class="toplist-data-right"> 120 </td>
		</tr>                                            
        <tr class="toplist-row">
                 	<td class="toplist-data-left"> 7. </td>
                    <td class="toplist-data-middle"> SomeRandomChatter </td>
                    <td class="toplist-data-right"> 110 </td>
		</tr>                                            
        <tr class="toplist-row">
			       	<td class="toplist-data-left"> 8. </td>
                    <td class="toplist-data-middle"> SomeRandomChatter </td>
            		<td class="toplist-data-right"> 90 </td>
		</tr>                                            
        <tr class="toplist-row">
        			<td class="toplist-data-left"> 9. </td>
                    <td class="toplist-data-middle"> SomeRandomChatter </td>
                    <td class="toplist-data-right"> 50 </td>
		</tr>                                            
        <tr class="toplist-row">
        			<td class="toplist-data-left"> 10. </td>
                    <td class="toplist-data-middle"> SomeRandomChatter </td>
                    <td class="toplist-data-right"> 25 </td>
		</tr> 
   </tbody> 
</table>

The odd thing is - This part of the code uses the exact same CSS rules as the “Female” and “Photo Female” equivalent yet they work perfectly fine - That CSS is as follows:

/* Individual TopList Tables */

table.toplist-data {
	font-size: 14px;
    width: 100%;
}


table.toplist-data th {
	font-weight: bold;
	padding-bottom: 5px;
	margin-bottom: 5px;
}

.toplist-left, .toplist-data-left {
	width: 5%;
	text-align: left;
}

.toplist-middle, .toplist-data-middle {
	width: 70%;
	text-align: left;
	padding-left: 20px;
}

.toplist-right, .toplist-data-right {
	width: 20%;
	text-align: right;
}

I do not see why it would be causing a problem here when it isn’t causing a problem anywhere else. Aside from the actual data inside the tables, each section is pretty much identical.

I’m not sure that the tabs look broken to me. However, the page isn’t responsive and all manner of things begin to break at a width of less than about 1024px.

I’m not worried about the responsiveness right now - I know I still have that to work on. This is very much a work in progress. All I’m interested in right now is why the layout is breaking as it is. I’m looking at it on a 1920x1080 desktop and the table doesn’t fit in the container.

This is how it should look:

This is what it actually looks like:

Clearly, the layout is broken and I can’t seem to figure out why!

My browser is nowhere near 1920px so I shall never see it that way anyway.

If I add a “display:none” attribute to the “left-column” and “right-column” divs (which is one of the steps I will be taking when I go down the responsive path - the layout looks fine!

Do you have any idea why it might be behaving like this?

You should be able to use the JSFiddles I added to see it even if you don’t have a 1920px screen width.

I have been playing a bit with the CSS on your page, and found that your class “TLtabs” has the property white-space set to no-wrap. Its child elements have a normal wrapping again. Disabling this setting seems to remove the issue altogether.

One question though, why did you choose to move the radio buttons 999em to the left, instead of just setting its opacity to 0?

2 Likes

Kavin - You fixed it! Thank you!!!

For the sake of understanding more for the future - Why did that happen? I don’t really know much about the “whitespace” attribute. I’m very much a “learn as you work” kind of guy and I’m learning new skills every day from building this site.

As for the label offset - That’s just how it was in a tutorial I worked through when I created some tabs in an earlier project so I used the same process for this one. Is there an argument in favour of using Opacity?

If you use white-space:nowrap then your content does exactly that and will not wrap. This means that it will either overflow or if inside a table(display:table) it will push the table wider and wider.

Generally you use white-space:nowrap when you only want one line of text and you don’t want it to wrap (usually paired width overflow:hidden and text-overflow:ellispsis to stop long urls breaking out of the box).

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