I am using HTML to create some automatically generated test reports for work. The reports display fine when they are stored locally on my C:\ drive, but when I copy the report to a work network drive for general access the html doc no longer displays correctly in IE9:
Where there should be a figure with an SVG file displayed, the page just ends (i.e. none of the subsequent content is displayed).
Formatting of things such as figure captions gets messed up.
The reports consist of figures which are relative path linked SVG files stored in the same folder as the HTML doc.
I'd really appreciate any pointers anyone could give on why there is this difference when viewing from a network drive as opposed to my local C:\ drive.
Many thanks
Ben
The IE document mode can be different depending where the file is stored. For example, it can set Mode IE7 for all intranet pages. The same can occurs if you're on another drive.
Because SVG is supported since IE9, a IE8- document mode can remove this support.
Check in the IE dev tools (F12) if there is a document mode difference between each drive or add this meta to force IE to the edge mode :
<!--[if IE]>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<![endif]-->
Try adding this in head section
<meta http-equiv="X-UA-Compatible" content="IE=9">
For more details please refer here
OR
You can add 100% width to parent element, which does some magic.
Related
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:
I recently started my first program (very basic) and I ran into an issue immediately!
<link rel="stylesheet" type="text/css" href="gweeble.css" />
Using the code above, I attempted to attach a css stylesheet. In order to make sure it wasn't just me, I copy pasted the code from an example. And to make sure that the CSS was right, I put it in a style tag in the head of my HTML file... it worked. Next, I entered the dev tools in chrome (the browser I'm using. This is on a Chromebook using the caret editor) and the css file wasn't even there!!! If you have any ideas, I really need help!
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" type="text/css" href="gweeble.css" />
<title>gweeble</title>
<meta charset="UTF-8">
<meta name="description" content="uhhhh">
<meta name="keywords" content="google, grooble, gweeble, bored, I'm bored, Im bored, ugh, uhhh">
<meta name="author" content="">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
</body>
body {
background-color: #4542f4; }
ANOTHER SOLUTION!!!!
Here's another reason why browsers may fail to load your css file....
I've read all the responses here (and on several other sites) but was still failing to have my apparently valid css file loading into my browser (as confirmed using the inspector - right-click over code in Chrome and look at 'sources' tab).
I usually use Chrome but also tried Edge with same results - html5 code ran fine but the layout was not being rendered. Inspection showed that css file was never loaded, never mind executed.
My issue turned out to be that the html code had been copied from on-screen tutorials and pasted into Notepad ++. In the process, I ended up with the wrong speech (") marks, so my guess is that the 'meta charset="utf-8"' statement
was inconsistent with the type of speechmark in the code?
Bottom line is that changing all the speechmarks by simply deleting and then re-typing resulted in a physically different shape of speechmark and working code.
Hope this was helpful....
Are you really sure you are viewing the correct HTML file? You can also check the page source (CTRL + U) to check the markup in your document.
This is usually because of a bad link in the <link> element. Are your HTML and CSS files at the same level in the file structure? If you need to go back up a level you may need to do href="./gweeble.css" Also try doing a hard refresh of your browser (hold the shift key down and click the refresh button if you're using Chrome) to clear the cache. Oh and double check the spelling of the CSS file name to ensure it is a correct match.
I figured it out! My computer was set to auto put my files into a google drive section ☹️. The problem was fixed by simply moving the folder to downloads.
In case you are using node.js, express, and EJS as templating engines
I just found this error on my website and looked here.
The problem I faced is
if you have a CSS file in your public directory i.e. views(in my case)
Note: You can access your CSS file from Browser Dev tools.
Using Chrome, go to Network in dev. section, and then click on CSS file. And check headers.
Make sure when you link any CSS file without any error of
type : "text/css"
Correct href = ""
Now, if you still can't access it,
so the problem may be that your browser may not be accessing the file correctly. Check the path where it should be, and where you had placed.
In my case: localhost:3000/views/css/style.css throws an error
But The actual link should be: localhost:3000/css/style.css worked
So change the href accordingly, and remove extra folders coming between so that your browser can access it directly.
I have a problem that my webpage does not display as i wish it to do.
When opening the F12 developers tool in IE11 it says "Document mode: 8 (Default)".
If i change it to mode 9 or higher the page displays as i want it to do.
My code is included in the host web page through an Iframe. I do unfortunatly not have access to edit the host code. The host code includes the code:
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
I thought this code would ensure that the code was not shown in document 8? The code is included at the end of the head tag, with 88 lines of code in front of it. Could this be what is causing it to use document mode 8? How can i work around this when i am not able to edit the head code?
I'm at the last of my wits here. I've searched through dozens of websites trying to find the answer to this issue, but I have yet to find a solution that helps me.
Here is the top section of my HTML, linking to my CSS file:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
<title>Sample Page</title>
</head>
For some reason, when I preview my .html file on my browsers, my CSS code is not taken into account.
Just to clear things up a bit, I've already made sure the following are not the reasons for my issues:
My CSS code worked just fine when it was in the HTML within the style
tags. It only stopped working once I put it into its own .css file.
There are no <style> tags on my .css file.
The rest of my HTML is correctly formatted. I have the </html> tag and the <body> tags.
I've tested this page on Chrome and Firefox, and even on a different computer's Chrome. I've even tried running them as an Administrator.
I've checked to confirm that my browsers are not set to Quirks Mode.
I've tried multiple DOCTYPE headers, none have shown any signs of working.
The .css name is correct, and the file location is correct. Both the index.html and the style.css are in the same folder.
I've tried these lines of code in different orders, different formats, I've even tried other peoples' code and nothing works.
I've checked the source code for the page on my browser, and clicking the style.css link leads straight to the file.
The only lead I've gotten is that I clicked "Inspect Element" on my page in Chrome and checked the "Resources" tab, where the HTML is found under Frames>(index.html)>index.html and the CSS is found under Frames>(index.html)>Stylesheets>style.css. If I click index.html, the body is blank, but if I click style.css, the body is, strangely enough, a bit of Chinese text.
Here is a sample of a style.css I've tried:
body
{
background-color: yellow;
}
Even with the CSS as simple as this, it still won't work.
Please help.
EDIT: http://i.imgur.com/SgoFkvw.png
Read my post, you guys. They're in the same folder. The different paths are in the "Inspect Element" mode in Chrome, not in my folders themselves.
Jozef Dúc wrote in the comments (1, 2):
Open css file in some editor for example Notepad++ and change encoding of file to UTF-8
Notepad++, open file, in main menu find Encoding->Convert to UTF-8.Look again in Encoding and option Encode in UTF-8 should be checked and save file. Hope it helps :)
This is what solved it for me.
According to your screenshot
it looks like you have bad encoding in file.
So first add
<meta charset="utf-8">
to your HTML.
Then you must change encoding in CSS files. Open the file in some editor (I recommended Notepad++). In Notepad++, find Encoding in menu and in submenu choose option Convert to UTF-8. Now, look again in "Encoding" and "Encode in UTF-8" should be checked, then save the file.
i had the same issue and this is what worked for me. i realized the .html and .css files where all in one single folder that's why it wasn't working. to solve this,
open the project folder(the folder that contains your html files), in this folder, create another folder called 'styles'. Finally, place the .css file in the style folder and run your site again.
this worked for me. hope it works for you
Try adding this line <meta charset="utf-8">
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
1. Ensure that CSS is enabled in your browser.
1.1 Firefox & Chrome: I recommend using Chris Pederick's Web Developer Toolbar, it is a CSS menu (third from left if you have a newer version where the text labels got KOed).
1.2 Safari: ensure the Develop menu is visible (Edit-->Preferences-->Advanced) and then ensure that Disable Styles is not checked.
1.3 Opera (Real Opera, 12.5 and earlier): Tools-->Preferences-->Advanced [tab]-->Content-->"Style Options" [button]-->Presentation Mode [tab] and ensure that "Page Style Sheet" is checked.
1.4 Internet Explorer: Go to Tools-->Options and ensure that under the "Security" tab that the zone (either Local Intranet (if loading the page from your hard drive) or Internet (if you're uploading to a server and then loading it in a browser) are set to Medium-High.
2. Ensure that your HTML and CSS files do not have a BOM (Byte Order Mark) which is created by Notepad and other Microsoft text editors. You can disable the BOM by using Notepad++ or SuperEdi in the Save As... dialog, you will need to do so for both. NEVER USE MICROSOFT TEXT EDITING TOOLS FOR WEBSITES!
3. Running a local server? Check either the Apache access logs or the Developer Network tab to ensure the style.css file isn't coming up as 404.
My link tags work also without the / at the end of the tag. you can try that.
and you can get to element ispect and that to console. maybe the console can tell you what's wrong.
It's a continuation of this post : What throws Internet Explorer into quirks mode? .
I have a webpage, built on Django LFC CMS ( http://snow4life.pl/ ). Problem is that when I upload my files to server, the default templates (http://bitbucket.org/diefenbach/lfc-theme-1.0/src/tip/lfc_theme/templates/lfc/base.html) are somehow edited by the server and some random whitespaces are added before the DOCTYPE declaration. The declaration itself is moved somewhere in the <body> segment. This of course throws internet explorer into quirks mode. This is not the templates fault, as on the demo page it is working normally ( http://demo.django-lfc.com/). Do you have any ideas what can cause this ? I've tried uploading empty html pages, samples from w3c, editing it in hex mode and nothing works.
EDIT
I'm uploading via WinSCP. Here are the screenshots from edits in vi on server, winscp's editor on server, vim on my local disk and vi(hex) locally.
You can always force ie to run in standards mode :
<meta http-equiv="X-UA-Compatible" content="IE=8" />