I have this mock up HTML/CSS website here that is working perfectly fine on Firefox/Chrome but on Internet Explorer, the organization of the page is breaking; footer div is coming to the header section). I have tried to debug it but no luck.
It would be great if you can take a look into it and give me some pointers.
https://www.csupomona.edu/~tahoang/tu-template/
Thanks!!
You have a couple of duplicate IDs in use. I would start by fixing those.
http://validator.w3.org/check?uri=https%3A%2F%2Fwww.csupomona.edu%2F~tahoang%2Ftu-template%2F&charset=%28detect+automatically%29&doctype=Inline&group=0
Looks fine to me in IE 8, IE 9 and Chrome. Do you have compatibility view enabled in IE 9?
I also notice in the Footer that you having a bunch of the columns positioned relatively, there is no need for that. You may remove that.
Try adding this to the <head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
Also fix those duplicate IDs Tim mentions, but this Meta tag will fix all your IE9 problems ;)
Related
Some of my CSS wont work in IE8 but will work in chrome,firefox,IE11.
I first made the website on chrome and then realized it didnt work in ie11 so I put code into the html like the code below...
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
After putting this, my website works on ie11. Later to find out, that it does not work on ie8.
I am making this website for my company and all around the company ALL the staff use different browsers, so I need to make sure it works on all.
Do I have any hope? or do I have to give up on this one? I have researched all over google about everyone different code inserts they put in for it to work on ie8 but it doesnt work.
In my CSS im using stuff such as border-radius and box-shadow and many many more.
Is there an alternative... to say, "if you are using ie8 to display this website, display this piece of code differently to suit the browser."
Thanks
What you are basically looking for is "graceful degradation". Check out some articles about that here:
https://www.w3.org/wiki/Graceful_degradation_versus_progressive_enhancement
http://searchnetworking.techtarget.com/definition/graceful-degradation
In any case, keep in mind that making a modern page work on IE8 is a tedious task, and most likely unnecessary. The global market share for IE8 is currently around 1%, so you really have to consider if you do that extra work.
I have red all the questions and answers on this issue. Still it didn't help. In my IE 11, the doctype is always commented out.
I think IE is Rendering the page in compatibility view. I am assuming this because some html properties such as border-radius are red underlined as if IE 11 not recognizing it, so I think that IE is not Rendering the page in Standard mode, though in developers tool Edge is selected.
I have chekced all the compatibility Settings. Everythings is unchecked and fine.
The Website was previously running on IE8 and was optimised for that.
Could you please post a code snippet of your current HTML document?
I would try to do it like this:
<!DOCTYPE html>
I added the following meta-tag to my webpage and it works for me:
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
I found it on this post
My blog works fine in IE10 and in Chrome, but when viewed in IE8, it initially loads correctly but then the background and page tabs and names disappear. It's weird because my test blog works fine and I'm not sure what I changed that would effect it.
test blog - damianp1.blogspot.co.uk
real blog with problem - sthelensbirds.blogspot.co.uk
I'm not even sure where to look to try and find the problem. I'm thinking of going through the code line by line to try and find any differences but if anyone could let me know where abouts to look I'd be very grateful.
Cheers, Damian.
I've sorted it - sort of! Thanks for the tips Robert. I found some code that makes the browser emulate IE7 and stuck it in here...
<b:if cond='data:blog.isMobile'>
<meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum
scale=1.0'
name='viewport'/>
<b:else/>
<meta content='width=1100' name='viewport'/><meta content='IE=EmulateIE7' http-
equiv='X-UA-
Compatible'/>
</b:if>
The
<meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/>
is the bit I added. The blog now works correctly on IE8.
It's working, but have I put the code in the right place? Is there any better way of sorting this?
Edit - This code makes IE8 emulate IE7, but leaves IE9, IE10, and chrome alone...
<meta content='IE=7,IE=9, IE=10, chrome=1' http-equiv='X-UA-Compatible'/>
Here's where I found it.
I was googling, about how to fix compability problem ....
and i get this to force ie8 to latest version ie
<meta http-equiv="X-UA-Compatible" content="IE=edge;/>
in my mind ...
is it posible to force any user agent.
let say from any browser to firefox
example <meta http-equiv="X-UA-Compatible" content="FF=edge;/> or else
Heh, clever thjnking! :) But no, this is not possible.
The X-UA-Compatible header is proprietary, and can be used only to switch between various versions of the same browser engine (At the moment, it is supported only by IE, as far as I know).
You'll have to go the hard route and adjust the CSS so it works in all browsers (or serve different style sheets for different browsers).
As far as I know this line works also for non IE browsers, for example you can use something like this
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
to force the use of Chrome rendering if available, or the last verison of IE of not. This code is completely valid but I'm not 100% sure what it means and what it really does :)
I have done some google research but I haven't found nothing concrete about it so I think is not a good idea relying only on this line of code for cross-browser compatibility. Personally I insert this code on my sites because it can do no harm :)
Hope it helps.
I have a website depending on vector drawing, for Internet Explorer I'm using VML and for other browsers I'm using SVG.
IE8 however, doesn't have support for neither without falling back to IE7-mode which has VML.
Therefore I'm including <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />.
The problem (well, actually a good thing) is that IE9 now has support for SVG so I don't want it to fall back to IE7-mode which has much worse performance and compatibility. How do I tell only IE8 to fall back to IE7-mode but let IE9 stay in IE9-mode?
Right now I'm doing a server side check on the agent whether to include the EmulateIE7-string in the head or not but I want to avoid this as far as it's possible.
I just had a play and found the following works for me:
<meta http-equiv="X-UA-Compatible" content="IE=7,IE=9" >
That is with a comma not a semi colon!
I haven't looked at the spec, but the format is similar to content="IE=7,chrome=1" that works for Chrome Frame. I also found that content="IE=7,9" works but I suspect that is not a correct format.
Edit:
Beware of a serious problem if your page is in a iframe. If you use the above in a framed page where the parent is in any mode less than IE9 strict, then IE9 will fall back to IE8 mode (ignoring the IE=7 request!). Any known workarounds welcome :) Might not be relevant to IE11.
The above seems to be a side effect of the by design feature, that iframes (and I presume frames) are either all in IE9 mode, or all are less than IE9 mode. One can never mix IE9 frames with < IE9 frames, see MS issues #599022 and #635648.
Edit 2:
Beware that IE11 only supports "IE=edge" (not IE=11), and that using IE=edge has significant effects upon IE functionality (including the user agent).
Edit 3:
Fantastic flow chart explaining how IE works out what mode to use for IE9
IE=edge is supported by IE8 through to IE11.
The Meta tag takes precedence over the HTTP header (which can be used instead of the meta tag)
Some more X-UA-Compatible info for IE10.
Edit 4:
X-UA-Compatible was removed from the Microsoft Edge browser. Only Internet Explorer has the compatibility modes. Beware that if you are using the WebView within an App on Windows Phone 10, then you are still using IE11 (not Edge).
Also for a variety of reasons you cannot trust the user agent to tell you the correct compatibility level, instead use document.documentMode from JavaScript.
Edit 5:
IE11 still needs X-UA-Compatible set to IE=EDGE for some corner cases e.g. a customer using IE11 from ActiveX (as WebView within a wrapper application) can drop IE11 back to IE7 mode if you don't set this.
The dual mode mentioned by someone else should work (but doesn't as shown by Microsoft) and is the closest thing I've seen in MS documentation that should work as described. There's an update below that shows the proper form the meta attribute value should take.
So if you use this:
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7; IE=EmulateIE9">
Unfortunately, what you will get is IE8 rendering as IE8 because of the fuzzy version vectoring that the x-ua-compatible engine does. See this document:
Defining Document Compatibility: Understanding Content Attribute Values on MSDN.
In that section, you'll see that in the first half, they define any version vector defined as larger than the current browser version will be interpreted as the largest available rendering engine. Therefore, emulateIE9 get's translated down to emulateIE8. Stupid.
Then, in the same breath practically, they talk about using multiple version vectors as in the code snippet above to exclude a particular engine. But because of the fuzzy version logic, that would never work. Ah, Microsoft. Fail again.
The reason why using CCs around the meta won't work, is that the browser must have chosen a rendering engine by the time it hits a CC. The x-ua meta must come before anything else in the header except other metas or the title according to MS's own documentation.
If anyone can figure this out, I'm all ears because I'm desperate to exclude IE8 from support while including IE9.
IMPORTANT UPDATE:
Robocat points out, using a comma instead of a semi-colon as Micrsoft shows is the correct way of doing this. I tested it and it worked for me. I've updated my test page.
So the correct form is this (as suggested by robocat):
<meta http-equiv="X-UA-Compatible" content="IE=7, IE=9">
The incorrect form is this (as suggested by Microsoft):
<meta http-equiv="X-UA-Compatible" content="IE=7; IE=9">
I have so far used all these, nothing works on IE9:
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" >
<meta http-equiv="X-UA-Compatible" content="IE=8" >
<httpProtocol>
<customHeaders>
<clear />
<add name="X-UA-Compatible" value="IE=EmulateIE8" />
</customHeaders>
</httpProtocol>
this is so frustrating, none of these meta tags seems to be working. Microsoft, What is so difficult in supporting stuff you say should work in your documentation? we have to spend hours doing browser wars. You are wasting everyone's time.
If you want IE 8 to use IE7 standards and IE 9 to use IE9 standards this one worked for me:
<meta http-equiv="X-UA-Compatible" content="IE=7, IE=9">
For IE9 this gives me IE 9 compatibility mode with IE 9 standards.
For IE8 this gives me Browser Mode IE8 Document Mode IE7 Standards
This one works for IE9 to me.
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8"/>
I think what you need is:
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7; IE=EmulateIE9">
according to
http://blogs.msdn.com/b/ie/archive/2010/06/16/ie-s-compatibility-features-for-site-developers.aspx as it states this as "... an example that combines values so that IE8 renders a webpage in IE7 Standards mode while IE9 renders the webpage in IE9’s Standards mode:"
However I for one can't get this to work.
Wow Microsoft have really created a nightmare here. We're going to be talking about this well into the future!
Anyway this works for me.
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7; IE=EmulateIE9" />
<!--[if IE 8]>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<![endif]-->
It's called conditional comments
http://en.wikipedia.org/wiki/Conditional_comment