I am writing a simple HTML file. I would like to embed an XML in it. I do this using iFrames. In IE9 the XML is formatted (though it shows activeX warnings). If I run the same code in IE10 I do NOT see the formatting at all. I see only the XML content. However if I open the XML separately I am able to see the formatting.
How do I get the formatting in IE10 inside iframe? Thanks in advance.
Here is my HTML code
<html>
<head>
<title>Test Code</title>
</head>
<body>
<iframe src="sample.xml"></iframe>
</body>
</html>
And my sample.xml is
<?xml version="1.0" encoding="utf-8" ?>
<test>asd</test>
--
Update: Switching the browser to IE8 Standards mode works.
<meta http-equiv="X-UA-Compatible" content="IE=8" />
Is this the only solution or is there an IE10 based better solution for this?
We just had this problem, and found a bunch of questions like this with no answers! Finally we found the answer from Microsoft here: System working as designed :-(
From our friends at Microsoft:
As of IE9, IE has had native support for rendering XML content
including XHTML and SVG. To avoid conflicts with this native support,
the auto-generated tree view for XML was scoped to only apply to
top-level documents. Thus, when XML content is hosted inside an
IFRAME, a tree view will not automatically be generated by default.
However, when the browser is running in Compatibility View, IE tries
to more closely emulate the behavior of previous releases, which is
why the tree view is still displayed under these circumstances.
A php file can read the xml file then compile the xml coloring and output the html code, maybe.
Related
Just created a simple html file in TextEdit on Mac. It looks like this.
<html>
<head>
<title>My First Web Page</title>
</head>
<body>
<h1>Welcome to My First Web Page</h1>
<p>This is an HTML page that I created in TextEdit.</p>
</body>
</html>
Afterwards I saved it using an .html extension, and tried to open this file in multiple browsers.
However, instead of displaying the correct layout, I got this same code on web page again: see the pic below.
The result persisted across all browsers and after refreshing the page, too. Though if I first saved the document as an RTF file, and later changed the extension manually to HTML, browsers displayed some stuff, but not as expected and shown in a textbook. Below the second result.
The intended result is from the textbook and is shown on the next picture.
Any ideas why doesn't Safari (or Firefox, Opera, Chrome, DuckDuckGo likewise) show the file correctly?
My first instinct is to make line 1 read <!DOCTYPE HTML> to see if that would make your webbrowser read the code as HTML instead of a plain text. Not sure if that would work, but I would try it.
The problem must have been with TextEdit, since it worked immediately and as expected after I copied the same text to Brackets.
A ascii-encoded text file is not the same as a TextEdit file. TextEdit will be using RTF by default which is more similar to a Word document doc type format than raw text. When you save the file, TextEdit is actually saving it to a RTF file containing your HTML text.
TextEdit can edit HTML but, in default mode, it writes the HTML for you from how you format the text in the editor (You might hear this called WYSIWYG)
You can change the TextEdit settings to edit the HTML file as text in TextEdit -> Settings but I feel you would be far better to find a more appropriate programmers editor to edit text. On macOS, you have the command line programs installed by default:
vim and nano or you can install a GUI based editor such as Sublime Text
There are a few properties you are missing, which should be included to enable browsers to parse the file correctly.
The following is a minimal snippet, passing https://validator.w3.org/
<!doctype html>
<html lang=en>
<head>
<meta charset=utf-8>
<title>Your Title</title>
</head>
<body>
<p>Your Content</p>
</body>
</html>
the doctype is a declaration informing the browser in which version of html the document is written in, by default html5
head is a container for metadata
meta charset=utf-8 specifies the character encoding
the rest are html tags you are probably familar with
Are you using any sort of IDE like VS Code, for instance, to write this html?
I ask because there are other html elements you are missing which the browser - no matter what browser it is - requires in order to fully render a page.
Those details are automatically populated to the minimum extent required to render an html webpage in a browser when you use an html boilerplate. That link will give you more info on WHY you need all the stuff in a boilerplate, but basically it's like a pre-fab template for your html page that already comes with all the basics you need there... just start adding content and you're off to the races.
On VS Code, you can add boilerplate by typing the ! (exclamation mark) and then enter; VS Code will open a dropdown to autocomplete this line to be boilerplate for html5 and when you hit enter, populate the page with that boilerplate.
Then you can simply copy in the content you wrote yourself, remove what is duplicate, and you should be good to go.
My webpage is developed in HTML5, CSS, Bootstrap and JavaScript. Now I need to view my webpage in some embedded browser like embedded IE and Mozilla. The problem is my webpage is not loading properly. Do I need to include any HTML tags in order to make my webpage compatible with embedded browsers? Help me out.
I suggest you should post any sample code to reproduce the issue. It can give an exact idea about the issue.
I assume that you are using the IE 11 browser and bootstrap 4. I suggest you add the below meta tag in the head section of the web page.
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
If <!DOCTYPE HTML> is not added in the page then try to add it at the top of the page.
If you are using the older version of the IE browser then you can refer to the information below.
If the issue still persists and something specific is not working then I suggest you add a sample code here and provide the detailed information about it. We will try to provide further suggestions.
Hopefully I can explain this correctly. I have recently been moved to a Windows 10 VM from Windows 7 and I'm trying to get a site for my team at work to display properly in Edge. I have a WebPart linking to CSS that is displaying everything as one large list instead of a table with dropdowns. When I open the HTML page on its own in Edge it displays fine, but with code in SharePoint it is not working correctly. Any ideas of why this could happen?
What should display
What is displaying in SharePoint
EDIT
After opening developer tools I find that I am receiving a SEC7111 error code on my CSS file that is being linked. Looking other places for solutions to this too, but any help is greatly appreciated!
FINAL EDIT
With the SEC7111 error I found out that the "file://" links I used for the CSS weren't going to work because they weren't considered "secure" (Although I got the same error in IE, but never had this display issue..?) So, I moved my linked CSS file to a secure folder in another SharePoint site I have, linked the CSS from there, and now it's working!
There are some ways that you can use to solve your problem (It's better to share your code within your question to get a better answer). So, I offer you below solutions:
Solution 1
Please don't use file:// for the published site in the webserver. HTML rendered on the client so you cannot access the local files. so you should not use the file://. you can read more about security concerns and more details on the file protocol here: (https://en.wikipedia.org/wiki/File_URI_scheme)
Instead of using local file protocol, you can use the Absolute/Relative path to your CSS on the HTTP/HTTPS protocols
Solution 2
Add X-UA-Compatible meta tag or HTTP response header to force IE to run with legacy document mode: 5, 7, 8.
X-UA-Compatible meta tag:
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=8" />
...
</head>
<body>
</body>
</html>
X-UA-Compatible HTTP response header:
TL;DR
I've read through many questions on Stack Overflow on this issue and I've tried to follow the given advice. Still, my CSS stylesheet will not work in Chrome/Safari but it can work in Internet Explorer.
The only odd thing that I can see about my scenario is my server is returning all files as of type application/octet-stream. I cannot change this aspect of the server. Is there something I can do to interpret my CSS file as a stylesheet in Chrome/Safari and IE?
I have an embedded web server project that I am working on. I have very limited control of the server software and the ability to make page-level settings. All I can do is create static HTML, CSS, and image files that are compiled into the server application.
As such, all files that are returned from the embedded server are declared as application/octet-stream in the HTTP header. This produces warnings in Chrome but no errors.
Initially, I had a problem loading this style sheet in Chrome/Safari but it would work in IE. After reading through a couple questions on Stack Overflow, I found that I needed to change my stylesheet declaration from:
<link rel="stylesheet" href="/styles/index.css">
to:
<link rel="stylesheet" type="text/css" href="/styles/index.css">
When I made this change Chrome & Safari still failed to process the CSS file but IE also started to ignore the stylesheet.
Oddly, if I do not declare a DOCTYPE on my HTML document I can get linked stylesheets to work in all of my browsers. This is, however, not a desirable solution.
My guess is this issue has something to do with the HTTP header declaration and that it doesn't match the type declared in the link element.
What can I do to get this stylesheet to work in Chrome, Safari, and IE while following good web development codes-of-practice (i.e. using doctypes on my HTML files and not embedding the style code in the HTML headers?)
For clarity sake, the relevant CSS/HTML code is shown below.
index.css
html {height:100%}
body {margin:0;min-height:100%;position:relative}
iframe {width:100%;height:100%;border:none}
.hdr {min-width:765px;overflow:auto}
.logo1 {float:left;margin:4px}
.logo2 {float:right;margin:4px}
.menu {position:absolute;top:70px;left:0px;bottom:0px;width:175px}
.content {position:absolute;top:70px;left:175px;bottom:0px;right:0px;}
index.htm
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<link rel="stylesheet" href="/styles/index.css"> <!-- Removed the type declaration so that this would at least work in IE9 //-->
</head>
<body lang="en-us">
<div class="hdr"><img class="logo1" src="/images/logo1.png" alt="Logo #1"><img class="logo2" src="/images/logo2.png" alt="Logo #2"></div>
<div class="menu"><iframe name="menu" src="/menu.shtm"></iframe></div>
<div class="content"><iframe name="main" src="/home.htm"></iframe></div>
</body>
FYI, this is a new project that is being developed from an existing one. The original project did not declare a DOCTYPE on the HTML files. Therefore, all page data was loaded and executed in the browser in quirks mode. Furthermore, the index.htm originally consisted of multiple frames within a frameset.
I am trying to update this application, using correct, and up to date methods for developing web pages. I can make this application work, but I feel that this would be at a sacrifice of future-browser compatibility if I have to rely on browser quirks mode and framesets.
I have tried to close the link tag but that doesn't help. Technically, this shouldn't be an issue since this document is declared as an HTML5 document, rather than XHTML.
It's certainly due to the application/octet-stream content type. I can re-create the issue on my end. Soon as the content type is set to text/css your HTML/CSS load fine.
As a workaround you can use <style> tags for you CSS if you can't get the server to send the correct content type.
I hate to have to answer my own question this way but the problem was most certainly with the fact that the server was returning a content type of application/octet-stream within the HTTP header.
After discussing the issue with management we had to update the code associated with the HTTP processor. This is code that is part of a third-party RTOS and we have been extremely hesitant to making any changes to this code.
However, in this case the need has out-weighed that desire. I've integrated the necessary changes to fix the HTTP header to return a content type of "text/css" for cascading style sheets. All is now right with the world.
I think I'll just chime in here. Not to answer the question, but to confirm the issue and perhaps help people with similar problems.
I had the same problem: an external css file was loaded alright, but it was not applied in Chrome. (Safari and FF were ok about it). So, same problem, slightly different cause.
It turned out that because of a bug in the webserver code the HTTP response contained two Content Types, 'text/html' and 'text/css'.
The solution was to remove the faulty 'text/html' line. It seems Chrome is pickier than other browsers about response headers. Which I suppose is legitimate, but a warning would have been nice.
btw, you can see all the http information for a loaded resource in Chrome, when you open Developer Tools, and select Network. Then click on the file that you want to investigate. (it took me a while to find that)
We had a problems with an iframe wich it's contents was updated by an external javascript routine, the CSS were loaded but were not applied. But updating the body HTML from a routine present in the iframe head worked as suposed to.
This same behaviour was not present in gecko and explorer, but happened the same at Safari browser (webkit)
Hope this could give some light in this curious case.
I would like to add one bit of information that may save some of you some time. It appeared that chrome was not recognizing my CSS either. After reading the above post I reviewed the files in the Developer Tools->Network. Turns out that Chrome was using a locally cached version of my CSS. As soon as I refreshed as opposed to accessing the URL again, it worked!
I'm no expert, but i've made this mistake before, it's rather simple.
You've written:
<link rel="stylesheet" href="/styles/index.css">
If this is a folder in the same directory as your index.html file, then you need to remove the first /. like so:
<link rel="stylesheet" href="styles/index.css">
EDIT: I think someone else mentioned this already, but it may have been overlooked.
I feel stupid... my desire is to write HTML5 using XML and I can't get ANYTHING to work, for instance:
<!DOCTYPE html>
<html>
<head><title>ABC</title></head>
<body>DEF</body>
</html>
actually shows ABC on the browser canvas!
What am I doing wrong? (using FireFox 3.5.8)
You need to declare a namespace on the root element. For HTML that is http://www.w3.org/1999/xhtml. A DOCTYPE is not needed in XML.
I’m on Firefox 3.5.2. I saved the code in your question as a file (abc.html) and opened it in Firefox. “ABC” didn’t show on the browser canvas.
What mimetype are you serving it with? What file extension?