I'm doing some browser testing with a responsive site, and ran into an issue with Safari that I cant track down the answer to. On the top of their page, they want a clickable phone number so that mobile devices and Skype users can easily call.
On every other browser it looks like it's supposed to:
The Right Way!
In safari, however, I get this:
The Wrong Way!
(rep is still too low to post pics, thus the Gdrive links)
What's going on here? Ive formatted the number portion to look as follows:
<h3 id="phone">Seattle <a id="ph-number" href="tel:2065272000">(206) 527-2000</a></h3>
The link works in every browser, it's just safari that's having issues with the display portion. Can anyone help me out with this (probably simple:) issue?
Adding as an answer for future searches:
Hard to tell from just the HTML unfortunately. Any way to shine some light on CSS? What font family are you using (it may be missing glyphs somehow)? Double-check font-size?
Related
I don't really know how to phrase my problem. My page is working fine and all, responsive included (resizing my PC browser). But when I open the page from a browser in an actual phone, the blue section with icons gets all messed up.
There's apparently nothing wrong with it on the code. The thing that is driving me mad is, and as soon as I change anything from the inspector, it corrects itself (but that's something my users aren't going to do). It doesn't matter whether I change the color of a random text or anything, it reacts correcting itself whenever I make a change in the CSS on the inspector.
Can anyone help me figure this out? I'm attaching a screenshot from my phone before and after changing CSS on the inspector:
In which mobile did you try to show it?
I don't know if you solved it but i try to see your website from my smartphone and i show it correctly.
I am the author of the PasswordCard web site. It has an image of a password card (a low tech way of generating passwords), which is supposed to be credit card sized, on it. The image is included on the page thusly:
<img src="/generatecard.do?number=756b9bb158f9564b&cookie=ok7q0sqrym26" style="width: 85.6mm; height: 53.98mm" alt="Picture of PasswordCard">
As you can see it has an absolute width and height in an attempt to show and print it at exactly credit card size. When I made this a couple of years ago, this worked; every browser printed it at exactly the right size. However now something appears to have changed. Both Firefox and Chrome now print this too large by something like 5% to 10%. Internet Explorer 8 still prints it at the correct size; I have not checked a newer version of IE and would not be surprised if IE11 or Edge also print it too large.
I can't figure out why this happens. I'm not setting any scaling options nor are any such options enabled in the printer settings. I have tried to research the problem but it's hard to google for. I haven't found any information about changes in CSS or something like that which would explain this. I have seen hints that Chrome's way of printing by rendering the page as a PDF first might cause problems like this, but it also occurs in Firefox, so it doesn't seem likely to be the problem. Also it usually causes things to be printed too small whereas in this case it is printed too large.
I'm in Europe so I'm printing on A4 paper.
My questions are:
What has changed in web browsers like Firefox and Chrome in the last couple of years that would explain this?
How can I force web browsers to print an image at a specific absolute size (disregarding any manual or explicit scaling by the user of course)?
Many thanks for any help you can give!
this is the picture that my page looks like
this is the picture when i want to print my page
The height is different, when the css class is the same. I really don't know about this problem. Is there anyone experience this problem. FYI, I am using google chrome. When I use firefox, this issue doesn't appear, but the other thing is a mess and I want to do this on google chrome. Please help me.
I am running Thesis 1.8.5 on Wordpress and here is my site www.texashomeloanpro.com . Because I am kind of new to this whole web-design thing, it just occurred to me to check my site in both Internet Explorer and Safari browsers. Unfortunately, my site looks horrible in both of these. More specifically, my homepage fonts are showing up too large, my homepage sidebars aren't positions correctly, and some of my rounded edges aren't showing up.
I know this is quite a laundry-list of CSS issues but if someone could just give me some general direction I would really appreciate it.
Not sure if you've tried this already, but a CSS reset script usually does the trick for me.
It might break your webpage on the browser you are using, but the goal is to make the webpage look consistent across all browsers.
I'm developing a website and for the first time i found problems using cufon... if you think u know about cofon check this..
http://universite.jvsoftware.com
If you open with firefox and IE, you will notice in the navigation bar, when you over the titles will appear a border (actually is an image) but if you open it with chrome or safari, that image doesnt appear.... the cufon script is easy to find in the source code, also the css.
Let me know if you know how to fix that!!
Kind Regards
Not really a solution to your Cufon problem, but I would just recommend going with a different font replacement tool altogether if you can help it. I like the performance of Typekit or Google Fonts much better than Cufon, but that's just a matter of preference.