I am observing a weird behavior in Firefox. I have a sub-nav menu item labelled 'Faculty and Staff'. Somehow Firefox(latest-always updated) is eating up the 'ff' in staff. The html source looks fine(even in firebug). The menu-item displays correctly in chrome though.
Do we have any idea about this issue? or should i log a bug with firefox?
Screenshot:
http://www.freeimagehosting.net/newuploads/bf945.png
Are you sure it really is two f's?
My guess is that your authoring application transformed the ff into the 'ff' ligature, which your specific font does not have a glyph for.
See here:
ff vs. ff
You could test this, by going into your source and trying to select only 1 of the two f's. If you can only select them both at the same time, it's a single character and thus the ligature.
Yahoooo!
Currently solved by using:
-moz-font-feature-settings: "liga=0";
So this confirms that Firefox was in fact trying to treat that as a ligature.
Thank you all for helping me look in the right direction. Wouldn't have been possible with you guys. I <3 stackoverflow and the community :).
Related
This bug was captured on a Windows machine with Chrome (on my Windows instead of a box it's an "L". I don't understand why these symbols are appearing.
This is my html code:
<p> ... are linked to specific <strong>disease</strong> or physical <strong>traits</strong>. Other sections of DNA ... </p>
Is this a browser specific issue/user specific issue? Or is this a issue with my code (like adding another fallback font)?
Any ideas, suggestions, direction would be greatly appreciated.
Thank you!
From looking at it it seems like you might be using non-breaking spaces. It is unusual that that is a problem for a font, but you might want to just not use them. Most Editors can highlight such "invisible characters" in one way or another. It is worth searching for that for your editor.
Im getting a strange behavior in chrome that it creates squares after whitespace IE
Price: 123234 but this is not after all whitespaces on the site just in situations when i got two strings like Price: and then add the price in my code.
you can se the issues i got here
http://code.google.com/p/chromium/issues/detail?id=108926
I posted this question on the google chrome bugglist and i think somebody placed it in the category of (Labels: -Area-Undefined Area-WebKit WebKit-Fonts), its been like 3 weeks now so i dont expect anybody to answer that question so i thought i would try my luck here. anybody had the same?
This has to be a bugg with their latest release (it worked before it) and how they handle -webkit-font, in my specfic case it was
-webkit-font-smoothing: antialiased;
removing that line fixed my issues. i think its anything with -webkit-font, i use a lot of -webkit for backgrounds and other stuff and that works great..
I have a reoccurring problem with the Android Browser. This is a mobile website NOT a webview. Things as simple as
<li>
Some Text
</li>
<li>
Some Text
</li>
Renders fine everywhere but in Android, where between the list items I get a little rectangle, (like the character not found in this font rectangle) between them. I can only assume that in my code there is a line-break or white space character that is recognized as such everywhere but for Android. Its very annoying and I have yet to find any documentation on the subject. Occasionally I have to resort to the 'Jesus Fish' hack to get rid of it. For those who don't know this hack its an old last resort from ie6's handling of whitespace and linebreaks hack looks like this:
<li>something</li
><li>something</li
><li>something</li>
I am using intelliJ IDE if that helps. Does anyone have any idea why this occurs?
The real correct answer is...
Check your CSS rules. If you have text-rendering:optimizeLegibility then the boxes appear ONLY in Android devices.
I figured this out by chopping my CSS file in half, then half again and so on until the boxes disappeared. Having narrowed down the location in the CSS, I re-added the last bit I deleted and then I deleted rules one at a time. Eventually, I hit the offending CSS rule and narrowed it down further. So, in a nutshell, this is the correct answer.
Before View:
Offending CSS:
After Rule Removed:
There is also this bug report at Google:
http://code.google.com/p/android/issues/detail?id=15067&q=text-rendering&colspec=ID%20Type%20Status%20Owner%20Summary%20Stars
Try editing the same file (with the fix deleting ALL space between lists) on Notepad or Notepad++ and add the spacing and ident with it ane verify again, probably your IDE is adding some character.
If you have notepad++ you might want to convert it to UTF-8 using the Encoding menu, also add the charset definition to the add of the document.
My list ordering appears fine in chrome and FF, but not in IE (all appear as 1's).
I'm not even sure where to begin regarding what's going on.
I spent a little time on a google search, but I'm still not sure where to begin (my keyword combinations didn't bring me what I'm looking for, but a question about formatting problems in IE did bring me to this site, so I thought I'd try; I like the related questions window above the text box).
If any thoughtful readers have tips, tricks, links, suggestions, solutions, I'm interested in why it happens and how to fix it.
Here's the link: http://www.technion.ac.il/~balazs/htms/tops1.3.htm
We're a small enough community to tell folks to look at it in FF or Chrome, BUT I'd rather learn how to do it right . . .
Thank you in advance for any feedback!
Whenever a page doesn't render as I expect, the first thing that I do is run it through the w3c markup validation service.
The following page highlights a number of errors with your HTML:
http://validator.w3.org/check?uri=http%3A%2F%2Fwww.technion.ac.il%2F%7Ebalazs%2Fhtms%2Ftops1.3.htm&charset=%28detect+automatically%29&doctype=Inline&group=0
Fix those up and all should be rosy!
You need to use the li element for lists. Any other tags are not allowed and will not validate. You seems to be using some sort of WYSISYG program or CMS that's wrapping each li in a span that gives them a black font color and a slightly larger size.
<ol>
<span style="font-size: larger; color: rgb(0, 0, 0);"><li>Login and open the program</li></span>
<ol type="a">
<li>Sign the logbook (name and phone number)</li>
...
The reason why in Firefox and Chrome it works is because they're slightly more forgiving.
And will you now excuse me while I rinse the residue image of Comic Sans from my eyes?
This is really weird... When I open the following simple HTML document in Internet Explorer 7.0.5730.11 (on Windows Server 2003 Web Edition SP2)
<html>
<body>
<p>+</p>
</body>
</html>
it shows me a totally blank page. FWIW, this is just a trivial "repro" sample. In real HTML documents, I observed other, even more bizzarre effects caused by presense of the "plus" character that follows a tag.
NB: The problem appears to be extremely ittermittent. Most of the time it does work properly (i.e. displays the "plus" character), and I still can't find any way to reproduce this problem at will.
Some additional details based on recent comments:
There was no server involved. I was opening a file on disk (i.e. used file:// protocol).
The file did not contain anything except five lines shown above. No document type declarations, no character encodings, no nothings.
Looks like a bug in IE. Did anybody encounter the same or similar problem?
NB: I appreciate all the responses received so far, but neither of respondednts encountered this problem. Something tells me that 99.(9)% of StackOverflow audience will not be able to reproduce it. :-)
Does it work if you use the numeric character reference notation?
<html>
<body>
<p>+</p>
</body>
</html>
Does it work if you use a Doctype? IE does get a bit picky if you don't use a doctype (insert no-right-to-be-picky pun here).
By intermittent do you mean using the same code it appears and doesn't? That sounds really strange.
CLOSED - NOT REPRO... er I mean I only get the +, no matter how many times I refresh. I suggest using the HTML entity reference - but this might be a problem with your system/browser if others can't reproduce either.
For whatever it's worth, I just tested this on IE 7 (7.0.5730.13C0) and it consistently displays the "+" even with several refreshes (at least 10 or 12). You didn't mention an OS but in my case it's Windows XP SP2 (Help About displays Version 5.1 (Build 2600.xpsp_sp2_qfe.070227-2300: Service Pack 2). The OS may make a difference in this case.
It's possible that this is due to the server, particularly if it's trying to parse the page as a script. To check:
What HTTP headers do you see when the effect occurs?
When you "View Source" at that point, what do you see?
Does the effect ever occur when you load the page directly as a file?
Does the effect ever occur in other browsers?