If you read this blog, there is a 99% chance you’ve had a hair-pulling experience with IE. But if you are worth your salt as a CSS coder, you should be able to deal with it. I am of the opinion that you can handle anything IE can throw at you without the use of hacks. Hacks are dangerous, since they are based on non-standard exploits, you can’t predict how they are going to behave in future browsers. The tool of choice for fighting IE problems is the conditional stylesheet. IE provides comment tags, supported all the way up to the current IE 8 to target specific versions, as well as greater-than/less-than stuff for targeting multiple versions at once.
Why use conditional stylesheets?
- You got problems, they need fixin’
- Keeps your code hack-free and valid
- Keeps your main stylesheet clean
- Perfectly acceptable technique, sanctioned by Microsoft
And remember, these conditional tags don’t have to be used only for CSS. You could load JavaScript, or even use them down in the content of your site to display special IE-specific messages.
The Code
This would go in your <head> with all the other regular CSS <link>ed CSS files. The opening and closing tags should be familiar, that’s just regular ol’ HTML comments. Then between the brackets, “IF” and “IE” should be fairly obvious. The syntax to note is “!” stand for “not”, so !IE means “not IE”. gt means “greater than”, gte means “greater than or equal”, lt means “less than”, lte means “less than or equal.”
Note that IE 10 and up DO NOT support conditional comments at all.
Target ALL VERSIONS of IE
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="all-ie-only.css" />
<![endif]-->
Target everything EXCEPT IE
<!--[if !IE]><!-->
<link rel="stylesheet" type="text/css" href="not-ie.css" />
<!--<![endif]-->
Target IE 7 ONLY
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="ie7.css">
<![endif]-->
Target IE 6 ONLY
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="ie6.css" />
<![endif]-->
Target IE 5 ONLY
<!--[if IE 5]>
<link rel="stylesheet" type="text/css" href="ie5.css" />
<![endif]-->
Target IE 5.5 ONLY
<!--[if IE 5.5000]>
<link rel="stylesheet" type="text/css" href="ie55.css" />
<![endif]-->
Target IE 6 and LOWER
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="ie6-and-down.css" />
<![endif]-->
<!--[if lte IE 6]>
<link rel="stylesheet" type="text/css" href="ie6-and-down.css" />
<![endif]-->
Target IE 7 and LOWER
<!--[if lt IE 8]>
<link rel="stylesheet" type="text/css" href="ie7-and-down.css" />
<![endif]-->
<!--[if lte IE 7]>
<link rel="stylesheet" type="text/css" href="ie7-and-down.css" />
<![endif]-->
Target IE 8 and LOWER
<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" href="ie8-and-down.css" />
<![endif]-->
<!--[if lte IE 8]>
<link rel="stylesheet" type="text/css" href="ie8-and-down.css" />
<![endif]-->
Target IE 6 and HIGHER
<!--[if gt IE 5.5]>
<link rel="stylesheet" type="text/css" href="ie6-and-up.css" />
<![endif]-->
<!--[if gte IE 6]>
<link rel="stylesheet" type="text/css" href="ie6-and-up.css" />
<![endif]-->
Target IE 7 and HIGHER
<!--[if gt IE 6]>
<link rel="stylesheet" type="text/css" href="ie7-and-up.css" />
<![endif]-->
<!--[if gte IE 7]>
<link rel="stylesheet" type="text/css" href="ie7-and-up.css" />
<![endif]-->
Target IE 8 and HIGHER
<!--[if gt IE 7]>
<link rel="stylesheet" type="text/css" href="ie8-and-up.css" />
<![endif]-->
<!--[if gte IE 8]>
<link rel="stylesheet" type="text/css" href="ie8-and-up.css" />
<![endif]-->
Target IE 10
Universal IE 6 CSS
Dealing with IE 6 and below is always an extra-special challenge. These days people are dropping support for it right and left, including major businesses, major web apps, and even governments. There is a better solution than just letting the site go to hell, and that is to serve IE 6 and below a special stripped-down stylesheet, and then serve IE 7 and above (and all other browsers) the regular CSS. This is been coined the universal IE 6 CSS.
<!--[if !IE 6]><!-->
<link rel="stylesheet" type="text/css" media="screen, projection" href="REGULAR-STYLESHEET.css" />
<!--<![endif]-->
<!--[if gte IE 7]>
<link rel="stylesheet" type="text/css" media="screen, projection" href="REGULAR-STYLESHEET.css" />
<![endif]-->
<!--[if lte IE 6]>
<link rel="stylesheet" type="text/css" media="screen, projection" href="http://universal-ie6-css.googlecode.com/files/ie6.0.3.css" />
<![endif]-->
Hacks
If you must…
IE-6 ONLY
* html #div {
height: 300px;
}
IE-7 ONLY
*+html #div {
height: 300px;
}
IE-8 ONLY
#div {
height: 300px\0/;
}
IE-7 & IE-8
#div {
height: 300px\9;
}
NON IE-7 ONLY:
#div {
_height: 300px;
}
Hide from IE 6 and LOWER:
#div {
height/**/: 300px;
}
html > body #div {
height: 300px;
}
Argument against conditional stylesheets
We shouldn’t need them. They are against the spirit of web standards.
Argument for conditional stylesheets
Yeah, but we do need them.
While I agree that using hacks for IE is a dirty method, I would personally not agree that using the IE 6 and IE 7 selectors (*html, * etc) as I think they are useful and help you get your design closer to pixel perfect.
In regards to the min-height/ min width issue I personally use a hack (read about it hear) as it makes my life easier…
Pretty much the only other hack I will use would be for pngs for ie6 (also read how I used it hear)
Your links didn’t seem to work dude, but i’m guessing you mean the expression used for min-width/height in ie6 which i do personally use, along with the ‘background:none;filter:progID:DXImageTransform’….etc. stylesheet fix for png’s – which i also use, i can’t see a tidier way to do both of these and i do believe they are both fine to use also.
btw I would be interested in your tips on how to get around these problems without the hacks I mentioned above…
What a great post. I already knew the technique and I even use it, but it’s well explained ! Grreat job !
Nice work Chris, keep ’em coming.
Hey Chris.. Find this article really useful.. Well done!
Hey thanks this is just what I needed! God I hate IE!
You know micro-s did that on purpose. Now that bill jumped ship maybe they can get there act together. also pass word protect the registry micro-s! Nice work on Your sites Chris and i Love Portland O.
very useful post, thank you for instructing people on the best practices for css.
the underscore hack like [ _height: 300px; ] works with non IE-7. but one problem: [ _height: –300px; ] doesnt work
* html #div {
height: 300px;
}
For IE7 only?
Never used it – I go for
*:first-child+html "selector here" {
height: 300px;
}
And this is what I'd use for IE6:
* html "selector here" {
height: 300px;
}
Thanks for the post. I’m going mad with IE8! Is there a way to create a separate sheet with only the hacks, which would be opened and overwrite normal CSS if IE? Not having much luck :(
Thank you for the conditionals! Helped me out of a bind.
(It might just be me, but you might want to check this page in IE6. Each person’s tiny-image is covering up their name and part of their text.)
Damn, another hacking IE post :) Well, these hacks do work sometimes, so thanks for listing them Chris! Cheers!
~ K.
I prefer including conditional stylesheet content inside a global.css file – this means that you’re reducing header requests (ok, one isn’t the end of the world, but I’m a little OCD) and you don’t spend ages switching between stylesheets when developing (uses “non-IE” conditional):
Then simply reference those IDs from within your global.css:
Using “!important” or stacking parent IDs/classes, you can easily override styles and keep your fixes in one place.
Note: credit where credit’s due; I didn’t come up with this technique but I can’t remember who did so if anyone knows then please do respond!
I like this. You could probably also generate the ID with PHP to clean up the HTML even more.
Correct me if I’m wrong, but I thought IE had some “issues” with !important
None that I’ve ever come across. IE6 has issues with inheritance but using multiple selectors (parent elements) should work – an ID usually works!
There are definitely ways to improve this – using php would work great!
Chris, in your example in this comment, you use the “if not IE” syntax correctly:
<!--[if !IE]><!-->
*content*
<!--<![endif]-->
However, in the article, you have it as:
<!--[if IE 6]>
*content*
<![endif]-->
What you have in the article doesn’t actually work; Browsers see it as just a comment. Anything inside doesn’t appear in ANY browser. You should probably correct the article to reflect this, so that people don’t get confused.
Thanks for the article, though! It’s nice to have all of these variations collected in one place.
<!--[if IE]>
<link rel='stylesheet' type='text/css' href='ie.css' />
<![endif]-->
works for me in ie7
Nice post … really beneficial
Thanks for sharing
but i have a query …….Is there any CSS property to make font smooth in IE?
waiting for reply
Why is it that lately anything with the Microsoft brand name is failing to meet the standard. Zero day exploits, critical patch Tuesdays, IE hacks. It is hard to image that a company with deficient products is still in business.
I guess it goes to show the lack of innovation and ingenuity of Redmond.
Come on now. We don’t need to rip on Microsoft. Have you seen IE 8? It doesn’t do so bad at rendering pages and it’s a heck-of-a-lot more secure than previous versions. As for critical patch Tuesdays — let’s just say there are people working against you when you have 85% of the market. Don’t worry, there will be viruses you have to watch out for on your Mac soon enough. I’ll admit, I primarily use my macbook, but I love my PC too.
What? Are you joking? IE8 is only even semi-passable when compared to older versions of IE. It’s like a broken down car, but now at least it has wheels so you can tow it. It is still a broken down car that needs to be towed. IE8 barely squeeks by supporting a bare minimum of todays standards. It is still making our lives difficult though with no support for basic stuff like psuedo-selectors and when you look toward more advanced stuff there is no support on any horizon from the IE front. In a few years I will be shocked if IE8 is not the bane of web development, and the primary thing holding us back. It barely scrapes by today, in a few years it will be a nightmare just like IE6 is now.
Really, MSs whole strategy with IE is just horrid, always has been, and hasn’t changed. Years between updates? I guess that is so that there is time for a million sites to be built which depend on IEs shortcomings to work properly. IE8 represents no change from their terribly lacking modus operandi.
I think the fact that Microsoft remains a successful business is a clear statement about what is wrong with our economy. Even MS Office has become a convoluted mess of applications now. I used to feel like at least Office was a solid product, but I switched to Open Office last year and have been perfectly happy with it.
How many new OS versions has MS put out in the past 10 years? Yet XP is still the standard and XP sucks, just not quite as badly as everything else MS has put out over the past decade.
I mean who else intentionally builds in support for hundreds of bugs because they waited so long to fix the bugs that if they now don’t support these ‘legacy’ bugs the “internet will break”?? As if the internet wouldn’t get along perfectly fine without any help at all from MS..
While I do understand the software development cycle and knowing that with each version there are going to be many problems solved. I am merely stating that with the current market share and amount of time Internet Explorer has spent in that market, that a better product would surly have emerged.
And no I will not be watching out for viruses on my SE version of Linux!
last example Universal IE 6 CSS is
instead of
Hacks FTW.
They don’t take up much space and I hate having to deal with multiple stylesheets. They’re also an extra request. Using hacks within your main stylesheet also allows you to skip conditional comments.
My concern is primarily, what if IE 9 comes out and the hacks that were supposed to be targeting IE 6 or 7 specifically now all the sudden fuck stuff up in IE 9. That would suck. That will never happen with conditional comments.
I’m agree with you, but the evolution of IE is progressive no retrospective, so when I see the new features of IE9, I found them very interesting, standars, SVG, etc. I think in the same way to David Walsh.
I see your point, but I think the “emulation” meta tag should be used to prevent that problem.
I know this is a 4 year old comment and so I don’t know if you will see my reply, but have you seen this hack? http://www.limecanvas.com/css-hacks-targeting-ie-10/
I’d be interested to know what you think, since it’s sort of the best of both worlds.
As always, nice article Chris. Regarding Government dropping support for IE6, we did that a year ago and many others are following suit.
should be
Well, I agree that using conditional comments is a good (maybe the best) way to avoid (or deal with) some IE6 (and sometimes IE7) limitations or specificities.
But I’m not sure that using the “Target everything EXCEPT IE” is a good idea.
I strongly suggest to use a regular stylesheet that every browser (including IE) will use and add some IE specifics stylesheets that will overload some of the CSS selector and properties that could trouble IE in the regular stylesheet.
I think that using the cascade is far more safe than maintaining 2 specifics steelsheets.
Yup, put the c back in css please!
great will be the party when IE6 will finally die..
Here is a nice "grave"
IE 6 already dead
Example only ie8:]
#add{height/*\**/:25px;}
Hasn’t it becoming obvious that folks that use IE really don’t give a flip about how the web looks? Serve them Helvetica (it’s too good for them) and Times. Save your hard work for those that appreciate it; the ones who are browsing the web with a modern browser. Serve your CSS 3 and stop using javascript to make it nice for IE6-7.
Stop supporting IE. Even MS is saying that now. http://www.abc.net.au/news/stories/2010/01/19/2795684.htm
Everyone should ask their mother (and grandmother) what browser version they are using. After explaining to them what a browser is, you will probably not be surprised that they don’t know what version they are using. And less surprised that they don’t know how to upgrade. It’s not that they don’t care; they just don’t know how.
I’m not advocating an additional full-blown design just to support an antique browser but have a heart. It’s not much work to add a one-line conditional statement to give them a tiny bit of support.
The web isn’t just for the tech-savvy.
Am I the only one who noticed that CSS Tricks isn’t styled in IE6?
There are no visual elements to the site at all. I find it bizarre you would make a posting about styling for IE6, when, in a way, you don’t bother.
Is there a certain reason for this Chris?
It does have SOME styling. I use the Universal IE 6 CSS (see above).
Lol that’s actually kind of funny :P
No, he does bother. If he didn’t bother you would just the regular styles in whatever way IE 6 decided to render them. Instead you see a semi-bare, more readable version than you otherwise would.
I can’t say that i have ever used fixes or separate stylesheets when designing, most of my designs I create so that even if IE6 does display something slightly different it still looks “normal”. I probably spend more time than the average person on my stylesheets but its well worth the effort so that you only need one stylesheet and no fixes.
And considering the usage of IE6 is dropping each year Im not 100% put off if something is quite the same in the rest of the browsers.
Another big fan of “hacks” opposed to maintaining multiple stylesheets.
Use a proper/valid doctype.
Use a CSS reset.
p {
color:blue; good browsers
*color:red; ie 7 and below
_color:green; ie6 and below (to override any ie7 specific style)
}
Just document the * and _ at the top of your stylesheet for anyone who may not know what they mean. It then becomes crystal clear in your code what each hack does.
These are the hacks I use as well, they are my preferred method. It is so much easier to see them with the rest of the normal styles.
In addition, for IE8 I use this:
p {
color: black\9;
}
This is my standard thing for IE6:
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="/css/IE6.css" media="screen" />
<meta http-equiv="imagetoolbar" content="false" />
<![endif]-->
Chris,
For Additional Resources you should include this website, It is all about IE6 bugs: http://www.virtuosimedia.com/tutorials/ultimate-ie6-cheatsheet-how-to-fix-25-internet-explorer-6-bugs
That link leads to a PDF/Exploit.Gen Trojan.
There are less and less users of IE6 and IE7/8 renders just about the same as Firefox. Hopefully, in the not so distant future, everyone will be using compliant browsers and we wouldn’t have to make separate stylesheets for these browsers.
Ok, so I’m just getting into using conditional statements as we’ve had a few layouts recently we just couldn’t get to work universally.
I’m kind of curious about how you are formulating your stylesheets then. Are you essentially just say, make 3 copies of your .css file for IE6, 7+ and FF, and each copy is the complete stylesheet but accommodates the elements?
Or do you only have the page elements (pagewrap, container, content, etc) in this conditional .css? And then you have another .css that contains all the stuff like forms, p, h1, etc?
Or do you just have to put fixes to the 1 or 2 divs in your conditional .css file, and IE will override that one div?
You should list your MAIN stylesheet first, then the conditional stylesheets AFTER. That way the conditionals you just OVERRIDE whatever little things need tweaking.
Great thanks! That’s WAY better than what we did – which was just duplicate the same stylesheet and messed with a couple of the elements. Really cluttered compared to what we could have done.
I don’t like hacks, a separate stylesheet may be an extra request but it will usually be a very small file and it makes things much easier to maintain.
Having said that I had an interesting scenario a while back where I needed a conditional comment to target all browsers (including non-IE!) except IE6 because an embedded .swf that my client insisted upon would cause it to crash. Stu Nicholls came to the rescue with a bizarre range of what I am guessing are hacks that do just this:
http://www.cssplay.co.uk/menu/conditional.html
This allowed me to embed the .swf for all browsers, except IE6, which just got a static image.
Don’t see why this should have been any problem. I also don’t see why you would want to invert your wording “all browsers except IE6” when really you only needed to target IE6.
Maybe it was your oddly inverted wording which caused your trouble in the first place (because you were looking at it wrong). All you needed was a single conditional stylesheet for IE6 with something like .display:none; in it. because then whatever was nested in the thing which get’s .display:none; won’t even DL at all (unlike with .visibility:hidden; where the content is still there, but invisible).
IF for some reason that wouldn’t work then you could have still just used conditional comments in the HTML to add in some comment tags before and after your SWF. So that in IE6 only the SWF gets commented out. Not sure if that would work because conditionals may or may not be able to contain comments, but there are other methods too.
Like useing a single IE6 conditional comment to add a few characters to the filename of the SWF, thereby pointing IE6 at a different file that doesn’t cause it to crash.
There are 100 other ways to address this sort of issue by targeting only IE6. So saying you really needed to target everything BUT IE6 is bass ackwards and serves only to confuse the issue. You needed to target IE6, nothing special about it.
Yeah, maybe you’re right. I guess I just got carried away with the excitement of doing things backwards…
Thanks for the conditional statements and useful hacks, I know you ‘shouldn’t’ use them but some times it’s the only solution when dealing with IE6.
Great tips. These are most useful hacks for IE.
Thanks
I read this article after reading numerous articles about the Google-China-IE-exploit-hole-blah-blah-blah. I am glad that my small business market has no desire to worry if their websites function in IE6. This is mainly because of me pointing out the perils of something that is outdated and unsafe! I am using a wonderful piece of javascript found right here at CSS-Tricks on my current 3 projects and will be adding it to all future projects. I am of the mindset that feeding into something that is broken will never allow it to truly be fixed. Begone IE6 you dirty bastard!
Chris, thanks…you just saved me many hours in the future. I can remember !FONDLY! being up at 3AM working on a deliverable and everything was great except for IE6 compatibility……Such fond memories…no more!
I have been looking for this! But I wonder how many browsers support the !IE rule? I mean wouldn’t it be better to just use the regular link instead of putting it in a comment?
Why using hacks in the first place, just download en use Conditional CSS, http://conditional-css.com/
i have try this example but i need css different browser different css that example not working perfectly. please you will try and let me know
After designing and coding websites for 15 years now, I slowly got to the point, where I’m able to do any layout without even one IE specific css or hack except for maybe png’s. Makes handling of the site and life a lot easier. I now laugh at others needing an seperate IE6/7/8 and what not stylesheet… nightmare!
When I code, I often just take a quick look at IE6/7/8 in the process to make sure, but rarely need to adjust something. Most things are possible to do pixel exact, sometimes you just have to accept slight differences. It also depends a lot on how you design a layout and what your excpectations are. For years I was like crazy spending lots of time creating IE stylesheets and using hacks just to have it 2 pixel more to the left and didn’t know better or wanted to change to try different. What a waste.
Reducing HTML code and go for the most minimalistic code possible and the right way of padding/margins and floats etc., is what turned out to be the way to go. Of course experience in what is possible and what can cause problems in different browsers, and also adapting each new project to try it different and not stick with “how I do it always”, helped alot.
I have to agree with @soma on this. I’ve never needed a specific IE 6/7/8 hack – just test as you code in all (well, as many as you can muster) browsers and if it truly is f***ed in IE work around it. You are a designer – it is a challenge! – First rule of web page design I was taught ” a clean well presented layout makes for easier reading, a happier visitor and a credible web page”.
Once in a while the png scenario pops up but there is a quick easy work around/hack article on this site somewhere. As stated above – get the basics learned and learned good (padding, margin, float, “display: inline;” – and build from there.
I kind of agree that most of the time, it’s possible to produce css that works across most browsers. In my experience, I’ve found that the exceptions are a. using other peoples plugins (jQuery plugins etc…) and b. inherited projects from other designers. Other than these two situations, I typically don’t have to use conditional comments.
By using conditional stylesheets you are punishing your IE users with an extra additional HTTP requests for the conditional item. 1 Doesn’t sound like much, but if you use a crap browser like IE. Every request counts to have good performing web page.
There for I would advice to use CSS hacks instead.
Oh, and you forgot the star hack for IE7 and lower
*background:red;
what do you think of the Google IE8.js ?
It does what it claims, and is good for getting older IEs to recognise some of the more advanced CSS selectors, but it is pretty hefty (about 40k), and I have noticed a considerable lag in page load times whilst it does its stuff.
Not worth it if you only have a few issues that can be fixed with a couple of extra lines of CSS.
I have a problem with png files in internet explorer 6, “how to remove the background”
hi
you need remove to background in png in <img /> tag you have put so apply pngfix.js and you have use in background class so use filter background css
please check this example
http://jquery.andreaseberhard.de/pngFix/
I have found DD_BelatedPNG to be a good solution:
http://dillerdesign.com/experiment/DD_belatedPNG/
As it gets around the some of the issues experienced with the MS Filters by using VML instead.
Chris, unless I’m missing something, you seem to have made a mistake. You’ve listed “* html (selector)” as “IE7 Only” but that should be “IE6 Only”.
For “IE7 Only” someone else pointed out the “first-child+html” hack, which works, but apparently you can also use “*+html (selector)”. That seems to target IE7 only as well, but I’ve never used it in a real example, just in tests.
I once tried these codes but it doubled my work. Then i tried CSS reset and able to make one CSS file for ever browser. I think if we use CSS reset and know some bugs in IE6 bout float we can easily create global CSS.
Really good article. I am also fade-up with IE6.
Thank you!
One addition on the hacks:
body
{
background: white; /* all browsers */
*background: black; /* will show black on ie7 only */
_background: blue; /* will show blue on ie 6 only */
}
so no need for * html ….. Much simpler ah?
Just make sure you put the one for all browsers first, of course, so it doesnt overwrite the other ones!
Curious: How did I find this out? Accidentally: After so many years coding I accidentally placed an _ before a command and noticed that it was working only on ie6. The * for ie 7 I learned from Michael at Bravo TV.
You know micro-s did that on purpose. Now that bill jumped ship maybe they can get there act together. also pass word protect the registry micro-s! Nice work on Your sites Chris
Hello All,
I need a solution for my site css (i have been stuck :(
i am using jquery toggle and toggle a div when click “Kisa Yollar” (on the top right of page, means shortcuts), in firefox or chrome, it works great but in ie the div goes more right (out of page)
Here is sample page:
http://www.ihaletakipsitesi.com/ihale_tarihi_yaklasanlar_konuk.asp
I will be appritiate if you help me for this, and thanks so much
All the best
Ozgur
I LOVE YOU! Firefox is so much better than IE.
hi all,
might share this in case anyone has wondered if there’s an easy way to trick wordpress to take another css if IE6 is used to view a site. so you could make a modern theme for IE7 and proper browsers, but also have it working with IE6 and below.
short description of how to do it using the stylesheet filter is here
I have problem with conditional stylesheet. You can see on http://www.parkic.byethost7.com/ I made two stylesheets. One for lt IE 7, and other for IE7, IE8 and other browsers. The point is that my statement doesn’t actually work, which gives me a plenty of headache. Any solutions?
Is it really worthwhile to create style sheets for IE 7, IE 8, IE6 and then one for other browsers? I use a style sheet for IE only and one other for others. I make sure that everything looks OK in Firefox and Safari and then I reposition everything in the IE specific sheet. Shouldn’t that be enough?
Today IE6 has dropped down to 10.2% as soon as it gets into single figures I’m going to drop support. Most of its quirks I can handle, but the fact that it completely screws up when you have a png background really compromises my designs. Who on earth uses IE6 anyway?
wow, I never thought this could be possible. Thank you so much
I have one site which is giving me trouble with IE 8 and Firefox. It wont render a drop down menu as Google Chrome. I tried to change the “if lte IE 6” to “if lte IE 8” and still not working. Please help if you have any idea
Here’s the site: bestofcampuscrimelog.com
Hey all can someone please help me with this. Been trying to fix this float/margin problems for days now on IE6 I’ve tried the display:inline; and researched all possibilities with no luck.
Please review you can see that the problem in IE6 is in the header as well as the main content. How can this be rectified.
Heres the link:
omved.boldwerks.com
Thanks a ton this is nuts,
-Adam
Great post! This is my first attempt to create a CSS file specifically for IE. I’ve taken the code from above
<!-- [if lt IE 8] -->
And it appears to work fine for the homepage but doesn’t seem to work on other pages within my site? I’ve added a little more detail on my blog here http://bit.ly/9q6xdF
Would appreciate some advice,
Thanks
Hi Chris, nice post. Very informative post this.
The following code correctly identifies Internet Explorer 5.
<!–[if IE 5.0000]>–>
Internet Explorer 5.0!
Ie 5, which shipped with Windows 2000, has a version vector equal to 5.0002. Pls note: the conditional expression [if lte IE 5.0000] returns false when evaluated in the release build of IE 5.
The value of the expression is called a version vector by the way.
Thks!
Trying to send the code here..
echo”
";
\n”;echo"<!--[if IE 5.0000]>\n";
echo"<p>Internet Explorer 5.0! </p>\n";
echo"<![endif]-->
ok. this should work :) sorry for the above.
Some have experimented some strange action with IE 5.5
May be IE is right! I think one need to be more specific when targeting ie. Instead one can try this:
In the ex below, only the major ver number is specified; therefore, the code evaluates as true for both Internet Explorer 5 and Internet Explorer 5.5.
<!--[if IE 5]>
<p>using any incremental version of IE 5! </p>
<![endif]-->
Hope it helps.
thks!
Thanks a ton for this wonderful hack for IE. It has taken some time, but slowly I’ve started doing ok for IE.
;)
Hey
So I’ve created a style sheet to fix up my css when my website is accessed through Internet explorer.
However it doesn’t seem to be working (I know the style sheet is connected because I can change the body font, but I can’t seem to align my menu buttons at the top of the page in the header). I’ve even tried copying and pasting my css from my original stylsheet (which works in both chrome and mozilla) and placed it in the IE style sheet but nada.
At the moment this is in my IE style sheet, am I simply making a stupid mistake (this is still very new to me):
nav ul a{
display: inline-block;
text decoration: none;
width:100%;
text-align: center;
}
nav ul {
}
.menu ul al{
display: inline-block;
text decoration: none;
}
The website i’m working on is emily-jayne.net
AND, what about IE11? any ideas?
Thank you. This is a very useful resource.
Just one comment though. As you say IE 10 and up don’t support conditional comments and the other problem is that they will execute the styles in it. Which means if for example you add a conditional comment for IE8 only this will be executed by IE8, IE10 and IE11… This is a nightmare.
I don’t think so. They should fall back to HTML comments and be ignored in 10/11.
Thank you. This is a very useful resource.
My que
Different CSS for each browser?
like Safari,Crome ,Mozila,IE
Ex
<!–[if gte IE 7]>
<![endif]–
And Using Mozila
<!–[if gte MO 7]>
<![endif]–
Any trick ?
I’m afraid conditional comments are only for Internet Explorer. Detecting other specific browsers can possibly be done by “user agent sniffing” but that’s bad news: https://css-tricks.com/browser-detection-is-bad/
** Now i find Solution Each browser to handle browserwise css**
Ex
document.write(‘<‘+’link rel=”stylesheet” href=”/weddix.css”/>’);
if(isSafari){
document.write(‘<‘+’link rel=”stylesheet” href=”/weddix_safari.css”/>’);
}else{
document.write(‘<‘+’link rel=”stylesheet” href=”/weddix_browser_default.css”/>’);
}
Firstly, I am new to styling so may be I could guess anything wrong…
Sir, Don’t you think that adding too much additional CSS Sheets would increase some more http requests which increases page load time and I was interested in knowing if there is a way to make these conditional adjustments withing single stylesheet…
Also, I was interested in knowing that if your responsive menu based only on css or needs jquery or js also…
Hi Himanshu, You can target IE by using the
<!--[if IE]>
statement around your stylesheet tag.In answer to your first question, Chris concludes at the end of his article;
However this article is very old should only be used as a guide only. For example HTML5 attributes such as
placeholder
,box-shadow
and others aren’t supported in old versions of IE (8 and below) so conditional stylesheets can be handy to ensure a better UX for IE users who dont receive the benefits of modern browsers. Of course you can display an Upgrade your browser message using conditionals too.What if we want to use an style for IE9 and below. I want to give a soild color instead of gradient in IE9 and below.