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.
Related
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?
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.
The position:fixed s works perfectly fine when I do not embed a video from Vimeo. Any one knows why and how to work around it? It never used to be like that, only recently.
Does this question's discussion solve your problem? Mac, safari, background-position:fixed and iframe?
Original poster stated: "I worked around this by detecting Mac/Safari and outputting decreased functionality for the people using that system."
I would recommend implementing separate CSS for whichever browsers are causing the issue. Can you provide more details about the problem?
So, i am making a small portfolio site (http://www.cip.ifi.lmu.de/~fritschd/testDebo/),
where i have a BIG box with a BIG font. On mac, everything is fine, on windows however, depending on the browser it can really suck.
Firefox on windows is one of those.
Is there a way to smooth this big font? What other options do i have? (I don't want to use an image for SEO reasons). Other (system) fonts have the same issue btw.
EDIT:
The example can be found at the linked page. The font has a size of ca. 180px, so it's pretty big.
The browser that seems to have problem is the latest build of firefox on windows. If you look at the div with the name in the page, the borders are pixelated. I read that it is an issue with windows true font option and browsers that don't have own settings (i.e. chrome) regarding that. So what are my options at this point?
It's a very well-known problem of using ClearType fonts on Windows, not bound to any specific web browsers. Read this very clearly explanation font-face-loaded-on-windows-look-really-bad-which-fonts-are-you-using-that-rend
This problem should not affect Windows 7 and/or IE9 users.
My suggestion is to implement your big block of text using transparent PNG using the -9999px technique that satisfy the SEO requirements. Have a look at this for the original famous -9999px css-image-replacement-technique/ or this for the newly developed technique Replacing-the-9999px-hack-new-image-replacement/
Unfortunately as far as I know there isn't anything you can do in code that can help, but it can be remedied a bit in your own browser by going to about:config then toggling gfx.direct2d.disabled to true. Hopefully that'll help some.
It's just that I don't really know enough about XHTML, CSS, or Javascript and I'm trying to learn. I know what to do in order to get things to work or look the way I want them to but I'm guessing my methods are not the standard best way to get the results I desire; obviously not because it's not working across all browsers.
I am hoping for someone who is willing to spend a little bit of time with me to go over the code, make recommendations and explain why what I have is not standard for coding. I have some validation errors but they mostly are all in the javascript, which I didn't even write so I honestly have no idea if they are causing trouble or how to fix them if they are.
So my website is pretty simple. I just want to have a professional page where potential employers can see my resume and contact information. When I look at my website in firefox 4 or Safari 5.0.5 everything is perfect. The image of my name and the "contact" tab images both line up with the edge of the main container div. Also the text with the arrow picture line up about 50 pixels to the right so the arrow does not overlap with my resume picture. I use absolute positioning because when I try to use anything else, it gets all messy.
The Problem I am Having: My name logo, contact image tab and "please indulge with..." arrow picture seem to be about 65 pixels off to the left when I view my website in IE8 and Firefox 3.
My website is: nicholasdexter.me
Once again, I'm sorry that this question is geared towards me but I know you all are experts and I don't know where else to go for help. Thank you for reading!
Here is my style sheet: http://nicholasdexter.me/style.css
There's a lot of bugs in older browsers (particularly Internet Explorer 6 & 7). Also, some things just aren't supported in older browsers.
The trick is either to:
- Use something called Graceful Degradation/Progressive Enhancement, in which newer techniques are used, but are used in a way that it won't matter if there's support or not for those things. For example, shadows, if no-one can see them, who cares? If they do, great. The trick is balancing that out.
- Avoid those "new" techniques altogether.
This is nothing new here, and is even a pain for professionals. Microsoft evens hates IE6 now. http://www.ie6countdown.com/ So don't beat yourself up for it. :)
There are alot of resources out there that may help you find the right solution(s) to your problems. Here's one:
http://www.quirksmode.org/css/contents.html
Oh, and feel free to ask questions again. Front-End Development (coding web stuff) is a real challenge some days! :)