Differents sub menu results with browsers

[Lyser]

Hello,
I have a ok results for the sub menu on firefox, opera, ie and edge but not with chrome :

firefox, opera, ie and edge :

Chrome :

the code i use :

/*** submenu ***/
.desktop .sub-menu {
	background-color:#3859a1;
	border-radius:0px !important;
	padding:0px!important;
	/*width:100%;*/
	align:left;
}
.x-navbar .desktop .sub-menu a {
	color:#fff !important;
	font-size:18px !important;
	font-family:oswald;
}
.x-navbar .desktop .sub-menu a:hover {
	background-color:#4c6aaa;
	color:#f1e902 !important;
}
.masthead-inline .x-navbar .desktop .sub-menu {
    top: 70px;
}
.x-navbar .desktop .x-nav li > a > span::after {
    color: #f1e902;
}

/*** sub menu mobile ***/
.x-btn-navbar {
    margin-top: 11px !important;
    margin-bottom: 11px !important;
}
.x-btn-navbar.collapsed {
    color: #3859a1;
}
.x-navbar .mobile .x-nav li > a {
    font-size: 18px;
}
.x-navbar .mobile .x-nav li > a {
    border: 1px solid #748bbd;
        border-right-color: rgb(116, 139, 189);
        border-right-style: solid;
        border-right-width: 1px;
        border-left-color: rgb(116, 139, 189);
        border-left-style: solid;
        border-left-width: 1px;
    border-left: 0;
    border-right: 0;
    padding: 1em 0;
    color: #b7b7b7;
    background-color: transparent;
}

How to make this code works for every browser ?

[thai]

Hi Lyser,

The sub-menu looks good on my Chrome browser:

• Chrome Version 74.0.3729.169 (Official Build) (64-bit)
• MacOS Mojave Version 10.14.4 (18E226)

It might be the cache issue. Please clear all the cache & cookies of your Chrome then check again.

Regards!

[Lyser]

Thx it was indeed the cache ()

My client is under internet explorer version 9.0.8112.16421 and the buton appear like this :

Here is how he appear on normal browser :

Is there a way to fix this ?

[rad]

Hi @Lyser,

The IE 9 is pretty old version and it’s no longer maintained. It ended last 2017, please check this https://www.essent.com/SupportNotices/Blog/Internet-Explorer-9-and-10-Support-Ends-March-31-2017.htm

The older versions have different features or lacking of some features the modern browser has and it’s something can’t be added through coding.

But, please add this CSS to Theme Options > CSS as temporary fix.

:root .x-anchor-text-primary, .x-anchor-text-secondary {
display: inline-block \ ;
}

That will only fix the background but not other layout issue, it’s because IE9 has no full-support or feature for flex styling.

Thanks!

[Lyser]

Thank you ! =)

[lely]

You’re always welcome!

Cheers.