We are developing a site which makes heavy use of <base href> (which is typical for TYPO3 sites). The site is developed in a sub directory and will later be relocated to the top directory so we can not easily remove <base href>.
Our client told us that sometimes when she browses the new pages she gets the page content without layout applied. We debugged this: It happens only in IE9. Looking at the logs we find that when the error happens, IE9 tries to load CSS, JS and all images consequently from the wrong location: relative to the current URL, not relative to the BASE HREF... Further inspection of the logs show us that IE8 users are also affected, including some dumb web spiders (no problem for us with the latter ones, who cares?).
We already know about IE8 speculative downloader / lookahead parser: http://blogs.msdn.com/b/ieinternals/archive/2009/07/27/bugs-in-the-ie8-lookahead-downloader.aspx
I'm sure we are NOT facing bugs described THERE: All page elements (including first header element) are loaded from the wrong location. This bug describe that only second and later elements from the page header are affected. We can prove this by watching the access logs when the problem occurs.
A simple reload fixes the issue, comparing the page source code with the bug occurring and without it occurring shows absolutely no difference. Only IE is affected, all other browsers are fine.
The <base href> tag is the first in the <head> tag. We tried every possible solution, nothing helped. Seems to be an IE bug.
Anyone else experiencing this and found a work around? We have several other sites using <base href> where we cannot reproduce such behavior in our test systems - so something is probably triggering or working around this bug. But I analyzed the logs of these sites and can see that some visitors using IE8 even there experience that bug.
As requested in the comments, here's an obfuscated example of my html head:
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xml:lang="en" lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<base href="http://client.site/cms/" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--
This website is powered by TYPO3 - inspiring people to share!
TYPO3 is a free open source Content Management Framework initially created by Kasper Skaarhoj and licensed under GNU/GPL.
TYPO3 is copyright 1998-2011 of Kasper Skaarhoj. Extensions are copyright of their respective owners.
Information and contribution at http://typo3.com/ and http://typo3.org/
-->
<meta name="generator" content="TYPO3 4.5 CMS" />
<link rel="stylesheet" type="text/css" href="typo3temp/stylesheet_fad97d0aa7.css?1312295592" media="all" />
<link rel="stylesheet" type="text/css" href="fileadmin/css/styles.css?1319535102" media="screen" title="Standardstyles" />
<link rel="stylesheet" type="text/css" href="fileadmin/js/fancybox/jquery.fancybox-1.3.4.css?1310653643" media="all" />
<link rel="stylesheet" type="text/css" href="fileadmin/js/jqtransformplugin/jqtransform.css?1312810052" media="all" />
<script src="fileadmin/js/jquery-1.6.2.min.js?1310979164" type="text/javascript"></script>
<script src="fileadmin/js/jqtransformplugin/jquery.jqtransform.js?1312460310" type="text/javascript"></script>
<script src="typo3temp/javascript_93553eae97.js?1312462864" type="text/javascript"></script>
<link href="fileadmin/css/print.css" rel="stylesheet" media="print" type="text/css" />
<script src="/tools/formmailer.js" type="text/javascript" charset="utf-8"></script><title>Some title for the page</title>
</head>
We found it: Internet Explorer does all sorts of funny things when the HTML file returned from the server contains a UTF-8 BOM. We still consider this a IE bug but at least we found a work around.
Background info: During initial page generation some PHP files where included which are not included for successive requests (because most generated content is cached now and these files do not need to be run). Some of such included PHP files included a UTF-8 BOM. Because the BOM comes before the opening PHP tag, it is streamed out to the output of PHP.
We figured it out by comparing outputs in fiddler and the file sizes differed by 3, 6 or 9 bytes when the error occured. Running a diff over the outputs showed the BOM header, comparing in most Windows editors didn't show it because these editors know about a BOM. So the problem was hidden. Thank you IE for 2.5 days of useless work!
If you ever run into such a problem again, consider removing the base tag with config.baseURL > and render all links with an absolute URL:
Either use config.absRefPrefix = http://www.example.org/mysubfolder/ (most save variant) or use config.absRefPrefix = /.
i suspect you're not using an absolute path in the tag. IE is allowed to ignore your tag since its not specified correctly. See http://www.w3schools.com/tags/tag_base.asp
Related
I need some help. I decided to create a home FTP server for my family. I hit a roadblock a few hours ago. When I was creating my home page, I wanted to test it in Chrome. I linked a css file to it aswell. I expected to see the test webpage, which was a h1 with the text hello. What actually happened was the fact that it downloaded my html file, and when I opened that in Chrome, I saw my page without the css. I've tried everything to speak of on this site and I even checked page 2 of Google. Here's my code, I'm running FTP on IIS 10.
<!DOCTYPE HTML>
<html>
<head>
<title>Home</title>
<link rel="stylesheet" href="main.css">
<meta http-equiv="Content-Type" content="text/html">
</head>
<body>
<h1>Hello!</h1>
</body>
</html>
As far as I know, chrome download the html page is right. Since you use chrome to access a ftp file, it is not a http connection to the server. The chrome will not directly show it.
If you want to show the html page in the browser, you should use IIS website instead of ftp site.
More details about how to create a IIS web site, you could refer to below article.
https://support.microsoft.com/en-sg/help/323972/how-to-set-up-your-first-iis-web-site
i guess you are putting it in a wrong format
as https://www.w3schools.com/css/css_howto.asp says
<link rel="stylesheet" type="text/css" href="mystyle.css">
I got an empty website up and running online. Basic html5 page with a style link and a script link. It looks like this:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Taco Bell at midnight</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/styles.css" />
<script src="js/scripts.js" type="text/javascript"></script>
</head>
<body>
</body>
</html>
The src's are accurate, I have a folder in the same directory as the html page with the name css and js. When I try to visit them, it shows them as blank. However, when I drag the files out to the same directory as the parent, and update the href, it shows them with the content. Does anyone have an idea as to why this is happening?
It seems relevant to add I just purchased the domain today from GoDaddy, and am using x10hosting for free hosting.
UPDATE: The styles.css still appears in my home directory (in chrome, not cpanel) after being moved, and ctrl+f5'ing, and it now also appears in the folder css/styles.css as well???
UPDATE2: Now it appears as though the files are just updating really slowly? I see the changes in codeanywhere/cpanel immediately, but chrome takes like half an hour to get the changes, regardless of clearing my history/cache and ctrl+f5'ing.
x10hosting (free version, I haven't tested paid version) cache is really bad, this seems to be a server issue, sometimes it keeps showing files that you deleted hours ago, sometimes it won't show files that didn't exist beforem, you might need to wait for hours.
I'm using html and css for the first time. On one computer the html refers to the css appropriately, but on another the css is not referred to at all. I think I'm linking to the css correctly in the html:
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
On both computers, I'm using the latest version of Firefox.
Any thoughts as to where I'm going wrong?
Thanks in advance.
Are you using your browser's developer tools?
Right click in Firefox and go to "Inspect".
Find the Web Console tab. There you will see if the reference to the css file is valid or if it returning a 404, not found.
Also, your reference should be href="/css/mystyle.css", to keep a clean root directory of the site.
Also, you might want to self close the tag:
<link rel="stylesheet" type="text/css" href="/css/mystyle.css" />
And if that doesn't help, run your code through the w3c validator: http://validator.w3.org/
i work for a company where all our sites currently use the XHTML 1.0 transitional doctype (yes i know it is very old school). I want to change them all to use the HTML5 doctype seeing as it is backwards compatible. One of the reasons why i want to make the switch is because in IE8 if someone has the developer tools installed then the old XHTML doctype switches the browser into compatibility mode and renders the page as IE7. From reading up on it i was led to believe that the HTML5 doctype will set any page to render in standards mode, but this is not happening when i test it on our staging server it still flips into IE7 rendering mode.
The weird thing is if i save the page with HTML5 doctype locally and open it, it is rendering in IE8 standards mode. There must be something else causing it to drop into compatibility IE7 rendering. Any ideas what this could be?
Below is the head of the test page i have been looking at:
<!DOCTYPE html >
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:og="http://opengraphprotocol.org/schema/" xmlns:fb="http://www.facebook.com/2008/fbml">
<head>
<title>Burton - Mens Clothing - Mens Fashion - Burton Menswear</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="Burton is one of the UK's leading men's clothing & fashion retailers, with a range of men's clothing designed to make you look & feel good. Find formal & casual clothes & accessories for men online at Burton menswear"/>
<meta name="keywords" content="menswear, clothes for men, clothing for men, men clothes, men's fashion, men's wear, men's clothing online, men's clothes online, men's clothes shop, burton men's, burton menswear, burton uk, burton"/>
<script type="text/javascript">document.getElementsByTagName('html')[0].className = 'js';</script>
<link rel="stylesheet" type="text/css" href="http://eu.burton-menswear.com/wcsstore/ConsumerDirectStorefrontAssetStore/images/colors/color2/v3/css/screen.css" />
<link rel="stylesheet" type="text/css" href="http://eu.burton-menswear.com/wcsstore/ConsumerDirectStorefrontAssetStore/images/colors/color2/v3/css/print.css" media="print"/>
<link rel="stylesheet" type="text/css" href="http://eu.burton-menswear.com/wcsstore/ConsumerDirectStorefrontAssetStore/images/colors/color2/v3/css/brand.css" />
<!--[if lt IE 8]>
<link rel="stylesheet" href="http://eu.burton-menswear.com/wcsstore/ConsumerDirectStorefrontAssetStore/images/colors/color2/v3/css/ie.css" type="text/css" media="screen, projection">
<![endif]-->
<meta http-equiv="content-language" content="en-gb" />
<link rel="shortcut icon" type="image/x-icon" href="http://eu.burton-menswear.com/favicon.ico" />
<link rel="search" type="application/opensearchdescription+xml" title="burton.co.uk Search" href="http://eu.burton-menswear.com/burton-search.xml"/>
<!-- Start Summit Tag -->
<script type="text/javascript">
var __stormJs = "t1.stormiq.com/dcv4/jslib/3286_D92B7532_4A18_46A8_864A_5FDF1DF25844.js";
</script>
<script type="text/javascript" src="http://eu.burton-menswear.com/javascript/track.js"></script>
<!-- End Summit Tag -->
<!-- Start QuBit Tag -->
<script src=//d3c3cq33003psk.cloudfront.net/opentag-31935-42109.js async defer></script>
<!-- End QuBit Tag -->
<link type="text/css" rel="stylesheet" href="http://reviews.br.wcstage.arcadiagroup.ltd.uk/bvstaging/static/6028-en_gb/bazaarvoice.css" ></link>
</head>
There’s a couple of settings in IE 8 that can cause pages to render in Compatibility Mode, regardless of the page’s HTML content or HTTP headers:
Page > Compatibility View Settings
If “Display intranet sites in Compatibility View” is checked, then IE will render all sites on the local network in compatibility view. (This has happened to me a few times during development.)
If “Include updated website lists from Microsoft” is checked, then IE will download a list of websites from Microsoft and render them all in compatibility view.
If “Display all websites in Compatibility View” is checked, then, well, you can guess what happens.
Tools > Internet Options > Advanced > Browsing
If “Automatically recover from page layout errors with Compatibility View” is checked, then IE will sometimes switch to compatibility view if it thinks a page’s layout is broken.
And, finally, if you navigate to a page and then click on Page > Compatibility View (or click on the compatibility view icon in the address bar), then that page will be rendered in compatibility view.
So, although it’s worth putting X-UA-Compatible in there and using a doctype like the HTML5 one (so that your intentions are clear), always check these settings first when testing.
I'm not sure if this helps, but in IE9, you must use:
<!DOCTYPE html>
and the following meta tag:
<meta http-equiv="X-UA-Compatible" content="IE=9">
After testing combinations of these two, here's what I found:
No Doctype or Meta Tag:
Quirks Mode, IE Engine = 5
Doctype Only:
Standards Mode, IE Engine = 7
Doctype and Meta Tag
Standards Mode, IE Engine = 9
Meta Tag Only
Standards Mode, IE Engine = 9
How to detemine mode type and engine:
document.compatMode: CSS1Compat = standards mode, otherwise you're in quirks mode
document.documentMode: returns which engine IE is using to render the document
Notes:
Usually Doctype must be the first line in your file. I'm not sure,
but I think an XML tag can precede it. If anything else precedes it
your likely to break your doctype declaration:
Meta Tag must be placed in <HEAD>
Your post is 25 days old, so I assume you have a solution. Even so, I'm not sure if these IE9 settings are appropriate for your problem. You'll have to examine window.document.compatMode and window.document.documentMode to determine if they are viable under IE8
Change meta tag to <meta http-equiv="X-UA-Compatible" content="IE=8">
Altough it is possible to use the meta tag only, I wouldn't recommend using it without a doctype. As this might cause problems with XML, CSS, and Script
I spent hours trying to figure this out and posting this article so I hope someone actually gets some use out of my research. May the source be with you...
Both the XHTML 1.0 Transitional doctype (when used by the spec, with a URL) and <!doctype html> trigger “Standards Mode” in IE. If this does not happen, there is a multitude of reasons that probably have nothing to do with the doctype change (and can only be analyzed if additional information, such as a URL, is available); see IE 8 and IE 9 complications in Activating Browser Modes with Doctype.
Changing to <!doctype html> is pointless and a potential problem, unless you not actually changing the markup. In validation, which is the other reason for using doctype, it causes a completely different analysis and quite often error messages about constructs that are valid in XHTML 1.0.
Locally (outside IIS): Everything works fine across IE/FireFox/Chrome
IIS: Everything works fine except in FireFox. It doesn't want to load any of my subfolder content.
I've Googled the problem to death, thus...
Permissions are set adequately, (after all, it works in other browsers fine.)
The paths to the file are fine also. (Again, just FireFox.)
.css MIME Type in IIS is "text/css".
Static Content is checked under IIS features.
According to Notepad++, (Which is what the site was made with.), it is encoded in ANSI. (Tried others, no change.)
In FireBug > Net > All: It shows all but the page and a Google hosted script as "loading". In other words, anything local fails to load. (Which are all stored in subfolders in the root.)
DOCTYPE:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
< head>
<title>My Website</title>
<meta charset="ISO-8859-1" http-equiv="X-UA-Compatible" value="IE=9" />
<link rel="stylesheet" type="text/css" href="styles/clean.css" />
<link rel="stylesheet" type="text/css" href="styles/style.css" />
<noscript><link rel="stylesheet" type="text/css" href="styles/noscript.css" /></noscript>
<script type="text/javascript" src="scripts/jquery-1.7.1.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="scripts/script.js"></script>
<!--[if lt IE 10]>
<script type="text/javascript" src="scripts/pie.js"></script>
<script type="text/javascript" src="scripts/html5shiv.js"></script>
<script type="text/javascript" src="scripts/selectivizr.js"></script>
<![endif]-->
Please, anything you can think of, I'd appreciate it. Thanks.
Solutions:
Clear the browser cache. See if that works(It should work).
Use ~/ followed by path. See, if that works.
Lastly, use absolute URLs if nothing works.
Have you checked the rewrite rules in IIS ? Using chrome do a right-click and inspect the properties of your page, go to Resources and check the links to your resources. If they were not loaded it's most likely a problem with the IIS configuration... Most likely a problem with the directory root, the rewrite (redirection) rules, or the permissions to each directory.
I also had this issue with Firefox where the css and javascript files are not getting applied
My solution was to add lang='en' into the DOCTYPE i.e. <!DOCTYPE html lang='en'>
Hope this helps