CSS issue with Chrome, Firefox and IE

[jakovbak]

Hello everyone!
I have a problem with Bootstrap CSS and I can’t figure out how to handle it…
I have decided to start my design from the scratch in CMSMS 2 but also with implementation of Bootstrap and certain parts of Universal theme. I’m working on Mac and Safari and on my configuration everything is exactly as it should be (see img1.jpg). But when I go to Chrome, Firefox or IE, on Mac or PC, it seems like certain parts of my CSS has been overridden for some reason.
In img2.jpg you can see what happens with vertical tabs and its contents and in img3.jpg you can see the mess in yellow “logo-scroller”… Tabs and scroller are fine in Safari as captured in img1.jpg.
If I use developer tools I can see it’s a matter of loading or not loading proper CSS. Even if I use !important on some properties it doesn’t matter - like I have never customised it.
As far as I can understand this issue, Chrome, Firefox and IE are disregarding my CSS for a reason unknown to me. Any ideas from fellow CMSMS users? If you need the code just say it because I’m not even sure which part of code to paste here…
Thank you in advance and best regards!
Jakov

[wmdvanzyl]

I suggest including Normalize.css just make sure that all the browsers are rendering your page the same way. That would be my first step. I suggest Normalize over something like CSS Reset for your project.

You can read more about it here: http://stackoverflow.com/questions/6887 ... -reset-css

Also, don't zoom in too quickly on CSS. Both those features are also JavaScript dependent, so check whether the JS files are accessible as well. Keep an open mind.

[jakovbak]

Thank you wmdvanzyl!
As I can see so far, at least for the "scroller" script, it is working - logos are moving but 'overflow: hidden' property does not exist in computed CSS. When it comes to vertical tabs and its script, I really can't tell - java is not my thing so it could be true, maybe script is the reason. But still, if I use dev tools in browser I can see all of the scripts are loaded and since they are working in Safari I suppose there's something wrong with CSS. I'll check your link and get back with the result.
Regards,
Jakov

[velden]

input:matches([type="button"], [type="submit"])

[jakovbak]

Hmmmm... Can't find anywhere such syntax... Where did it come from?!

[velden]

00_acs_CUSTOM_style

Code: Select all

section.search .search-button:hover {
	background: #fff;
	color: #08206e;
	border-color: #08206e;
	 border-top-width: 1px;
	 border-right-width: 1px;
	 border-bottom-width: 1px;
	 border-left-width: 1px;
	 border-top-style: inset;
	 border-right-style: inset;
	 border-bottom-style: inset;
	 border-left-style: inset;
}

input:matches([type="button"], [type="submit"] {
	 align-items: flex-start;
	 text-align: center;
	 cursor: default;
}

/*====== SEARCH BAR END ======*/

missing closing bracket 'input:matches([type="button"], [type="submit"] {'

[jakovbak]

STUPID, STUPID ME!!! I thought it was an expression from Javascript and completely missed to check the CSS itself! Ohhhh what a mess because the one of the single bracket... How does it work in Safari without it???
Anyway, Velden saves the day again!
And I promise I won't forget to post the link to this site when it's finished.
Thank you all and best regards!