mcUIControls - mcUITabs Cross-Browser Issues

It appears that nothing works cross-browsers without a few tweaks.

These notes are related to mcUITabs and cover some of the issues developing the styles.

Active Tab - part 1

I created a tab controller - something that should have been built-in to browsers. To indicate the selected tab, I just set the font to bold. This works in every browser, except IE 11 (Windows 10) where all the tabs are bold!

The problem is that IE 11 does not support setting fontWeight to initial.

This w3schools page implies that initial has been supported since IE 4!

It is easy to verify the failure using the w3schools font-weight interactive test page. Just click the provided radio buttons - it is obvious that initial is simply not supported!!!

That's when I decided to click on the Read about initial link.

So, it works in Edge, but not in IE - supporting the (braindead) Microsoft browsers is simply not worth the time.

However, this time Microsoft should not take all the heat - w3schools is extremely negligent not to mark every page where initial is an option with a disclaimer that IE does not support that value. Simply providing a link really isn't enough. (But it is better than nothing.)


Alternative ways to remove a style - use either a null string ("") or the keyword null. I have tested these in a number of browsers and With the null string (""), According to w3schools and there is no information on which browsers support it.

At any rate, the w3schools example shown above should be considered an error.

Active Tab - part 2

Simply fixing the problem described in part 1 (above) is not adequate. In both Chrome and Firefox, making the text in the selected tab bold is adequate. However, in Edge and IE on a Windows 10 laptop test system, the change in contrast between bold and normal text is very small. As a result, it is actually difficult to visually determine which tab is selected. Of course, the example below has no problem in any browser - no idea what the difference is (was).

In addition, all the tested browsers change the width of the tab when the text is bold. I find this irritating and non-professional. (non-acceptable !!)

As a result, I modified the component to change the tab background color to indicate the currently selected tab.

To make this easier for designers to modify, I placed the specific colors in a style definition and modified the code to switch styles.


The bold contrast was very pronounced in Chrome, but difficult to distinguish in Edge. In addition, the width's of the tabs changed as they were clicked. (There is no reason for bold text to take up more space than normal text - but that is how the browsers do it.) As a result, I decided to change the tab background color instead.

First I tried background-color:#f4f1de;, but there wasn't enough contrast on Windows 10 (laptop), so I changed it to background-color:#f4f1ed;.

I strongly fear that this design will break when new browsers appear - but I can't predict the future (except to say that I will be a victim).

Once the colors were fixed, there was still too much space between the tab buttons. This is because I define each button on a separate line, and the browser consequently places a space between each pair of buttons.

I tried using float:left, but had a number of issues. The first was that the tab panel was formatted on the same line as the tabs. There were 2 ways to fix this

Unfortunately, both of those solutions left a white line under all the tabs - which is not the look I wanted. Using word-spacing: -4px; (instead of float) provides exactly what I want ... in Windows XP. However, I was never able to get rid of the ugly line in Windows 10. (No browser upgrade is complete until enough application developers are pissed!)

To be clear

allowed the lower panel to start at the correct location, but it placed a solid white line under all the buttons and I prefer to have the active button not have a visible line under it. Therefore, I used to close up the space between the tabs and remove the white line under them. The height (which is one pixel less than the actual button height) allows the selected tab to have no border between it and the tab panel. Unfortunately, when there are multiple tab rows, this does not work the way I want - the tab page and the second row of tabs overlap.

To fix the overlap problem, I moved the height style to the .mcUITab_Button class.

That appeared to work - but only on a page without a raised panel as the background!

An example of the final solution is provided in the basic user guide, while most of the details are here. (Yes, there is enough for a separate page.)

Author: Robert Clemenzi
URL: http:// / Languages / Javascript / mcUIControls / mcUITabs_CrossBrowser_Issues.html