Unsupported symbols appearing in lieu of white space - html

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.

Related

Little icon images added to span class inside <li> tags?

Does anyone know how this is being done? They have different icon imagery in each list, but I am not able to find any code associated with this, no icon styling, and when I look at the source code, it just shows the little icons there as well.
I wanted to duplicate it, but just not sure how this is being done:
https://www.happyhydro.com/products/happy-hydro-5-x-15-trellis-netting-with-3-zip-ties
Thanks in advance,
Todd
😳 and so are, like a and %, are just characters (hence why they show up in the source code: They are source code). Your OS may provide a convenient mechanism for inserting them or you can copy/paste them from a character list.
They're emojis added to the text of the span. For example, the first one: https://emojipedia.org/seedling/

html: how to start with a space in title

It seems the starting &nbsp was ignored in the title tag.
Demo below:
<title> pika</title>
I wondered is there a way to hack this, maybe using a foreign character which looks like a space? Any advice?
There are potential reasons for doing this. Especially if search engines isn't a consideration. In a web app, you may want to dynamically change the title for effect, for example.
In the situation I had, we wanted to flash an emoji if you moved to another tab and activity occurred on the hidden tab. Were only using Chrome and this worked for us. Getting the spacing right is still a trick.
The character á Ž is called a Mongolian space and is not strictly considered a space character for classification purposes. I found that if you lead with this, you can put whatever you want after, for example:
<title>á Ž Title</title>
No, you shouldn't format the title in any way.
It's just information to the browser, that it will display outside the page itself. Typically it's shown in the name of the browser or on the tab for the page.
Do you really think spaces is a good solution? What will happen with different screen resolutions? How spaces will behave on tabs?

Website weirdly broken

Hello,
I have the website DaltonEmpire (http://daltonempire.nl, check out for yourself), and when I got home today, it showed error 500. I had made really tiny HTML changes at school via my new CodeAnywhere app, but this was not supposed to happen. After some cleaning up of my PHP, just removing whitespaces, the page loaded.
But now, the background is completely gone and there all all kinds of weird &nspb; tags between my HTML according to Chrome Developer Tools [1], which weren't there before. In my actual code, of course there's whitespace to order my HTML, but that's just spaces, no &nspb;'s, and that never happened before.
Also, the body background is not loaded [2], and the Developer Tools indicate that CSS responsible for the background is not included at all [3] (rather than overwritten or not loaded), even though it is clearly in a <style> block with the body selector [4]. Manually adding that [5][6] bit through the Developer Tools seem to fix this.
Has anyone any idea how this could happen/how this could be solved?
The strangest thing is, I did not change anything specific at all that I can recall. What has caused this?
I need my website to be fixed as fast as possible, as my visitors are students to get their educative documents and in two days is their test week.
Thanks in regard,
Isaiah van Hunen
Attachments:
Weird &nspb;'s
Background not loaded
Background CSS not included?
Background CSS is included
Adding manual Background CSS
Background loads
I can help with 1).
is a formatting entity:
it is the entity used to represent a non-breaking space. It is essentially a standard space, the primary difference being that a browser should not break
(or wrap) a line of text at the point that this occupies.
http://www.sightspecific.com/~mosh/www_faq/nbsp.html
Microsoft Word puts it into HTML files, and so do other WYSIWYG editors.
Unfortunately, CodeAnywhere seems to have the same issue.
Do you have an earlier version of the code that you can open in Notepad/Notepad++/Atom in order to add the whitespace manually there (with ` tags or the like)? That might help.

Android displays rectangle instead of white space

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.

SSRS 2005 Table Border Problems When Rendering to HTML

I have a problem with my matrix not rendering properly in HTML. It's a minor issue but annoying nonetheless.
The problem is that the right borders disappear on the rightmost column. It only happens on cells with data in them. Like so:
alt text http://img193.imageshack.us/img193/7718/med100width.png
Does anyone else experience this? Workarounds? Fixes? Does SSRS 2008 have the same issue?
I have had similar problems, particularly cross browser, with SSRS. The standard of the HTML generated is very poor and hence often is quirky to say the least even in internet explorer.
The client I was working for had strict standards for accessibility and browser compatibility so I looked into improving the standard of what was outputted a lot but didn't get anywhere. As reports are basically XML I was hoping someone somewhere may have written a better engine to transform this into XHTML but it appears not.
I ended up playing around with table size and column widths which in some cases seemed to resolve some of my issues.
Upon further inspection it seems that all numbers are enclosed in divs, with the attribute width=100%. Using the developer tool in IE I saw that removing width=100% restored the borders.
One solution could be to write your own renderer based on the standard html and filter out the annoying little buggers.