I'm trying to figure out why the font stylings are completely different on Google Chrome versus Safari on this page: http://brokencartons.com/category.jhtm?cid=90. Chrome reads my stylesheets as I want it to, but Safari just seems to ignore how-it-works.css if you take a look with the inspector. Any idea on why this happens and how I can fix it?
This is what it looks like in Chrome (as I would like it to look like on all browswers):
This is what it looks like in Safari:
Related
I have made a website and while I was making it I was viewing it in Firefox to review changes as I was going along and it was all fine. I finished making the website to the design I was following and put it on my domain to find that if you view it in chrome or other certain browsers it brakes the website and you can only view it properly on other certain ones like Firefox.
ones its broken on:
Google Chrome
Microsoft Edge
Opera
ones it all works on:
Firefox
Internet Explorer
(from my findings)
the website url is https://hily.nl if it helps u can try to view it yourself.
this is what it is meant to look like ( what it currently looks like on Firefox ) :
https://imgur.com/a/qXSw1gZ
this is what it looks like when its broken ( what it currently looks like on google chrome ):
https://imgur.com/a/c71tV71
The first suggestion from here where you have the svg wrapped in <object>...</object> and use data as opposed to src worked when inspecting your site on Chrome and changing attributes.
So there's this problem with the site's UI:
it works fine in Google chrome etc in mobile browsers but when viewing in Apple safari mobile browser, the site's UI gets displaced.
I have tried everything, I guess the margin property is not working in safari. Take a look at Screenshots.
how it looks on android chrome
Second image is how it looks on safari. and it should be like first image on safari as well
First thing I would think of that try to use a css normalizer
https://necolas.github.io/normalize.css/
Along with a css prefixer to ensure the problem is not from the design
https://autoprefixer.github.io/
In case both of these solutions didn't work please provide a JSFiddle Code in order to help you properly.
I am working on my first project and it looks OK in Chrome and Opera. But for some reason the "Signature Chef dish" section, looks off on Firefox. I suspect it has something to do with the grid I implemented there?
How can I fix this?
Also I want to disable view in the IE and it looks like a complete mess. Why?
URL: http://www.chefmarwanslim.com
The code:
https://github.com/Igor2122/marwan-3-0.git
In order to 'block' IE, just check what browser is being used and than change the page accordingly, in the case of IE you just display "Please upgrade to a decent browser". You could also add a link to firefox or chrome in that message if you want to. In order to detect what browser is used, please look at How to detect Safari, Chrome, IE, Firefox and Opera browser?.
Feedback for the site
The site looks nice, but the SIGNATURE CHEF DISH section isn't consistent. It would be better if the tweets and 'normal' pictures where displayed the same way or if you'd only use one of the two.
I have a funky css issue specifically, the font-family. I'm using BrandonTextWeb-Regular.
On the chrome inspector - toggle device to the IPhone 6 plus, it looks like this:
http://imgur.com/N8tNqxr
But for some strange reason on the IPhone itself it looks like this:
http://imgur.com/NVjSArB on both the safari and chrome browser.
At first I thought the font-family was not being loaded on the device, but when I applied it, there was no change so I'm assuming it is loaded and it just looks different on the IPhone device? Is that possible?
On the android phone (S4, chrome browser) it looks like it suppose to be (first image).
So it seem to be only the Iphone.
I also check it out on the Mac Safari and the font is fine as well. So it doesn't seem to be a browser issue.
Thanks in advance.
Edit:
Here's the CSS code that should be implementing this:
body
{
font-family: BrandonTextWeb-Regular;
}
Everything should be BrandTextWeb-Regular/Bold/Italic by default.
The code below render differently between firefox and google chrome (opera and safari render similar to google chrome)
I am not sure what is the cause of it, but I would prefer the firefox rendering, because the parent node of the tree structure spread from the middle rather than top.
Could you point out what I have done wrong here?
Many Thanks & Kind Regards
Andy
The code is located
https://docs.google.com/document/pub?id=1OAsOb-tV29KsNfSQXmgAdvv_2Fac_H8dVm0ktoMT8a8
To see a preview http://jsbin.com/ufamo5/edit
I can't quite tell, but it's probably due to a tag closed improperly, and being interpreted slightly differently by the html parser in Firefox and Chrome