I have a Wordpress site and created a custom theme for it. The pure CSS and HTML test version (without making it an actual Wordpress theme) is displayed 100% correct.
As soon as I make it dynamic and create a WP theme, IE 10 is ok, but IE10 compatibility and below somehow evaluate my document head as part of the body. It is displayed in IE html view window like this:
'!!!' is my actual title. All the CSS and meta information should be before my title, and somehow the head ending metatag is not displayed but it is present in my html markup.
SourceCode view is displayed as:
Head ending and everything in place. However there are two leading whitespace before DOCTYPE declaration, I have no idea how they got there, cleaned up every possible place in my source files. If I copy and paste their value into notepad two question marks "??" are displayed instead of whitespace.
Have never seen anything like this before. Mozilla and Chrome are 100% ok.
In case anybody has the same problem I found the answer.
My page.php and functions.php file of the Wordpress theme was utf-8 encoded that sometimes puts leading whitespace in the source code. This was enough for IE. I made it ANSI encoded and now it is ok.
Related
click this links to see the screenshots
full source code of the home page
source code of the external file
full source code of the home page (in google chrome inspect
view)
full source code of the home page (in google chrome page source
view)
I have been keeping the code indentation in that web pages from the beginning in my code editor. but when i see my site on google chrome, the indentation is not set properly. can I know why is this? I googled this, yet coudn't find an answer or a solution.
It is not Google Chrome's fault. Your files simply get compiled to this form, the browser displays them exactly as they look like.
But why they look like this? In your case PHP's include does only purely textual replacement, as in the picture bellow:
The effect is the same as if you copied the contents of the external file and pasted them to the main file, replacing the include tag.
If you would really insist on having the code indented properly after the include does its job, you would have to add new spaces at the beginning of each line (but first) of the included file. It would shift the text to the right (in this case 4 spaces) and in the result the indentation would be preserved.
However, I'd discourage you from doing so -- it is only the code that is generated, probably no one is going to work with the compiled result. Proper formatting of code is only meant to make the human work easier -- it has no effect on how the page will eventually look like, when rendered by browser. Thus, it probably would suffice if you kept the two source files formatted as they currently are and left the output as is, even though it is not indented well.
If you'd like to have the code properly formatted in the page source view, please remember that you can simply use the "pretty print" button in the lower left corner of the preview:
I have a program that let's people design web pages graphically. Then hitting Publish creates an html file that is supposed to be an exact copy of what they created. The elements created by the editor are HTML elements. Publish then gathers up all the elements that have been created and for each one adds it to a string with
canvasOuterHTML += clone$[0].outerHTML;
So all the styles, text, etc., get put on the string. This string, along with some other information is written to the .html version of the page, and when this .html is loaded into a browser the browser displays the page!
But something is expanding the published page vertically. I've created the simple page below to illustrate. The first image is the page in the editor. The second image is what the html displays in the browser.
I'm completely stumped because the HTML and CSS for the two markups is exactly the same, so how can one be higher? I can't even think of a mechanism that would do that. Does anyone have any ideas? Thanks.
I'm running a large site, one that has a nav bar at the top. Rather than change the 100+ html files each time we want to change one of the buttons in the top nav, we want to switch the navbar to be displayed using an include of some kind. I want these includes to work on both Firefox and IE, and I don't want to have to change the extensions of each file either.
So far I've tried:
Javascript read file - This works fine on firefox, but IE has file reading blocked it seems.
HTML include - So far only works if we change the extension to shtml
PHP include - I know you can set up apache servers to run php scripts within html, but I don't know how to make this happen in SunOne.
iframes - I had to block iframes in order to comply with security standards.
I'm more than open to suggestions I haven't considered, or ways to make the above attempts work. Any ideas?
Eureka! I've found it!
So rather than include the html, why not just include the javascript and css? Every page will include a .js and .css file. The css can set the image src, and in each image I can use "onclick" to tell it to execute a function in the .js file with a simple window.location. Voila! Two quick changes will change the whole site!
Thanks to Mr. Lister for the CSS idea. That set me on the path.
Beginner question:
Every .html page we create requires tags to start and end html file an recognize it as a html file.
But even when I don't give any HTML tags and simply write a text in .html file, the file gets opened in the browser with the text I have written in the .html file without using any of the HTML tags.
How is the text getting displayed in the browser without using any HTML tags?
Does the browser automatically add HTML tags behind the scenes??
When I viewed the page source in that also it shows simply the text not the HTML tags...
This is a very simple question but driving me nuts please help me
Yes the browser automatically add HTML tags behind the scenes:
look:
My HTML file:
In my browser (F12 in chrome to get this OR CTRL+U to get the source code):
Yes, if you don't supply any tags, the browser will add some default tags. It knows it's HTML because the server sends the header
Content-type: text/html
If you open the Developer Tools (usually with F12) you can view the synthesized DOM and see the tags that the browser added automatically.
Browsers aren't just software which renders perfect (X)HTML.
They do quite different and often more complicated jobs like:
Fixing malformed HTML
Adding missing tags
If you want to know which HTML structure gets rendered by the browser, take a look at the developer console.
Additionally, the file extensions .html or .htm do not matter. The MIME type which gets sent by the server determines the render mode.
This is why you could create an URI route http://example.com/test.gif which renders as a normal HTML page.
Only if the server (e.g. when accessing from your hard drive) does not provide a MIME type, the browser may try its Content sniffing algorithms.
Because of the .html extension the browser automatically knows that it is HTML, meaning you don't need the HTML tags (however, this is bad practice)...
As for the text being displayed, that is because the text does not need to be inside any special tags in order for it to be shown.
I hope this helps you a bit, let me know if you need further help!
I do not know whether the question is still current, but one solution is to open the HTML document in MS Word. In this case you see only the formatted content.
Check out http://cancerpreventionnetwork.org/participants.shtml and you can see that the header is dropped down on this page. If you click on any other page, the header is not dropped like that. I have tried everything and I can't figure out what is causing this.
When I check the page in Chrome with inspect element, I see an extra text node. I can't see it in the source, but maybe you can?
seems to me that it's the classic UTF8 BOM encoding problem
you need to check all your source files and make sure that they are not encoded using the BOM.
there are many ways to remove it. I use notepad++ but there might be an automated tool or some shell code to remove the BOM for multiple files
and also.. if you're including files (templates) make sure that they don't have white spaces or new lines after the ?>
Good Luck