As requested, here is the Screen Shot of this page under Apple Chrome. Where as you can see the 2nd and 3rd Columns which should line up next to the 1st column via display: inline-block are broken below it!
Erik, posted the Screen Shots as you requested. So I was wondering do you have a solution to this bizarre problem that ONLY and ONLY happens on Apple Chrome?
OTN, you know these browser makers are supposed to follow Open Standards, so how can a Page look 100% FINE on ALL browsers on ALL devices but then break on one browser on one device? Amazing i mean this page looks 100% fine under Chrome on PC, but it just breaks under Chrome Apple!!!
Anyway, if you have suggestion about how to fix it that will be GREATLY appreciated since after Months of development we want to put this Big new release live.
If not, then I have to put Tables around these inline-block DIVs from breaking.
Because they might differ in how intelligent their browsers are to detect errors and to interpret the intentions of the design and trying to compensate or correct errors.
So, you still have a number of errors I think could make browsers differ in rendering, like:
9…style tag not allowed as child of body
12…div not allowed as child of a span
13…div not allowed as child of a span
16…style tag not allowed as child of body
38…style tag not allowed as child of div
44…style tag not allowed as child of tr
45…div start tag seen in table
Try to fix, if not all, at least these errors and post again.
If the code on the page does not follow the standards, then the standards just are not there whether the browser implements them properly or not.
It’s case of going thourough the validation results one by one, reading what it says the problem is for each line and putting it right.
There may seem a lot, but some structural errors can have a knock-on effect, so fixing one problem may fix a number of errors in some cases.
Again, the page loads 100% OK on ALL Web browsers on ALL Devices, including on Chrome on PCs.
It is only Chrome on Apple that breaks the page, so we can then conclude that the problem is not with the Code of this page but with Apple Chrome.
And BTW, you can run this very page of SitePoint through https://validator.w3.org/ and you will get back many Error reports about it.
Now to add insult to injury, on Apple Chrome which is the ONLY browser that breaks this page, if you activate Developer Tools panel, then then the page is rendered OK!
Actually the page is broken in all browsers. That any browser displays it as you think it should look is only happenstance. Expect GIGO and do your best to avoid that. The first step is to fix as many validation errors as you possibly can.