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..
Related
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.
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 :).
To start with, I have examples and code here (a site I keep to play with stuff). This is the actual link just in case: http://www.williamrosmus.com/examples/calendar1_wf.html
This is an issue I am having specifically with Firefox (I'm using v3.6), and am wondering what is going on. Requonc displays reasonably and IE8 perfectly.
For a learning exercise I manually created a calendar in xhtml using CSS tables rather than traditional html tags. I set the height and width for the cells to be 100px by 100px. However the top and bottom rows, where some of the cells are empty display way too high in Firefox.
Any suggestions or comments on how to fix this to display correctly or what is going on with Firefox?
Regards,
BillR
Further to this, as per the suggestion by Robin, I logged this as a bug on mozilla.org. Someone just confirmed it there. In case anyone is interested:
https://bugzilla.mozilla.org/show_bug.cgi?id=634489
Just stick inside the empty cells?
I just tested, and this fixes it in Firefox.
I found a page which talks a little more about the problem you're having.
It suggests a CSS alternative; table { empty-cells: show }, see:
https://developer.mozilla.org/en/CSS/empty-cells
However, this doesn't seem to help in Firefox with your <div> tags with display: table-cell.
See discussion in https://bugzilla.mozilla.org/show_bug.cgi?id=634489 and https://bugzilla.mozilla.org/show_bug.cgi?id=569645 for further details. (Using 'vertical-align:top' or 'vertical-align: bottom' on all the table cells should be a reasonable workaround, though.)
I believe this is a bug in Gecko. I trawled through Bugzilla (https://bugzilla.mozilla.org/) but couldn’t find any other people reporting this. It’s probably worth filing a bug with a reduced testcase (or just link in your current one) to see what the devs over there make of it.
Regarding a specific workaround, thirtydot’s suggestion of an is probably your best bet.
When i changed your display of the div.calendar_day to "inline-block" or "block" instead of table-cell and added float:left the height was rendered properly.
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?
While polishing my site I noticed there was some unwanted space between 2 elements, so I decided to remove it. But looking at the source, I found this:
Please check it by yourself, there's no trace of this server-side. Live page here: http://www.playersonline.com.ar/guias
Any help would be appreciated.
Not sure where the mysterious whitespace is coming from, but modifying your #k2Container CSS will solve the problem for you:
#k2Container {
padding:0;
position: relative;
top: -20px; /* adjust as needed */
}
Checked in Firebug, Chrome, Firefox Webmaster Tools, and via validator. Half indicate stray characters. Half don't.
Often times, you can solve an issue like this with Firefox Web Developer Tool's "View Generated Source" which is important for browsers like Firefox that are intelligent enough to fix the problems themselves (unlike IE I might add) Non breaking spaces are a great example of an element that can toy with IE but will never show up on Firefox with this feature. Here's the link if you don't have it: http://chrispederick.com/work/web-developer/
I'd say take 20 minutes to grep your code again for the string " . " If that doesn't find a result, by all means consider Pat's suggestion. That's one heck of a lot of divs to deal with!