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.
Related
I have an unusual situation. I am in a transitional state for a website that will eventually be a wiki-like site that uses markdown files to generate documentation. However, for our phase 0 demonstration to upper management, I need to use HTML instead of markdown for advanced layouts. This leads to large portions of the Markdown files being HTML. Generally speaking, this is working fine, but sometimes the "4 spaces means code block" "feature" of markdown means that instead of rendering the page, I just get the HTML pasted to the screen in a <pre>.
So, my question is, how can I turn off the "4 spaces means code block" thing? IMO, this is an idiotic design in the first place, but it's really screwing with my current project!
For example:
I have a banner
<div class="banner detail">
<div class="banner-inner">
...
</div>
</div>
On some pages, this renders exactly as expected. On others, it spits out the "banner-inner" div and everything inside it to the page. Hell, even convincing this editor to display that code snippet instead of processing it took 5 minutes of trial and error poking...
Please, some one help me turn off or get around (without simply not using indenting...) this "feature"!!
Sadly, whether this "feature" can be turned off is relegated to a customization question for the specific software package in use.
On the bright side, I was able to eventually determine that the specific problem I was having was caused by the engine interpreting invalid HTML code (ie, missing a closing tag) as code to be displayed rather than processed. So in the end, seeing this happen actually tended to mean that I had a bug to fix.
I am currently in the process of updating a site to be more responsive/mobile friendly. I have everything working wonderfully with one exception, <pre> formatted code samples. The content is being served by a blog engine, and the difference is entirely between themes. Reverting to the original theme, everything worked great again.
Here is the original display of <pre> code samples properly formatted:
Here is the underlying element's markup as seen by Chrome:
After updating the CSS however, pre formatted code isn't displaying properly, instead it appears like this:
In Chrome, the CSS is virtually identical:
For some reason with the new layout/markup, I simply cannot get the formatting to work properly, even though the styles being applied to the pre tag are effectively identical. I've tried setting white-space: pre and white-space: pre-wrap, at various levels with no effect. I added word-wrap to support resizing existing content down, removing or adding it has no effect. I've tried changing the display: type, the parent container, changing overflow types, etc. All to no effect. I simply can't figure out why the <pre> tags seems to be ignoring the whitespace settings.
FYI, the site link is here if you are interested. The original CSS theme is here, and the new CSS theme is here. You can see a screwed up source example here.
EDIT to add calculated CSS results, although it all appears to be minor formatting differences:
Good/old calculated:
New/broken calculated:
EDIT -- SOLUTION
It ended up being the Render() method of a MasterPage for a BlogEngine theme has logic to strip whitespaces from the rendered results. So CSS and whitespace was a red herring, there was no whitespace to strip.
It seems the formatting in your example got messed up. The whitespace directives doesn't do anything, because there actually is no whitespace left to preserve. I downloaded your page and quickly added some newlines and tabs. Now the first few lines look correctly (just as far as I added formatting):
Here is the diff between the two versions of the html document: http://pastebin.com/KTh9BTGi (Ignore the "no newline at end of file" part). Maybe you added some code on the server that removes newlines and unnecessary spaces?
Well, it seems any HTML tag was not closed properly on the new HTML Theme markup.
If you are editing your blog on the browser, copy/paste the html code into a great text editor with language syntax support and verify if syntax highlight gets crazy at some line.
EDIT: Self-Answered. JSoup does indeed find all image tags.
I'm trying to scrape something off https://www.flickr.com/explore and I ran into a problem.
In the source code, the main images on that website are written in red font, and they don't get found by my JSoup select method (or with the getElementsByTag method). It would be much easier if you guys went to the website and checked the source code yourself because of formatting issues but I'll try to include the bare minimum here.
EDIT: I just tried viewing the source code through chrome and IE, and the image tags are not red, so I'm assuming it's firefox formatting. But the question remains, JSoup doesn't see those image tags. (Second edit at the end of the post)
EDIT 3: Removed my pasted code to put this print screen in: http://i.imgur.com/o8fNPnZ.png
Notice how the red blocks are the main user uploaded images (that I want), and you can see other img tags that are not red (but those are only things like tiny logos). When I run the code
Elements imageElements = doc.select("img");
and then print it, I get all the tags that are not red.
I'm not very experienced with HTML or CSS, is there something specific that I don't know? Or is it something in my code? Is there a way to retrieve the "red" font images as well?
EDIT 2: OK so I narrowed it down to red HTML font in firefox being an error of some kind. If I hover over it, it says: No space between attributes.
Now I'm a little more confused since flickr is a huge website and it obviously still works since I see the images. Can this be some sort of "anti-scraping" thing they have going on? Is there still a way for me to download the images?
Answering my own question.
I was mistaken, JSoup does indeed find ALL the img tags. I'm not 100% sure where my mistake was since I saw it yesterday and have changed my code since then, but I'm assuming it was my misuse of .select which would exclude those images (my code in this question was simplified for argument's sake).
I'll leave this question up because it might help someone else running into errored HTML in source code since there are a few helpful tips in the comments
I'm observing this super weird bug on a news site maybe someone has seen before.
In the html text, if the first characters in a line of text are numerals, they are not displayed by the browser.
The html is coming through via a CMS, which forces the line breaks in the editor, but no tags are inserted. CMS data is XSLT processed into html templates.
When this text is sent to the browser, you can see the new lines are formed (without br tags), and you see that the numerals are still within the content. But these new lines are only honored by the browser if a white-space property is set using one of the "pre" values.
Seems to be related to the white space property as i can use the inspector to add white-space:pre-line/pre-wrap and boom, they appear.
Really keen to hear some thoughts on this, or could this be a possible Chrome bug?
Link to an example article here:
tvnz.co.nz/national-news/flights-cancelled-130km-h-winds-hit-wellington-5508294
In the last paragraph of that article you can read/inspect to see the missing numeral values.
So I really don't understand why this happens, but it has something to with the zoom setting... There are all kinds of articles about chrome bugs w/ the zoom setting, but none seem to address exactly what you were seeing...
If you inspect the page and change the zoom from 1 to .99999 it works... Again, I got the suggestion from this link but I'm at a loss to explain exactly what is broken w/ chrome, but it does seem like a chrome bug...
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.