I've a page whose styling gets messed up in Chrome (no problem for Safari and others). It seems that it inserts for a reason some strange whitespace in the HTML that ruins my layout at the top of the page and in other places.
If I choose to see the source of my PHP page, what I see is:
<body><div id="header-outer">
<div id="header" class="container">
<div class="row">
<div id="site-logo" class="span5">
<img src='logo.png' />
</div> ... etc ...
(I've modified the PHP to have no space whatsoever between BODY and DIV). But when I open the developer tools what I see is:
<body>
"" <- why?
<div id="header-outer> etc. etc..
If I manually delete the "", the layout just goes fine. What is happening here? I'm puzzled.
EDIT: you can see the page at http://bit.ly/ZkZxVG
EDIT: I've tried to disable all extensions, but with no effect on my issue.
Hint: I'm using bootstrap and JQuery. Could they mess with the code?
It's really weird, you might have some undesired char within your file, try removing <body><div id="header-outer"> and rewrite it down.
Try encoding your file with utf8 No BOM too and see if it resolves the problem.
More infos about utf8 BOM here.
Edit
Thats not white space, they must be a physical charter in there. This might not be displayed on your screen, but just press delete and backspace until you have the next element in your markup.
white space in HTML is completely ignored by the browser, it does not render it. Looking in Firebug you have "" rendered when editing the item.
Related
This is a weird "bug", I cant reproduce it always, but on the fiddle test case seems to fail more often. This is ONLY showing in chrome/windows, I couldn't reproduce it in IE at least and someone confirmed it doesn't happen in chrome/Linux.
The fiddle: http://jsfiddle.net/u25zr/2/
As you can see, text is not horinzontally aligned.
A weird thing: if you right-click on the text, click "inspector tools" and untick/tick again the font-family property, it magically fixes.
I attach an image so you can see what should happen:
Since I used a jsfiddle link, I need to add a code block also, so ill just add the markup, which is not related at all...
<div class="recipe">
<div class="recipe-top">
<div class="category">Text</div>
<h2>Test Recipe 1</h2>
<div class="date">12 Jan 2013</div>
</div>
</div>
EDIT: Moving the SVG font to the bottom so Chrome uses the woff instead of the svg fixes the problem. So it looks like the problem its in the SVG rendering.
Well, after some wasted hours this seems to be a (another) chrome bug.
https://code.google.com/p/chromium/issues/detail?id=95102
And i also found a solution here:
Chrome svg-Font-Rendering breaks Layout
Which is good, but doesnt validate CSS. Anyway nothing else we can do.
I am using ng-view to render dynamic data on my page. When the page loads, if I use static html I get this (top):
When Angular loads the page the data is there but it's like the element is still empty (bottom).
If I make even the slightest adjustment in Chrome dev tools, the items snap into place but I cannot get them to prefill without using CSS to make them static sizes, which doesn't work because text is different sizes. The elements in question have CSS of inline-block.
As you can see in this screenshot, I have tried two ways of populating the data, both with the same result:
<div class="cd-rating" ng-class="caseData.scoreClass">
<span class="score" ng-bind="caseData.adjustedScore | number:0" ng-cloak>N/A</span>
<span class="verdict">{{caseData.recommendation}}</span>
</div>
Here is the what the HTML looks like in the browser:
<div class="cd-rating medium" ng-class="caseData.scoreClass">
<span class="score ng-binding" ng-bind="caseData.adjustedScore | number:0">349</span>
<span class="verdict ng-binding">review</span>
</div>
If I hard-code that HTML identically, then it renders perfectly. It's only when Angularjs renders it that the elements are collapsed, appearing if there is not content.
I would also like to add that I am using RequireJS and manually bootstrapping the app instead of using the ng-app directive, in case that matters.
Any ideas on how to make the view fill the elements?
EDIT: Here is a video that demonstrates the behavior: http://youtu.be/zTwv-o6mWRM
I am not able to figure out what exactly you mean by the "..data is still there but the element is empty.." - the only issue that I find with the rendering by AngularJS is that the "Review" (button?) is overwritten with the number.
Looking at your code (which, as #Wingman4l7 suggests needs to be posted in the question rather than as a image), I see that you are using bindings to define a class dynamically. Instead, can you use the ng-class directive and see if it resolves the issue?
That is, replace:
<div class="cd-rating {{caseData.scoreClass}}">
with
<div class="cd-rating" ng-class="caseData.scoreClass">
instead and check if the issue gets resolved?
On this website: I've the following problem in Safari:
When clicking the 1st time on "KUNDEN" in the navigation, the complete header is invisible. In the dev console I saw, that the content of the header is already loaded - also in the source code.
But the content is not appearing until reloading the page or marking everything (STRG+A).
Does anybody have an idea, why this is happening? Could it be a Typo3 bug?
look at that screenshot:
I'm using Safari 6.0.5 on Mac 10.8.4.
You forgot to close a div tag.
Line 72:
<div style="clear:both" </div></header><div id="content">
should be:
<div style="clear:both"></div></header><div id="content">
See all W3C Validation errors:
http://validator.w3.org/check?uri=http%3A%2F%2F99-ideas.de%2Fhallo.html&charset=%28detect+automatically%29&doctype=Inline&group=0
If text is positioned off display, is there any way to convince browsers to copy text only visible on the screen when user selects text using ctrl-a or select all. In the example that follows, I don't want to copy text for the absolute positioned div.
<html>
<body>
<div style="position:absolute;top:30;left:-300">This should not be copied</div>
<div>Only this should be copied</div>
</body>
</html>
Some more information:
Ideally I am looking for solution for webkit/gtk, but this applies to firefox/chrome as well. Both browsers exhibit same behavior.
I don't control the page getting displayed. Page is displayed in webkit window for automated tool which tries to analyse contents of the page. Part of the algorithm looks at the text available by select all/copy
I have access to full API webkit/gtk exposes.
Why not just do display: none; instead of moving it to the left?
<html>
<body>
<div style="display: none;">This should not be copied</div>
<div>Only this should be copied</div>
</body>
</html>
I see no reason why you need to move it off the screen.
User can always use firebug to copy whatever they want.
I have one error when validating my Joomla built site against the W3C validator. It's a closed tag but without an opening tag. Problem I'm having is the tag appears to be completely unrelated to any other elements and I can't see it via Firebug. Anyone know how I can track down what's causing this? It's a right pain. Details from the validator:
Line 403, Column 5: end tag for element "h2" which is not open
The Validator found an end tag for the above element, but that element is not currently open. This is often caused by a leftover end tag from an element that was removed during editing, or by an implicitly closed element (if you have an error related to an element being used where it is not allowed, this is almost certainly the case). In the latter case this error will disappear as soon as you fix the original problem.
If this error occurred in a script section of your document, you should probably read this FAQ entry.
and a snippet of how it appears in the HTML from view source:
<div id="ja-current-content" class="column" style="width:100%">
<div class="ja-content-main clearfix">
</h2>
<div class="article-content">
<h1>Welcome to SWAYsearch web design, Cambridge</h1>
The site is: http://www.swaysearch.com
Any help much appreciated.
Cheers
John
That's a known bug when you have title's disabled. You'll have to open that file manually and comment out that if statement which leaves the stray closing h2 tag.
I believe the opening h2 tag is this:
<h2 class="contentheading clearfix">
Search through your code for that string and you should find your issue.