We recently redesigned our public-facing site, however one item was not fully communicated.
A certain portion of our site uses some of the newer display types in CSS. This looks fine in almost all browsers, but not in IE8's compatibility mode or in IE7.
This wouldn't be an issue, except the miscommunicated item was that we DO need to support IE7.
For this reason, my initial fix (forcing IE8 into standards mode) was rejected.
I'm currently developing a CSS to override these sections of the page. We want this to be a separate CSS file, not to use CSS hacks within the main stylesheet for maintainability reasons.
My understanding is that I can include this (or not) by using IE's conditional comments to include it only for version IE7 and below. If I use the conditional comment
<!-- if lte IE 7>
will this also be included with IE8's Compatibility Mode? If not, how do I specifically target IE 8 Compatibility?
At least in IE9, IE does function as IE7 as for conditional comments. For example, with following code:
<!--[if IE 7]>IE7.<![endif]-->
<!--[if IE 8]>IE8.<![endif]-->
<!--[if IE 9]>IE9.<![endif]-->
"IE7" will be shown in IE9 working in compatibility view mode triggered via a button at the right of location bar.
Update: just tested in IE8 — it does the same as IE9.
Related
As you can see on this live demo, I have a website with two stylesheets, one for our beloved IE and another one for the normal browsers, set like this on its header:
<link rel="stylesheet" type="text/css" href="stylelab.css">
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="ie_stylelab.css" />
<![endif]-->
Even though I have checked many times its spelling, it seems correct but if you open the link from IE (IE v11, in my case), normal Stylesheet is loaded instead IE one.
To check easily if the other CSS is loaded, in theory, when opening the link from any IE and executing the menu (bottom right button), it has blue background.
What is missing here?
IE stylesheet has the entire normal stylesheed PLUS the additional properties needed for it to work, maybe this is wrong and shoul only have the additional properties..?
Conditional comments are no longer supported
Support for conditional comments has been removed in Internet Explorer
10 standards and quirks modes for improved interoperability and
compliance with HTML5. This means that Conditional Comments are now
treated as regular comments, just like in other browsers. This change
can impact pages written exclusively for Windows Internet Explorer or
pages that use browser sniffing to alter their behavior in Internet
Explorer.
See: http://msdn.microsoft.com/en-us/library/ie/hh801214(v=vs.85).aspx
IE stopped support for conditional comments as of IE10.
At this point a better solution is to target CSS based on features rather than vendors/browsers. Tools like modernizr can really help you with this.
In IE9 Browser, a page is not displayed properly. Using developer toolbar I have found the following screenshot in which it displays
Browser Mode:IE9 Compat View
Document Mode : IE7 standards
If I force the browser to
Browser Mode : IE9
DOucment Mode : IE9 Standard
Then it display properly.
How can I show the page properly without forcing the browser to IE9 mode.
Ah... Internet Explorer didn't support HTML5 until IE9. Add this to the header:
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
Also, add an HTML5 reset style sheet like this one:
http://html5doctor.com/html-5-reset-stylesheet/
It looks different in the emulated version of IE7 because you wrote it in HTML5, and IE7 was developed before HTML5 was even an apple in the eye of the W3C.
Be careful using hacks such as the one prescribed in the answer above. It is better to understand each bit of code you add to your site.
It is also important to remember that every additional document, hell every keystroke you add, creates a greater load on the server and browser, which increases your load time.
I literally have to type in
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="css/ie8.css" />
<![endif]-->
to get my css hack to work for ie8. And yet when I click the 'abouts' tab in my IE browser, it clearly says IE8 version 8.0.6001. 18702.
I already reinstalled IE8 because I thought this issue was wierd but I still have to use the IE7 hack in order to get my IE8 only css to appear in my IE8 browser.
Is there something I can do to fix this? I have to talk to other developers and it is somewhat annoying not knowing exactly which IE version I have.
It looks like your IE8 is running in Compatibility View, which causes it to render pages like IE7, including reading IE7 conditional comments.
Look for the button in your toolbar that looks like a torn page, click on that, and it should disable it and return you to IE8 rendering mode.
As I have seen here, a filter can be used to simulate a cross browser version of
pointer-events: none;
However, this just doesn't work in IE9, nor does it in the "emulate IE8" version in IE9. A native installation of IE8 handles it fine, however. Is there any solution that makes it work for IE9?
You're right - AlphaImageLoader filter has been removed from IE9. This was done so that it doesn't conflict with the standards compliant methods. In this case, pointer-events: none, which now works in IE9.
If you're using a conditional comments to target IE for the filter fix, change them to target only IE8 and below. Try changing <!--[if IE]> to <!--[if lte IE 8]>
Edit: I've since come across this again and it appears that pointer-events: none does not work in IE9 (not for HTML elements anyway). I thought this was working, but on re-testing neither method works for click-through on IE9. Perhaps I had my IE9 in a compatibility mode.
It's not ideal at all, but you could force IE9 into IE8 mode via the <meta> tag switch:
<!--[if ie 9]><meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8"><![endif]-->
Apologies for the misinformation, I'll keep looking into this.
Update Sept 24 2012:
The wonderfully useful caniuse.com has more information on pointer-events for HTML. Support in IE10 is still unknown and it appears that Opera does not support this property either. I would advise against using pointer-events for now unless you're specifically targeting Webkit/Mozilla.
pointer-events only works in webkit, mozilla browsers in html.
However pointer-events works on svg elements in internet explorer.
There is a good modernizr plugin https://github.com/ausi/Feature-detection-technique-for-pointer-events/blob/master/modernizr-pointerevents.min.js to test the existence of pointer-events
If you are using the pointer events to just add some sort of texture over the top you can replace a div with a svg element
if( !Modernizr.pointerevents )
{
$('#texture').replaceWith('<svg id="texture"/>');
}
I've implemented a landing page design for a campaign we are launching at work, and did testing on IE 7 on my XP machine at work and IE 8 on my 7 machine at home. These both worked and so I thought I had beaten IE, but as it turns out, different OS's IE render HTML differently even though they claim to be the same browser.
Anyone who has XP and IE8 will not see the site correctly at all.
I use two different CSS links. One for IE and one for !IE:
<!--[if IE]>
<link href="../images/content/pagebuilder/idop_2010/free-to-believe-IE.css" rel="stylesheet" type="text/css" />
<![endif]-->
<!--[if !IE]><!-->
<link href="../images/content/pagebuilder/idop_2010/free-to-believe.css" rel="stylesheet" type="text/css" />
<!--<![endif]-->
I had to use !IE because IE was still pulling CSS from the good stylesheet, and the IE sheet wouldn't update correctly (a different issue).
If I create IE specific CSS (IE7/IE8 vs just IE) could that fix the problem?
What's a good way to overcome an issue of Operating Systems + IE?
Edit
I installed IE 8 on my work computer and it has the same problem as all the other IE 8 computers. I have Internet Explorer developer tools, and I noticed that IE was running in "IE8 Standards Mode" When I switched it to "IE7 Standards Mode" the layout worked perfectly. I also noticed on my laptop with Windows 7, that the compatibility mode icon was activated. When I turned it off, I was able to duplicate my problem. So now I know for sure it's an IE8 issue in general, not necessarily an OS issue.
I've now created an IE8 specific stylesheet which I'm going to start overhauling to get it looking right.
Here is the site: http://members.opendoorsusa.org/site/PageServer?pagename=IDOP_2010
Anyone who wants to take a look at it and give me suggestions as far as CSS is concerned, I would appreciate it (I didn't do the design, just implementation, so no design critiques please)
Now that I know that this is the problem, I have another question. Why in the world does IE 8 display so different than IE7?!
The best way to overcome IE issues is to use conditional comments:
<!--[if IE 8]>
... link IE 8 specific stylesheet...
<![endif]-->
It seems like you already know about the conditionals so just try an IE8 specific stylesheet and see if it works.
Check this out. In theory, there shouldn't be any differences between different versions of Windows and the same web page on IE 8, but there may be exceptions with ActiveX and possibly the rendering of fonts.
Let me know if an IE8 specific stylesheet works for you.
Did you use the JQuery UI Themeroller? I just discovered a css bug as well that was only in XP, not in Vista. UI tabs and accordions were missing header text. I isolated the issue down to a custom generated theme made by the Jquery UI Themeroller. Replacing the custom theme with a prebuilt theme fixed the problem.