Responsive Tabs / Posts /

Spacing issue in Safari - different space gap bug

I want to use McTabs for a project but the spacing between tabs is not consistent in Safari as is with other browsers. The spacing between tabs in Safari on your page shows this if you check it with different browsers. I see the consistency in Chrome, FF, and IE.

You can see the issue when viewing this page:

I'm running Windows 7, Safari 5.1.7.
Andy  10 years ago   viewed: 9956    

2 Answers

You can fix the Safari white space bug by one of the following approaches:

Approach #1:

Leaves no space between node elements inside the UL in the HTML code:
So instead of:
<ul id="tabs1" class="mctabs"> <li><a href="#view1">A</a></li> <li><a href="#view2">B</a></li> </ul>
You should:
<ul id="tabs1" class="mctabs"> <li><a href="#view1">A</a></li><li><a href="#view2">B</a></li> </ul>
<ul id="tabs1" class="mctabs"> <li><a href="#view1">A</a></li><!-- --><li><a href="#view2">B</a></li> </ul>

Or approach #2:

Specify different letter-spacing for UL and LI in the mctabs.css:
ul.mctabs { ... letter-spacing:-4px; } ul.mctabs li { ... letter-spacing:normal; }
Milo   10 years ago
I am using and I met the same problem, and struggled for two hours and no luck until found your answer. You are the hero Milo!
I also found your McTabs is much better than from either the look and the functionality. The select by URL  and by anchor is really a big help!
Sarmad   10 years ago


Your name*
(Optional. Used to modify this post afterwords)
+ =  

Ask your Own Question

  • If your question is related to the topic of this post, you can post your question to this page by clicking the "Post a reply" button at left;

  • When you want to start a new page for your question: