mcUIControls - mcUITabs Cross-Browser Issues
It appears that nothing works cross-browsers without a few tweaks.
These notes are related to
and cover some of the issues developing
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!
tab_button.style.fontWeight = 'bold' ; // this works
mcCurrentTab.style.fontWeight = 'initial' ; // this has no effect in IE 11
It is easy to verify the failure using the
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
So, it works in Edge, but not in IE -
supporting the (braindead) Microsoft browsers is simply not worth the time.
Note: The initial keyword is not supported in Internet Explorer 11 and earlier versions.
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
tablinks[i].style.backgroundColor = ""; ref - works in all browsers
panel.style.maxHeight = null ref - fails in IE 11 (Windows 10)
With the null string (""),
- The null string ("") works in all browsers
- The keyword null does not work in IE11 (Windows 10)
According to w3schools
- Chrome provides the best debug experience -
it completely removes the style setting.
- With Edge, IE and Firefox, the debugger leaves
in the source page display.
- Firefox also leaves the style in the style list and draws a line thru it.
and there is no information on which browsers support it.
the data type of null is an object
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, this example has no problem on 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).
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
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!)
- 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
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
Therefore, I use
clear: both; /* fixes the button float left */
to close up the space between the tabs.
The 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.
word-spacing: -4px; /* better than float:left */
height: 19px; /* button default height */