Mod My Blog Monday: Tips And Tricks for Fixing Tab Problems

Through testing my blog and helping others with theirs, I've come across a couple of problems that seem to happen sometimes, so I thought I'd share the fixes I used! 

Hint: Test your blog layout on multiple browsers! Often I find that things look fine in Google Chrome and Mozilla, but don't look right in Internet Explorer! Remember that your readers could be using any of these, and more!

Important!! Before attempting this, back up your template!

Tab Problem #1 - Text on tabs is wrapping onto multiple lines!

Go into your "Design" tab, click "Edit HTML" and check the "Expand Widget Templates" tick box.

In the text box, search (press Control & F) for .tabs-inner .widget li, and paste this code somewhere in between the curly brackets that follow:

  white-space: nowrap;

This image shows you what I mean:

The code you're searching for is in orange, the brackets are in green, and the pasted code is in blue.

If you can't find that code in your template, just paste this whole thing somewhere in the CSS of your template:

  .tabs-inner .widget li { white-space: nowrap; }

This snippet forces your tab text to stay on a single line, yay!

Tab Problem #2 - Tabs aren't wrapping to the next line AND/OR tabs are going outside of the area they should be in!

This is a little more fiddly depending on the Blogger template you're using because they're all a little different. If you're having this problem and can't work it out drop me an email with your template's .xml file (the backup file) attached and I'll help if I can! You can email me at marissa.milne [at] gmail [dot] com :)

There are three lines of code you need to search for, then paste this code snippet inside the curly brackets after each. This is the code to paste:

display: inline-block;
position: relative;

These are the three CSS lines to search for:


.tabs-inner .widget li a
.tabs-inner .widget li
.tabs-inner .widget .ul


If you can't find one, add it yourself! Just remember the curly brackets :)


When you're done, you'll end up with something like this, where the lines of code you're searching for are highlighted in green and the pasted code in orange :)

Save it and that should work! If it doesn't just upload your template back up again ;)
Good luck! Let me know if you need any help ^_^