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.
Related
I am trying to pick colours for my web app but realizing a huge difference in the way safari renders the stylesheet when compared with firefox or chrome. The red colour in the screenshot is supposed to be #ff3366, however it seems safari chooses to render #ff0036.
I am not sure why I can't find any information on this problem, am I crazy?
I am running 10.9.1 Mavericks
thanks!
Sorry, but there’s really nothing you can do about it.
Each browser has its own rendering engine, and they render colors differently.
Users rarely visit a website in more than one browser, and as a result will probably not notice.
As I said, there’s nothing you can do to change it. Just pick a color that looks fine in the different browsers and continue. I wish I could offer you a better answer but that’s really all there is to it!
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 am having an issue with Cufon fonts on my Wordpress site. The top of the font is being cut off. I am using the MySiteMyWay theme called "Method". The issue is visible from a Windows 8 PC using Firefox, IE, or Chrome. I don't have enough reputation yet to post the screenshot, but you can view it at http://i.stack.imgur.com/uZunp.png
Thanks
Are you able to see this on other windows operating systems. I'm using vista and have something similar. Im my case I found this http://kaptinlin.com/support/discussion/comment/13545#Comment_13545 worked. It did however, mess with the overall line height.
I built a website that works great on Firefox, IE, and Chrome. Client goes to a tradeshow and realizes the website menu went bonkers in their iPad.
broken menu http://www.glassdoctordenvermetro.com/wp-content/themes/GDDenverTheme/images/photo.JPG
I tried a website that lets you preview your design by simulating it in case you don't have an iPad (like me). But the problem is it looks fine:
http://ipadpreview.com/previewer?url=http%3A%2F%2Fglassdoctordenvermetro.com%2F
What would suggest I do to figure this out? Is it a problem with the font being different on every browser perhaps? The width of the tab changes based on the menu font and wording but again, it looks fine on all other browsers I tested.
Thank you
Opening it an iPad simulator shows that the font is a much wider font and there's also greater letter spacing. You should specify more options in the font-family tag to have another more condensed font that is available on iOS. You could also bring the font-size down on iOS. The big issue with the testing site you're using is that it's still outputting HTML, the only trustworthy type of site like that would have to generate a screenshot image to ensure consistency.
Here's some fonts to help: http://iosfonts.com/
And 11px works with the existing font.
Alternately, removing the uppercase transform makes it fit.
I have several divs on a webpage that use the IE css filter to create a gradient effect for the background.
The page is viewed primarily in IE6 (I have no other choice unfortunatly) and displays fine on my development machine. I have also tried viewing the page using IETester and the page also displays fine in IE 5.5 to IE 8.
However, when viewing the page on the "live" machine, the gradients don't show up at all. The browser on the "live" machine is IE 6 with sp3. I have checked the div's and they all have "hasLayout" so that isn't the problem.
Are there any settings within IE that would stop filters working or could anybody suggest any other reasons why they would not be showing up. I can't work out why they work in one version of IE 6 but not another.
Unfortunatly I can't link to any examples.
Thanks
The filter features of IE are not built into the browser; they are using external libraries (DLLs). This is what the 'progid' part is all about, and also explains why some of them are so clunky.
If those DLLs are not installed on the client machine, then the filter styles won't work. If it works in some IE6 machines but not others, then this is almost certainly the problem you're encountering.
Theoretically it should be possible for you to fix the problem by installing the missing DLLs.
However, the problem for you is that if the client is anal enough not to have upgraded their browser from IE6 yet, then it's pretty certain that they're not going to want to have you fiddling around on their machines installing unknown (to them) libraries. In any case, you would have to do it for every individual machine.
The bottom line is that realistically this is not going to be an option. Your best bet is to give up trying to make IE6 do fancy stuff, and go back to using background images for your gradients. It's not pleasant to write, but there is a reason why everyone used to do it that way when IE6 was the standard browser.