mcUIControls mcUITabs Cross-Browser Issues

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.

  tab_button.style.fontWeight  = 'bold'    ; // this works
mcCurrentTab.style.fontWeight  = 'initial' ; // this has no effect in IE 11

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.

Note: The initial keyword is not supported in Internet Explorer 11 and earlier versions.

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.

tablinks[i].style.backgroundColor = "";   ref - works in all browsers
panel.style.maxHeight = null              ref - fails in IE 11 (Windows 10)

I have tested these in a number of browsers and

The null string ("") works in all browsers
The keyword null does not work in IE11 (Windows 10)

With the null string (""),

Chrome provides the best debug experience - it completely removes the style setting.
With Edge, IE and Firefox, the debugger leaves style="" in the source page display.
Firefox also leaves the style in the style list and draws a line thru it.

According to w3schools

the data type of null is an object

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).

bold and normal

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.

Details

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;.

light, unselected #f4f1de  excellent on Windows XP, not enough contrast on Windows 10
light, unselected #f4f1ed  much better for Windows 10
dark, selected    #ece9d8  same as tab page

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

In the tab div style, add overflow: hidden;: This was the method used in the w3schools tab tutorial, but I never figured out how (or why) it worked
In the tab panel div style, add clear: both;: This canceled the previous float:left

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

  clear: both; /* fixes the button float left */

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

.mcUITab_Buttons {
  word-spacing: -4px; /* better than float:left */
  height: 19px;       /* button default height  */
}

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.

.mcUITab_Buttons {
  word-spacing: -4px;       /* better than float:left */
}

.mcUITab_Button {
  background-color:#f4f1ed; /* lighter than the panel */
  border-bottom-style:none;
  height: 19px;             /* button default height */
}

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