Screenshot of webpage, Chrome devtools inspection info, and source code
I have a Wordpress site where, for no reason I can find, the text caption under the graphics is being displayed in the browser as two or more lines, even though there's no line break specified in the source code.
As you can see in the screenshot, when I inspect it with Chrome, the console shows a line break in the code before and after the A tag, as well as two quotation marks around the first "line" that don't appear in the browser's render. However, when viewing the source code in Notepad, neither the line breaks nor the quotation marks are there.
The rendered page, with the erroneous line break, appears the same in Chrome, Firefox, and Edge (the last of which has no add-ons installed). This is all on Windows 10. Firefox's inspection panel shows the line breaks in the code, but not the quotation marks.
The page in the screenshot is behind a paywall, but you can see an identical situation at this link [now-obsolete link redacted]. In fact, it appears to be happening on other pages of the site too, for example this one [now-obsolete link redacted], where you can see an even more extreme example of a line break being inserted before and after every link. This started recently - all of these captions appeared normal, as if only a single line, a couple weeks ago at most.
I am totally stumped. What on earth is going on here? Is this somehow the doing of a WordPress theme/plugin? I could try disabling them all, but even if that fixes it, I'm still dying to know what it means for something to show up as multiple lines in the devtools inspector (and in the rendered output) but not in the actual source code.
The problem was that the A tag had the display: block property applied to it. Thanks to #MuhammadZohaib for the quick reply!
This was entirely my own doing - I had added a rule in the stylesheet making A tags in the caption container tables display as blocks as a way to fix some weird display results on the linked graphics themselves, and didn't realize I had allowed it to apply to the A tags in the actual caption text as well (in fact, I had almost completely forgotten about it).
Apparently the A tag still displays on a separate line in the devtools inspector's code display, but that's fine with me as long as the end users don't see it. Still no idea why Chrome's inspector is showing quotation marks around the first sentence (they're still there even after a hard refresh), but that's also apparently not a problem.
Related
I'm working on a Quran web application, I've recently encountered a weird situation, please take a look at the following URL:
http://www.silverlight4web.com/quran/test4.aspx
this is just a sample page which looks fine in Firefox, but Chrome doesn't display it correctly, as you can see, there are some spaces between verses, I'm going to remove these extra spaces. These spaces are randomly distributed between verses, I've also applied word-spacing CSS tag which doesn't seem to be a remedy. What is going wrong here?
Also you can here view a screen shot of the error:
error screen shot
In this URL you can view another copy of this page, but this time with a regular font (Tahoma). It seems that the font is the main source of this problem. Is there any chance to overcome this problem while still maintaining the font?
Basically, in IE11, when you try to print preview (or print, for that matter) this page (and a few others on this site), the page never renders in the preview pane and the number of pages climbs up infinitely: http://www.greatjakes.com/recent-work/
This bug can also be found on pages like these:
http://www.greatjakes.com/news/
http://www.greatjakes.com/news/kegler-brown-website-honored-as-one-of-the-top-sites-of-2014/
http://www.greatjakes.com/blog/the-disappearing-homepage-traffic-is-down-17-on-homepages-of-law-firm-websites/
I've only been able to experience it in IE11. IE8 is fine.
It is not JS-related. If you remove the JS from the page, it still occurs.
If you remove the CSS entirely, it goes away, but that is missing the point.
If you remove (using in-browser developer tools) the HTML elements within the #content-inner > .page block one by one, you'll find that the page actually prints properly when you reduce the number of elements down to about 5 (3 in some pages).
Other than that, I have no idea what is going on! Any help would be appreciated.
We managed to narrow the issue down to a single CSS rule:
#footer {
display: inline-block;
}
We solved the problem by changing "inline-block" to just "inline" within the print-only CSS - but that won't help others fix their own problem because the bug probably manifests itself based on a number of random circumstances. It seems the key was to narrow down the cause. To do this, I simply deleted chunks of CSS until the page actually rendered in print preview. Once I deleted the chunk that was causing the problem, I restored everything and then worked within the critical chunk and deleted the CSS rule-by-rule until it worked. Once I figured out the exact line that was causing the bug, we changed the rule within the print-only CSS (no need to change how it looked in the standard CSS).
After some changes to our site, we are seeing that when certain pages are loaded, the page quickly changes width. This occurs every time on webkit browsers Chrome and Safair, but only rarely on some other browsers.
I have not been able to produce the effect at all on Firefox on Windows, Firefox on Mac, nor IE9 and IE11. It seems to rarely occur on IE8 and IE10. I have not found a pattern yet that causes it to appear on IE8 and IE10.
To understand what might be causing this, it would be good to know if certain styling attributes take an initial value while the page is loading but them assume some other value by the time the page is fully loaded. This could explain what is happening.
I should add that this problem developed after some changes which "should" not have caused this issue. Basically having to do with adding URL rewriting to eliminate duplicate pages. Clearly some side effect is operative.
At the moment we only have the code on development servers, so it would not be that easy to actually see it right now, although that is the obvious first question from a responder. So at this point, the question is more "what generically causes pages to reformat under Webkit."
UPDATE: the problem seems to be traced to Google Translate. When I remove that from the page, the problem goes away. Put it back; problem comes back.
Oddly, it mostly impacts Chrome! IE10 and 11 are exempt, and with even earlier IE versions the problem is much less.
I can readily demonstrate the temporary widening of the page just by reloading the page.
I experimented with trying to put the div containing the translate div instead a container div and setting some attributes on that. So far I have not found something that mitigates the problem.
We have suppressed Google Translate recently because it started adding other junk to the bottom of the page. That other junk is gone but we will continue to suppress it due to this new jumpiness.
I believe there is some clever way to contain the issue, but have no more time for it.
I have confirmed that the issue is definitely caused by Google Translate being on the page.
This must be a content problem, but so far I haven't found it - and it is new, it just started happening on a production site.
Using Chrome Version 31.0.1650.57 m, I can replicate this pretty regularly, and so far, not in any other browser.
the problem is on load, some dom elements are appearing out of order. That is, the dom has div1, div2, table1, div3, table2, etc., but the rendered web page shows table 2 above div1. There is not, as far as I can tell, any css that is causing it to be positioned strangely, and simply refreshing the page makes it render correctly. There are not errors in the console.
One caveat - the html is the output of a conglomerate of software and developers, and is not the best dom structure to begin with. But again, it is fine in all other browsers (so far), and it was fine in Chrome until recently.
Below are two screenshots* - the source, and the rendered output. Note that in the source, the H3 tag with the words "Items In Your Shopping Cart Below" appears above the highlighted element (the table containing the checkout button). But in the rendered html, you can see that the button is above the H3. Again, if I refresh the page, it fixes itself.
I am still troubleshooting this, will keep trying to find the problem, but hoping someone out there might have some idea what could be going on. I suspect it is to do with the carousel of images at the top, but that's been in use, unchanged, for a long time now, so not sure what's changed.
Shoot, I don't have the right creds to post images in my question! Here are links to the images:
https://www.dropbox.com/s/v4prpoinmc83f00/Chrome%20Cart%20Bug%20Source.png
and
https://www.dropbox.com/s/j092l7e1etebz07/Chrome%20Cart%20Bug%20Rendered.png
You can also (probably) reproduce this yourself. Got to www.storkie.com, and add something to your cart. No, I'm not trying to lure you into shopping there - just that's how to get to the problem. Anyway, it may come up fine on first add, but then, if you click the View Cart link at the top, it probably will come up as in the pictures.
Thanks in advance for any suggestions!
I have the same issue on a JSF Primefaces application and I couldn't find any unescaped characters.
The element order on my page changes every third or fourth reload, BUT I have an ajax poll (refresh) every 15 seconds and when this hits the page renders correctly.
I compared the source code before and after this ajax refresh, but there were no differences.
I know this is no solution, but maybe helps to get closer to one.
Edit:
I found an issue in chromium issue tracker regarding this problem.
https://code.google.com/p/chromium/issues/detail?id=322936&q=order&colspec=ID%20Pri%20M%20Iteration%20ReleaseBlock%20Cr%20Status%20Owner%20Summary%20OS%20Modified
In any case, the issue should be fixed in next chrome version.
Just wanted to say that I have the exact same problem. A site that was last updated six months ago has recently started rendering elements out of order in Chrome.
For me it happens 2 out of 3 times I visit the page and it's as if rendering restarts when it hits a specific tag.
My code look kinda like this:
List
<span class="HistoryLink_Separator"> » </span>
<span class="HistoryLink_Last>Item</span>
Chrome renders the page fine until it hits the SPAN with the » (right double angle quotes) then it starts positioning elements at the very top of the page again.
On my home page in ie for some reason it makes a line about 3px high right about the content and right below the bread crumb bar. example.
Second problem, is that it also makes a box on this page
example
On the second example it messes with the user photo moves it into a box that should not be there. Along with the follow forum button. Which should be right below in the box as well. To see how it should look check those pages in any browser but ie. I really could use a fix for this. If its a css thing i have a ie specific css file i can put code in i just cant figure out what i need to put in there.
Also can someone check it out in ie 8 because i don't have it anymore and if there is a different fix maby you could help with that as well.
Looks like you have something going on that's changing your HTML or your DOM based on the browser. Likely you either have some client or server side code that manipulating things in a browser-variant way.
For example, in IE you have two DIVs with ID "boardindex", but I only see one in Chrome. Use F12 and/or Firebug to further investigate the differences. Isolate the code that's causing the differences using a binary search method if necessary.