I'm trying to make a couple of web pages work for a client in IE8, however I'm not getting anywhere at all.
I'm trying to include a css file to combat some of the issues, but whenever I include a stylesheet using:
<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" href="ie8-2.css" />
<![endif]-->
everything below the header of the page disappears. Even if there is nothing in the stylesheet at all!
Any ideas why this might be?
Here's the page link, if anyone wants it.
Related
I have a glitch on Internet Explorer (all editions, including 8+), where the logo is not displaying correctly. It is displaying perfectly on all other browsers, but the glitch is not being rectified by the file ie.css (which I believe should fix the existing issue. Any help would be greatly appreciated. The website is as below:
http://www.taray-investments.com/
Thanks in Advance
<!--[if lte IE 8]>
<link rel="stylesheet" type="text/css" href="/css/ie.css" />
<![endif]-->
Your code is only loading the ie.css if the version is less than or equal to 8
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="/css/ie.css" />
<![endif]-->
That will load if it's IE at all.
Of course as suggested using PNG instead of SVG is your main goal for old IE versions but I don't believe your site works under IE8- correctly anyway and it's (imo) ridiculous for clients to expect support for IE8- anyway.
I can only guess what is going wrong, but here are some possible problems:
1) Logo is not scaling correctly, in latest versions of IE
2) I saw some transitions in your code, so this might be the issue.
3) Any other svv background related bugs.
First can be fixed with svg inline attributes.
Second and 3rd are unfixable thou.
If you want to suppot any versions of IE older than 11, i suggest using .png instead of svg.
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.
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.
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" />