I thought IE7 and above followed the same box model as Chrome/Firefox/Opera, but when I run the following code in IE8 and then in Chrome/Firefox/Opera, I get different results.
In IE8, the end of the box shows up with a bit of a lip that I want to get rid of. Is it possible to use strictly CSS to fix my issue or do I need to use Javascript to detect the browser and then change the CSS?
Here is the link to the code that I am working with. In order to see my problem, you need to use IE and then either Chrome, Firefox or Opera.
http://jsfiddle.net/LsXTk/1/
IE7 has two modes: Compatibility mode and Standards mode. Yet another of a long line of brilliant moves on MS's part with IE. (Yes, I'm being sarcastic):
http://blogs.msdn.com/b/chkoenig/archive/2008/08/28/ie8-standards-mode-and-ie7-compatibility-mode.aspx
What usually trips people up is that, by default, IE8 reverts to compatibility (ie, broke) mode if the page is being loaded locally or from a server on your network. I guess the logic was that it must be a page on your intranet, and since 90% of all intranet web software is horrifically coded IE6 monstrosities that pretty much break in any standard browser, it better assume the code is broken and revert to compatibility mode.
As for detecting IE8, you can do it without JavaScript via IE's conditional comments. What I typically do is wrap the opening body tag in conditionals and give each a unique ID:
<!--[if !IE]> -->
<body>
<!--<![endif]-->
<!--[if gt IE 8]>
<body id="IE9">
<![endif]-->
<!--[if IE 8]>
<body id="IE8">
<![endif]-->
<!--[if IE 7]>
<body id="IE7">
<![endif]-->
<!--[if lt IE 7]>
<body id="IE6">
<![endif]-->
Then in your css, you can easily serve up separate CSS as needed:
.myStyle {for good browsers}
#ie7 .myStyle {fix for IE7}
Related
I'm having problems when it comes to print in EI9. It seems that the css is failing, but it works great in IE10, IE11, Firefox and Chrome.
I read about bootstrap (yes, I'm using it) and html5 issues when it comes to this browser, but I couldn't find a solution that works in my case.
This is the most significant thing that I've tried so far:
<!--[if lt IE 9]>
<script src="html5shiv/dist/html5shiv.js"></script>
<script src="dest/respond.min.js" type="text/javascript"></script>
<![endif]-->
Thanks!
This might help.
Printing Twitter Bootstrap correctly
This site has a pretty detailed explination for html and js browser hacks. http://browserhacks.com
You could also try forcing the IE mode. Like set it to edge.
IE Compatibility Mode: 'X-UA-Compatible' tag 'Edge'
This is a long shot..
http://support.microsoft.com/kb/973479
i have used stylesheet main.css for firefox browser,and ie9.css for IE9 but problem is that style contained in ie9.css is not working on IE9 instead style contained in main.css is working which gives undesirable results?
It's hard to decypher what you mean without seeing your code. However to design for IE versions you can use conditional comments to specify different CSS rules for different versions of Internet Explorer:
<!--[if IE 9]>
<link href="ie9.css" rel="stylesheet">
<![endif]-->
Good day,
I want to apply two different CSS codes to fix some font-rendering issue (faux bold) in IE8, the latter cannot recognize all the font-family if they've got the same name, instead it only recognize the first font-family, so i'm attempting to use conditional comments to fix that :
First code is for older versions of IE (including IE8) :
<!--[if lte IE 8]>
<link href="IE8fonts.css" rel="stylesheet" type="text/css">
<![endif]-->
Second one is for IE9, IE10 and all non-IE browsers (Chrome, Firefox, Opera, Safari...), none of them has this faux bold issue :
<!--[if IE 9 | !IE]><!-->
<link href="fonts.css" rel="stylesheet" type="text/css">
<!--<![endif]-->
I know the first code is correct (or maybe not :p) , so i want to know if the second is correct too, because i don't get what i expect when i change compatibility mode in IE, certainly there is something wrong in the condition [if IE 9 | !IE]
I also want to know the correct order (if there is one) to put those two conditional comments.
Please help me with this because i'm kind a newbie in anything related to compatibility :/
You could apply the css for IE9+ and other browsers first, and then apply the conditional comment for IE8 or less, so the rules for font-family in fonts.css would be overridden by the rules in IE8fonts.css, if the browser is less than or equal to IE8. This way you can avoid complex and unnecessary conditional comments.
<link href="fonts.css" rel="stylesheet" type="text/css">
<!--[if lte IE 8]>
<link href="IE8fonts.css" rel="stylesheet" type="text/css">
<![endif]-->
Hope it helps.
Conditional comments are an IE specific feature. Other browsers just treat them as normal comments. Remember that an HTML comment starts with <!-- and ends with -->. Hence <!--[anything]> is the beginning of a normal comment, and non-IE user-agent will ignore anything after that until the next occurence of -->. On the other hand <!--[anything]><!--> is a full comment and non-IE browsers will process whatever is after that.
So I suggest you use:
<!--[if gte IE 9]><!-->
<link href="fonts.css" rel="stylesheet" type="text/css">
<!--<![endif]-->
From the point of view of a regular HTML parser (non-IE), this is two regular comments enclosing a link element.
I have an simple page, and everything works fine except ie8 and ie9 moves one of my elements 1px to the right, and its significant b/c it results in a 1px white line straight on black background. Horrible.
I've tried a lot of css hacks, and ie conditional comments but things like <!--[if gt IE 7]> or <!--[if gte IE 8]> aren't working. Only <!--[if gte IE 7]> is recognised, targets ie7 as well - but ie7 renders the page pixel perfect. So I've tried to rollback the changes for ie7 with additional comment <!--[if IE 7]> but this killed the fixes in later ie's. Ie8 and 9 seem to think they are ie7.
My code so far
<!--[if gte IE 7]>
<style>
#promo {margin-left:-1px;}
</style>
<![endif]-->
EDIT: Solved, It seems it is a bug in IETester, anything works fine in properly installed Explorers.
If it's just one thing you need to bump, you can also use:
<!--[if IE 7 ]> <html class= "ie7"> <![endif]-->
<!--[if IE 8 ]> <html class= "ie8"> <![endif]-->
This will give the html element the class of .ie7 or .ie8 depending on what they're using or what you've specified. You can then target whatever you want to override, like:
.ie7 #promo {margin-left:-1px;} or
.ie8 #promo {margin-left:-3px;} and target them individually. You could also specify a rule for IE 9.
And include it in your main stylesheet, near the bottom. This saves you from having to make a lot of different stylesheets.
As far as IE9 not rendering as IE9, I think Internet Explorer will actually fallback into a previous renderer if it's installed for reasons that are totally unknown to me. I think Paul Irish mentions it on his talk on the HTML5 Boilerplate on the onTwik website.
They use some code in their .htaccess file to force IE to use the most recent rendering engine, and will actually force IE to use the Chrome engine if it's installed:
<IfModule mod_setenvif.c>
<IfModule mod_headers.c>
BrowserMatch MSIE ie
Header set X-UA-Compatible "IE=Edge,chrome=1" env=ie
</IfModule>
</IfModule>
I would recommend using an actual stylesheet with the IE conditional comments.
This article gives a good overview, but I'd avoid the hacks section.
http://css-tricks.com/how-to-create-an-ie-only-stylesheet/
Are you doing anything that forces IE8/9 to go into Compatibility View? If so, you could be unwittingly telling those browsers to think of themselves as IE7, at least as far as it matters for interpreting those conditionals.
in ASP.NET application, how to design the pages in such a way that they are displayed properly in both IE6 and IE8 browsers? I would like to minimise the CSS work that I need to do if there are any general guidelines to follow which will work in both browsers. I may still need to tweak here and there, but I want to reduce bulk of the work. Please let me know if there are any such guidelines.
Thanks in advance.
I have been coding a recent project and used the ie7.js script from http://code.google.com/p/ie7-js/. It works marvels at fixing IE 6 to a reasonable level. Then use this block to declare your body. (This part was ripped from html5boilerplate).
<!--[if lt IE 7 ]> <body class="ie6"> <![endif]-->
<!--[if IE 7 ]> <body class="ie7"> <![endif]-->
<!--[if IE 8 ]> <body class="ie8"> <![endif]-->
<!--[if IE 9 ]> <body class="ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <body> <!--<![endif]-->
You can how polish up any stray css my using the respective id like this...
#ie6 .element{
//special stuff for ie6
}
The ie7.js script should save you quite a bit of time though.
If you add the following line to your section it will force compatibility mode and help minimize the amount of CSS you need to write:
<meta http-equiv="X-UA-Compatible" content="IE=100" />
However, you probably won't get it perfect without writing custom CSS rules.
Start by making sure that basic layout of your page is working cross-browser. This can be quite trick, but the good news is that other people already did the heavy lifting for you. Just google for "one column", "three column", "holy grail" or whatever layout your are aiming for and you will find plenty of articles describing how to achieve it in any browser you want.
Starting for there, my suggestion is to code for IE8 and add hacks for IE6 when required. This should keep the hacks at a minimum since CSS that works in IE8 usually also works for Chrome, Firefox and the other decent browser.
Don't try to make your site pixel perfect across all browser, this will only drive you insane. Let your website "degrade gracefully" on the older browser. IE6 users won't care if the site don't have rounded corners or gradients anyway.
Using javascript to simulate modern CSS features in older browser is also a good idea. But I don't recommend using the ieX.js scripts. These scripts require too much CPU to run and can make your site unresponsive if your HTML is heavy.