Pankaj Morajkar Pankaj Morajkar - 6 months ago 19
CSS Question

(Still Unanswered) Tab Width CSS not working in Firefox and Internet Explorer

I have the following css for tabs,

.columbia-browser-blackberry .ui-tabs .ui-tabs-nav li a, .columbia-browser-
chrome .ui-tabs .ui-tabs-nav li a, .columbia-browser-iemobile .ui-tabs .ui-
tabs-nav li a, .columbia-browser-safari .ui-tabs .ui-tabs-nav li a,
.columbia-browser-moz.ui-tabs .ui-tabs-nav li a
padding: .5em 1em;
width: 225px;
word-wrap: initial;
height: 25px;
text-align: center;
display: inline;


* Page Tabs Control
* @TODO guerrics: overflowing tabs
* @param array pages - array of pages (default: map.values(page.subpages))
* @param str tab - name of the selected tab (default:
var pages = $pages ?? map.values(page.subpages);
let pages = [ (p is str) ? wiki.getpage(p) : p foreach var p in pages];
var selectedTab = $tab ??;

// find the active tab page
var activeTab = [ tabpage foreach var tabpage in pages where ==
selectedTab ][0];

// no selected tab found, use first tab
if (!activeTab) {
let activeTab = pages[0];
<div class="mt-tabs ui-tabs ui-widget ui-widget-content ui-corner-all"
<ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-
header ui-corner-all">
foreach(var tabpage in pages) {
<li id=('tab-' class=('ui-state-default ui-
corner-top'..( == ? " ui-tabs-selected ui-state-
active " : ""))>
<a href=(page.uri & {tab:})>
tabpage.title ?? "#" .. (__count + 1)
<div class=("ui-tabs-panel ui-widget-content ui-corner-bottom"..(#pages
> 0 ? "" : "ui-state-empty"))>
if (activeTab) {
var contents = activeTab.contents;
if (contents) {
} else {;

It works for Google chrome, but it doesn't work in Mozilla and Internet Explorer. I am trying to giving the tabs a uniform width of 225px.

Any help would be appreciated?


This is how it worked.

  body .ui-tabs .ui-tabs-nav li a 
   padding: .5em 1em;
   word-wrap: initial;
   height: 25px;
   text-align: center;
   display: inline-block;