I have built an intro animation using jquery. This looks fine on my machine in all browsers (ff, chrome and safari).
On the clients however, it does not!
Clients screen shot:
http://madmantis.co.uk/debug/screen-shot-client.png
My screen shot:
http://madmantis.co.uk/debug/screen-shot-vs.png
I just cant figure out what is going on here....perhaps something to do with line wrapping in css?
I am on safari 6, he is on safari 5. He reports the same problem in chrome, again I dont see the error.
The website is available at http://dev.system2.co.uk
Thanks for any help
It seems like there has been some changes in the default font rendering method in Safari 6. Here's a little CSS that might work for you:
html {-webkit-font-smoothing: antialiased}
Taken from this topic: Font render safari 6
Related
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 have checked my reference also...
suggest me one answer how to compatibility the glyph icons in firefox and IE also.
When i am using small images in the place of glyphicons, it is working properly.
Have you considered using some other plugin? Font Awesome should work for you, and I'm sure it does work in Firefox and IE (I'm using it in one project now)
just like the title says, my website layout appears to be fine on all other browsers at various zooms, sizes and what not, but not in Safari.
The website adheres to HTML5 and CSS3 standards according to W3Cs validators, and I cannot spot any errors myself.
Website can be found at : http://www.kehza.co.uk/Arcade
It's very basic atm, I want the layout to work on all browsers before I progress. (catch bugs early on).
Edit :-
In Safari at certain zooms, massive white space appears at the bottom of the page, also a border is massively out of place.
See images for difference thanks :)
The latest version of Safari for Windows is 5.1.7, but some of the CSS tags that you are using require Safari 7.0. One example is the box-shadow for the #wrapper element. This is why the website does not display correctly in the Windows version of Safari.
Source: http://caniuse.com/#search=webkit-box-shadow.
It is rumored that Apple has dropped development for Safari on Windows. You will probably want to decide what legacy version of Safari that the website will support. If you are planning on using features of CSS3, then you will want to test the website in a later version of the Safari browser, available on the OSX platform.
Today i upgrade my phone to iOS7 and find out some weird problem .
(blog.niwyclin.org)
This is a test post page of my web site
On desktop browser it looks fine.
I use Responsivator to check, and its perfect, like this (i.minus.com/ipy6XHEepJcvf.png)
but on browser in iOS7 (include safari and chrome)
(i.minus.com/i2B2Ul5f09WL8.png)
(i.minus.com/iDM5uVFIvegKe.png)
it break a word but i don't know why.
It has white-space: pre set.
Any issues with the my css(less) code?
I found out the solution.
From http://www.mobilexweb.com/blog/safari-ios7-html5-problems-apis-review
it seems webkit on iOS 7 changes overflow-wrap property.
so i add pre {overflow-wrap: normal;} manuale, and it's done.
I used many different browsers while I was coding for a new site (Firefox, Chrome, IE8, Opera, Safari, Mobile devices, etc...). It looked the same across all browsers.
I recently uploaded the site onto the server and got to look at it from work, using Internet Explorer 7 and It looks horrible. Elements are floating wild all over the place, but I cant figure out why.
The weird thing is I just looked at it from IE6, and it looks fine, with the exception of unsupported transparencies in PNG's.
If anybody has IE7, or can tell just by the html whats wrong, you can view the site here.
Thanks
Try adding a zoom: 1 to your clearfix style.
Also check out this answer for other options of doing clearfix. What methods of ‘clearfix’ can I use?
There are multiple CSS differences, features that are supported by some version and not by others and so. The following link lists the differences, bugs and so. It might help you for detecting and preventing new "bugs"
CSS Differences in Internet Explorer 6, 7 and 8
You have 15 HTML errors and 8 CSS errors.
IE8 does not act like IE7 in compatibility mode which doesn't act like IE7 which doesn't act like IE6 and none of them act like the other far more modern browsers. Actually, there are 5 rendering modes in IE8 alone.