was working perfectly earlier this week, and now in IE everything seems to be messed up. Any ideas?
Specifically testing in IE 7/8
There's a stylesheet (http://www.currensee.com/css/blueprint/ie.css) being served to all versions of IE less than IE8 that's returning a 404. I'd bet that might be your culprit.
This line of code:
<!--[if lt IE 8]><link rel="stylesheet" href="css/blueprint/ie.css" type="text/css" media="screen, projection"><![endif]-->
is using a relative path from your page.
Looks like it should be pointing at:
<!--[if lt IE 8]><link rel="stylesheet" href="/themes/currensee/css/blueprint/ie.css" type="text/css" media="screen, projection"><![endif]-->
where the rest of your stylesheets live.
The problem is the comment on your first line. IE looks for the doctype there and, if there is none, goes into quirks mode. Remove that comment.
btw, you are using the XHTML 1.1 doctype which is an XML application but serving it as HTML. If you must use XHTML, change it to the 1.0 doctype. Not that it makes any difference since you aren't serving XHTML anyway.
I don't know whether it's the root of your problem, but your IE stylesheet
http://www.currensee.com/css/blueprint/ie.css
doesn't exist.
Related
I've just lost one hour of my life trying to optimize a site for IE. I failed doing it the normal way and I solved it using tricks like these for some divs:
<!--[if !IE]><!-->
div1 for non IE
<!--<![endif]-->
<!--[if IE]>
div1 for IE
<![endif]-->
Now it is working properly in IE, but is it ok to use these kind of solutions?
When I develop a website I always make it clear that different browsers interpreted HTML differently, and that their website may look slightly different in IE than in Chrome, Safari et al, but that the overall appearance, meaning and functions will work. Also I always let them know that I don’t build for IE6 and older, that the website will be visible, but some basic functions and layout principles will not work properly. (I also show them the percentage of users who still use IE6). Does the client explicitely asks for an <IE6 website? Charge extra!
This is the question you should be asking: how important is it to you that your website looks EXACTLY the same in all browsers?
For the rest, optimizing for crossbrowser compatibility can be done with different stylesheets for different browsers. However, I recommend keeping the number of stylesheets as low as possible, and try to use as much as possible CSS-attributes that work for all browsers.
This is a rather bad solution and in my experience in most cases not necessary. You should try to get your markup consistent and not have it change for the different versions (Except perhaps such weird cases like Table-layout for dropdowns for IE6)
However it's okay, to have several stylesheets for the different IE-versions to deal with the bugs of the different IE-version.
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="ie6.css" />
<![endif]-->
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="ie7.css">
<![endif]-->
<!--...-->
<!--[if !IE]><!-->
<link rel="stylesheet" type="text/css" href="standard-style.css" />
<!--<![endif]-->
From IE-8 on, your IE-specific stylesheets should be very vew lines - luckily they are pretty standard-conform from that version on.
I created my website using a mac. As you know I can't test it out using Internet Explorer, I left it for the last but expecting layout disasters. The website looks perfect in Chrome, Firefox and Safari. As expected, IE shows it differently. How should I move on from here?
Create a style sheet just for IE?
Update my existing style sheet to display the website as expected in all the browsers I mentioned earlier?
To me, (1) seems to be the easiest choice so that I can tailor my CSS to display properly in IE without worrying about Chrome, Firefox and Safari. Do you think this is ok?
Thanks!
You can target specifically your stylesheet for IE only. You will need to put condition code on heading section of the page. See below for examples.
For all IE
<!--[if IE]>
For all IE
<![endif]-->
If you just want to target to specific version of IE then
<!--[if IE 7]>
For only IE 7
<![endif]-->
There are a couple things you can do.
Conditional Comments
Example of a conditional comment to target all versions of IE
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="all-ie-only.css" />
<![endif]-->
You can find more conditional comments http://css-tricks.com/how-to-create-an-ie-only-stylesheet/
Validate Your Css fixing some obvious markdown mistakes may improve your code immensely.
Which version of IE are you targeting? Most of the major pains with IE CSS2 bugs are in IE6, and to a lesser extent, IE7 - however IE8 and IE9 are much better and I haven't experienced any bugs that would require them to have separate stylesheets.
If you are targeting IE6/7 then you have my sympathy, but I don't see why you should bother as IE6 usage is negligible nowadays. However, if you must, then conditional comments are the least painful way of managing the problem. Simply do this in your <head> element:
<!--[if IE 6]>
<link rel="stylesheet" href="ie6patch.css" />
<![endif]-->
Read more here: http://www.quirksmode.org/css/condcom.html
Also, don't forget to add <meta http-equiv="X-UA-Compatible" content="IE=edge" /> to your page force IE8 and IE9 to use Standards mode.
In the future you can use a css reset to minimize differences between browsers. I have used this one in the past: http://developer.yahoo.com/yui/reset/
Also consider using a template like http://www.99lime.com or similar.
Check out conditional comments.
A stylesheet being loaded inside an IE conditional tag is being loaded in Google Chrome version 11.0.696.65. The IE only rules are throwing off our layout in Chrome.
<!--[if IE]>
<link href="/Content/site.ie.css" rel="stylesheet" type="text/css" />
<![endif]-->
I've checked the code character for character and it looks fine to me. Is anyone else experiencing this? Is this a Chrome bug or some misguided feature?
Edit: Chrome is fine. We have a custom theme switcher which was erroneously loading a different copy of the site.ie.css from a theme's folder.
try
<!--[if gte IE 5]>
<link rel="stylesheet" type="text/css" href="style.css" />
<![endif]-->
It will target every internet explorer version above ie5, which should be the same as all ie versions. I have never had problems with conditional comments, not in Chrome or any other browser, but i always target only specific browser versions.
Im using the same version works for me on here. I would try reinstalling Chrome?
Chrome is fine. We have a custom theme switcher built which was erroneously loading a different copy of the site.ie.css from a theme's folder.
I'm redesigning my Tumblr blog and I use CSS3 Pie to add some eye-candy to Internet Explorer. The problem with this is that CSS3 Pie uses Internet Explorer specific files (.htc) that can only be served from the same domain as the HTML file, which is something I can't do on Tumblr.
The thing is that without that file the website breaks on IE6 & IE7 (I'm using HTML5 syntax and apparently these browsers don't really like it even with some help from Modernizr).
So, do you know any ways of adding such files from another domain than the one that serves the HTML? No matter how hacky it is.
I would suggest using conditional comments for IE to gracefully alert users their browsers are not supported, or to reformat the content for IE users.
<!--[if IE 6]><link rel="stylesheet" type="text/css" href="includes/styleIE6.css" /><![endif]-->
<!--[if IE 7]><link rel="stylesheet" type="text/css" href="includes/styleIE7.css" /><![endif]-->
<!--[if IE 8]><link rel="stylesheet" type="text/css" href="includes/styleIE8.css" /><![endif]-->
Another alternative, which I'm guessing is easier than the ".htc" hack you are suggesting. Is to use a basic java-script redirect. If the user is using IE (less than IE9) redirect them to a simplified, IE only, web page.
This is driving me nuts. I'm trying to use a conditional IE6 stylesheet. I posted this test page here. Here is the code I placed in my head tags:
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="ie6.css" />
<![endif]-->
The ie6.css should set the body background to red when viewed in IE6.
What's wrong here? I'm sure it's something dumb. Could someone please point it out to me?
It works fine for me. Run your test page through IE NetRenderer and you'll see the red background. Perhaps you're testing it in a version of IE other than 6?
You don't happen to be trying this using IETester?
Because with IETester, Conditional Comments will always resolve to the highest installed version of IE.
is the CSS file in the root folder (same folder as the HTML) ? it's good practice to put your CSS in a separate folder.
<!--[if IE 6]><link href="css/ie6.css" rel="stylesheet" type="text/css" /><![endif]-->
I just had a similiar issue. The conditional comments did not work correctly and I tried everything. The issue was that I had an X UA compatible meta tag in the header which obviuously influences the rendering. So keep watching out for that because that can be a reason.
<meta http-equiv="X-UA-Compatible" content="IE=7" />