This question already has answers here:
Target IE9 Only via CSS [duplicate]
(5 answers)
Closed 9 years ago.
How to disable specific styles only for IE9. My design needs transformations and IE9 does not support it, I need to disable them and use the jQuery transform().
Is there any prefix or something with which I can disable certain styles only in IE9?
I would advise you to use CONDITIONAL COMMENTS (http://msdn.microsoft.com/en-us/library/ms537512.ASPX).
You can create a separate CSS file for your IE9 workarounds to avoid browsers that support styles that aren't supported in IE9 from downloading your css file. thus resulting on a faster load time.
<!--[if lte IE 9]>
<link href='yourstylesheet' rel='stylesheet'/>
<![endif]-->
This question is unlikely to help any future visitors; it is only relevant to a small geographic area, a specific moment in time, or an extraordinarily narrow situation that is not generally applicable to the worldwide audience of the internet. For help making this question more broadly applicable, visit the help center.
Closed 10 years ago.
When I add a doctype to my site, my CSS fails to load. It works fine when there is no doctype.
This is my doctype:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
My CSS location is here:
www.site.com/static/css/main.css
Defined like this:
<link href="/static/css/main.css" rel="stylesheet" type="text/css" />
I did some googling, but my site pretty much validates, so I cant understand why the entire CSS would refuse to show completely!
Here is a URL: LIVE SITE
I am using latest Google Chrome
[21:51:53.698] The stylesheet /static/css/main.css was not loaded
because its MIME type, "text/plain", is not "text/css".
You need to make sure the mime type is text/css.
This question is unlikely to help any future visitors; it is only relevant to a small geographic area, a specific moment in time, or an extraordinarily narrow situation that is not generally applicable to the worldwide audience of the internet. For help making this question more broadly applicable, visit the help center.
Closed 11 years ago.
I'm having a bit of a problem with the conditional comment for IE.
<link rel = "stylesheet"
type = "text/css"
href = "css/stil.css" />
<!--[if IE]>
<link rel = "stylesheet"
type = "text/css"
href = "css/ie.css" />
<![endif]-->
It's not working in IE9, IE9 loads the normal stylesheet (css/stil.css) and not the one i specify in the conditional comment. Please help :)
IE9 loads the normal stylesheet (css/stil.css) and not the one i specify in the conditional comment.
From that sentence, it sounds like you're not expecting IE to download and apply the css/stil.css stylesheet. It should and will. It's just that it should also download and apply the css/ie.css stylesheet. Could it be that you're seeing styles from css/stil.css that you aren't expecting? On the face of it, the conditional comments work fine (I had to use style rather than link elements in that example, but the concept is the same).
I have designed a web portal, I have made that website good looking at Firefox browser,
But when I started testing with IE, some issues which works in IE 6 may not work in IE 8,
means back ward compatability is not there in the IE.
You can check my website at cricket scores
In this scenario, which IE version do you think to consider and make my website to work normal.
Edit
As per the below suggestions, I understand that need to create the separate CSS file
corresponding to each IE version like 6, 7,8, 9 and so on in future,
if the number of CSS files increases, wont that affect the performance and loading of the web page
please advice,
Unfortunatley IE does not render things the same as Firefox and is a common problem. The best way is to do IE Specific IF statements and have IE 8 Emulate IE 7. This does require a few additional CSS files, edited for each version. Below is the generic way to have it set up for IE/FF (belongs in head). Normally IE 6 & 7 are viewed the same so you do not need to have different CSS files for them.
<meta http-equiv="X-UA-Compatible" content="IE=7" />
<link rel="stylesheet" href="/templates/dchirotemplate/css/style.css" type="text/css" />
<!--[if IE 6]><link rel="stylesheet" href="style_ie6.css" type="text/css" media="screen" /><![endif]-->
<!--[if IE 7]><link rel="stylesheet" href="style_ie7.css" type="text/css" media="screen" /><![endif]-->
You can view a site I created with this style sheet setup by going to http://www.decrescenzochiropractic.com
Tip 1: Don't even bother trying to make things look good on IE6. Make it work on IE6 if you must, but if you start trying to achieve perfection in IE6 you'll be in for a world of pain and frustration.
We have officially dropped support for IE6 on our new site; we're not even testing with it.
Tip 2: Look into using some javascript libraries that provide better cross-browser compatibility for IE. Here are some good ones:
Dean Edwards' IE7.js
CSS3Pie
Whatever:hover
Selectivzr
Modernizr
Also consider using jQuery or similar; this is a bigger jump than just compatibility, since it involves changing your coding style quite considerably, but it does provide very good cross-browser compatibility for most of its functionality.
You should use IE-only conditional comments, in the form
<!--[if IE 6]> <p>hello world of bugs!</p> <![endif]-->
This way you can load custom stylesheets, etc.
You should make your site work with all browsers.
A quick and dirty trick for IE 6 and 7 is also the star selector but don't overuse it:
body{
background-color: blue;
*background-color: red /* Only shown in IE */;
}
Fact is IE will be the most troublesome of browsers.
Traditionally, IE has not been compatible, period.
While most of the other browsers were working to be compatible with the standards coming out, MS was trying to be smarter and better than everyone else and doing their own thing. This has caused a lot of problems for many designers. A lot of design books have an entire chapter on dealing with IE's quirks.
Fortunately, it appears MS is finally starting to see the light. To Microsoft's credit, IE8 defaults to a mode that is more standards-compliant that IE7, breaking sites that targeted earlier versions of IE. And, from what I've read, they're as committed as ever to the standards with IE9.
So to answer your question, I'd try and be compatible with the later versions. That way, your site is likely to remain valid for longer. However, any good website designer will test on all the top browsers. I use IE, Chrome, Opera, and FireFox.
I think you are going about this all the wrong way.
Yes, you could create separate style sheets, and you may still have to. However, the markup on your page is absolutely atrocious. You are sending every browser that hits that page into quirks mode, and getting pages to look the same, or even function the same, between browsers when they are all in quirks mode is a chore in and of itself. Don't get me wrong, it can be done, but it takes quite a bit of duck tape and bailing wire.
You should really fix your markup, then assess your css. You can definitely make a page that looks like yours with a single style sheet, even in IE6.
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.