I've recently noticed that links wrapped around Fontello icons are impossible to click on Safari 5.1.7 (or should I say "latest" Win realese"). I really don't know what could cause the issue (other browser are ok). I was trying to mess with web-inspector and unclik every custom style that could affect Fontello.
Is somebody aware of any Fontello/Safari incompatibilities?
Took me long enough to realize that somehow Google Fonts are causing some sort of issue when set on a parent of "a" containig fontello icon.
For now there is one solution that I've found - "a" has to have extra
font-family: "fontello"
See my fiddle - http://jsfiddle.net/Nippon/Qu6W5/
Is there other way around it?
Related
After spending a while creating an online portfolio, then uploading it, I noticed an issue with one of my sections. On the "Advertisement" section, I noticed it was not displaying the information, just the title. So, I kept on re-pushing the stylesheet.css, even editing it, and it would still look the same. The HTML, CSS, and JS is working how I wrote it. But it is just the section that is not showing. After browsing online and on stackoverflow for an answer, I believe it has to do with Firefox. When using Firebug, I noticed the section's background has been removed, causing the entire section to "disappear." It works just fine on Chrome. I'm not worried about IE, I know that browser has some issues in itself. Anyway, would anyone on here have an idea to resolve this issue, if I can? Or even, what could be causing this issue?
Here is my website to see for yourselves. www.voelkerdesigner.com
Cheers!
It is the opposite for me your entire site works in firefox for me but not in chrome, looking through your code, its being caused by your naming conventions. Namely #advertise
I use the adguard extension in chrome and below is the css it plugs into my html pages to hide ads, so im guessing your using an adblocker in firefox
#adsense_top, #adsensewide, #adspace, #adspace_top, #adspot-300x250-pos-1, #adspot-300x250-pos-2, #adswidget1-quick-adsense, #adswidget2-quick-adsense, #adtext, #adtop, #adv-masthead, #adv-top, #advert1, #advert2, #advertbox3, #advertise, #advertisement1, #advertisetop, #advertising-container, #advertising_wrapper {
display: none!important;
}
Might as well post a random answer on this... As i wont visit posted links by new users.. i'm just gonna guess that your background image might not be 100%...
In general i use background-image instead of background.. Short hand can be a little pain and breaks in some browsers if not perfect.
so i would compare against the following example
background-image:url('images/mybg.jpg');
background-image:url('http://somesite.com/images/mybg.jpg');
Basically alot of people do not use the url and just go straight for a file name or dont quote it.. And have seen that be the problem in the past, so do use the url('') method.
Otherwise if it still fails to work and you know the image is absolute, you would then have some other css that is either over riding your elements background or is preventing it from loading.
Another trick is using your console / inspect element to manually inject the background-image and see if that works... So once the page has loaded in chrome, inspect the element as normal.. And double click on your css property listing as you can add your own styles this way and if it fails, then its not the markup but something else.
I've posted an image of what my Chrome debug tools look like on a fairly standard JQuery Mobile page. I've already figured out that it actually isn't using the :visited style because none of the links are actually visited. I didn't have an :active style so the links were still blue. So I know what I need to do to fix it, but that's not my question. My question is why is it telling me that it is using that style when it is not? Is this a Chrome bug or am I reading the tool wrong?
You are looking at the total inheritence of all classes. To see what final properties are being applied clicked on "computed"
Also this looks like JQUERY mobile so I suspect you are going to run into some issues of very large class paths that are not easy to detect. I posted a few of these up here - one in particular about styling buttons.
I'm using Font Awesome. Sometimes - and I haven't figured out the pattern yet, unfortunately - the icons aren't working in Safari. When this happens, Safari shows the standard icon for a missing character, the outline of a box.
When I reset the browser, Font Awesome works as expected. And then, after some time, it reverts to not working again.
I'm serving Font Awesome from Nginx. That could be relevant, because I originally served these files without the proper headers, which broke Font Awesome in Safari. I'm wondering if maybe somehow Safari could have cached the non-header versions of the files, and maybe somehow keeps using them even when cache is cleared (maybe it's caching fonts somewhere else? But why would it revert to the broken version?).
Okay, this isn't much to go on I know, but any ideas, has anyone else experienced this? Thank you! :)
Edited to add screenshot of broken behavior:
I'm having some trouble with our precious Internet Explorer 8. We are working on a CMS for hotels and everything was just fine until awhile back, when IE8 stopped rendering the frontend properly. This is the public website demo and the top navigation as well as the menustrip are messed up in IE8. Same with the "Payment methods" in the right side of the footer, where small icons for accepted payment methods should have been shown.
The thing is, we do have a special CSS file dealing with IE issues and it's loaded on the website, but it's not being applied to elements by IE. Also, on my local machine other CSS files (not conditional) are being loaded in IE, but the browser doesn't apply the styles.
It's like this:
the CSS file is loaded
the classes are applied to the tags
but the styles are not applied to those classes (!)
Now this behaviour happens on some pages and doesn't happen on others (very few). For example, on this page the menustrip is ok. I read about similar issues in IE isn't rendering the CSS and js dom injected elements don't pick up CSS styling in IE. The thing is this behaviour has been reproduced on other PC's in the office, as well as at home. I'm quite baffled by this.
Has anyone else experienced similar issues? If so, did you fix it? How did you manage to fix it? Thanks to all!
I have one very surprising issue with Google Fonts. This is the site in question.
The title is normaly showing in one ligne but a friend of mine with the same Opera version like me sent me this screenshot. You can see that the title goes in two lines and brakes every think.
It's the first time I use Gfonts and must admit that there is another problem in Firefox too - the font appears so jagged!
Thanks for your advises!
The line break can be prevented simply by adding
h1 { white-space: nowrap; }
Font rendering depends on the font, on the font size, on the browser, on the operating system, on the device, their settings, and probably phase of the moon, too. Some fonts are more difficult than others, so the practical move is to pick up another font.
Unfortunately, not all browsers render all fonts exactly the same way. I guess your problem with the title in Opera is caused by the font being rendered bigger. You can try to target a specific stylesheet for Opera to solve that.
As for the jagged font, well... you have to deal with that, and choose fonts that will look sharp on every browser.
Take a look here : http://css-tricks.com/font-rendering-differences-firefox-vs-ie-vs-safari/
The jagged issue was solved thanks to this Joomla! extention - KC Cufón Font Replacement. A have included just the characters of my text - only 3KB of js and I left the same Google Web Font loading too in order the text to be shown until the extention loads.