Bootstrap Tab Seperator is not visible in Chrome and in IE-9

[shahzadsiddiqui8]

Hi All,

I am using bootstrap tabs and using Separator in middle of each tabs, but it is working in Firefox but not working in Chrome and in IE9.

please suggest me any solutions or any other way around to handle this Separator.

here is working URL:
http://www.metalsauda.com/GlobalLogistics/tabIssue/tabIssue.html

CSS I am using:

.nav-pills.nav-wizard > li:hover a{ background-color: #e3e3e3;color: #333333;}
.nav-pills.nav-wizard > li:hover .nav-wedge {
  border-color: #e3e3e3 #e3e3e3 #e3e3e3 transparent;
}
.nav-pills.nav-wizard > li:hover .nav-arrow {
  border-color: transparent transparent transparent #e3e3e3;
}

.nav-pills.nav-wizard > li.active .nav-arrow {
  border-color: transparent transparent transparent #4954b8;
}
.nav-pills.nav-wizard > li.active .nav-wedge {
  border-color: #4954b8 #4954b8 #4954b8 transparent;
}
.nav-pills.nav-wizard > li.active a {
    background-color: #4954b8;
    color: #fff;
}
.nav-pills.nav-wizard > li.completed a{background-color: #56b58d;}
.nav-pills.nav-wizard > li.completed .nav-arrow{border-color: transparent transparent transparent #56b58d;}
.nav-pills.nav-wizard > li.completed .nav-wedge{border-color: #56b58d #56b58d #56b58d transparent}


.nav-tabs{border-bottom: 1px solid #4249b3;  padding-left: 20px;}

.nav-tabs > li > a {border-radius: 0 0 0 0; color: #333; font-size: 13px; font-weight: bold; margin-right: -1px;}
.nav-tabs > li > a:hover{background-color: #4249b3; border: 1px solid transparent; color: #fff; margin-right:-1px;}
.nav-tabs > li > a:focus{background-color: transparent;  color: #333;}
/*
.nav.nav-tabs li:not(:last-child) a {
    border-right: 1px solid #4249b3;
}*/


.nav-tabs > li {
    /*border-left: 1px solid #4249b3;*/
    border-right: none;
    border-bottom: none;
    border-top: none;   
    border: 0 solid transparent;  
    border-image: url("../images/hor_nav_bg.jpg") 0 0 0 10 / 8px 1px 8px 1px; 
}

.nav-tabs > li:first-child {
 border-image: url("../images/hor_nav_bg.jpg") 0 0 0 10 / 8px 1px 8px 0px; 
}


.nav-tabs > li:first-child + li:not(.active) {
    /*border-left: 1px solid #4249b3;*/
    border-right: none;
    border-bottom: none;
    border-top: none;   
    border: 0 solid transparent;  
    border-image: url("../images/hor_nav_bg.jpg") 0 0 0 10 / 8px 0px 8px 1px; 
}

.nav-tabs > li.active + li:not(:last-child) {
    /*border-right: 1px solid #4249b3;*/
    border-left: none;
    border-bottom: none;
    border-top: none;   
    border: 0 solid transparent;  
    border-image: url("../images/hor_nav_bg.jpg") 0 10 0 0 / 8px 0px 8px 0;  
  }

.nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus{border-color: #4249b3 #4249b3 transparent !important; color: #4249b3; margin-right:-1px;}

please find below screenshot:

thanks…

[ronpat]

Try this, and test thoroughly.

customStyle.css
(line 299)
change the border width from zero to 1.

border:1px solid transparent;

According to caniuse, border-images do not work in IE9.
http://caniuse.com/#search=border-image