Bottom border of active tab appears in IE 11

Good old internet explorer! (rolls eyes)

This isn’t the bottom border of the active tab, it is actually the top border of the tab content which would normally be hidden by the bottom edge of the tab.

I have a suggested solution however I’m not 100% sure it will work as I have not tested it yet.

Try adding a CSS rule to add a white solid shadow to the bottom edge of the active tab to mask the part of the top border of the tab content that would normally be hidden.

.responsive-tabs .responsive-tabs__list__item--active,
.responsive-tabs .responsive-tabs__list__item--active:hover {
	box-shadow: 0 1px 0 0 #fff;
}

<Good old internet explorer!>
It never seems to end, does it? =8-)

Thanks very much for your time and suggestion. I’ll give it a try and report back.

Phil

Update …

I tried your suggestion without success, but if I combine it with the following, it seems to work:

.responsive-tabs .responsive-tabs__list__item--active, .responsive-tabs .responsive-tabs__list__item--active:hover {
     background: #fff;
     border-color: #ddd;
     color: #666;
     padding-bottom: 11px;
     margin-top: 0;
     position: relative;
     top: 1px;
}

In the above, change: top: 1px; –> top: 0px;

What else this change affects, I have no idea. Thanks again.

Phil

If that works for you that’s good. In addition to checking that nothing looks wrong in other browsers, also check that it doesn’t affect the accordion view at narrower browser widths.