I've finished making my website, but then I loaded it up in IE8. Big problems! For instance, a bunch of my div and span elements seem to be transparent (they should have coloured backgrounds), and floating elements don't work.
When I was developing my site, I had hoped I would just be able to ignore the older internet explorers - ie9 is standards compliant, and eventually everyone will end up using that. However, Microsoft are not releasing IE9 for XP, but people are going to be using that operating system for a long time still, I think. As such, I need to support IE8.
Does there exist a comprehensive list of all the things that IE8/ do wrong? Not something like Quirksmode.org, but a guide to the common issues with layout in IE8, and the hacks needed to fix them?
EDIT: The transparent elements thing seems to be somehow related to my use of css3pie.
You could try using conditional classes to target specific fixes for specific versions of IE. This is from Paul Irish's HTML5 Boilerplate:
<!doctype html>
<!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="no-js ie7 oldie" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="no-js ie8 oldie" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
With these comments you can specify something like:
.ie7 #container {margin-left:-1px;}
And it would only change your #container margin on IE7.
If those don't work, post some of your code and people might be able to point out some incompatibilities.
Related
I am designing a responsive website. My CSS file starts with a block for the mobile layout, followed by a media query for the notepad layout and another media query for the desktop layout. I would like to make some concessions for IE8, which does not support media queries. SO, as currently structured, when my site is viewed in IE8, it reverts to the mobile layout, which is the first CSS block encountered in the style sheet. Not a good look for a desktop monitor, which I would expect the IE8 user to be.
Is it possible to insert some code in the CSS sheet that says "If you are an old IE browser, go to the desktop block for the layout?" OR, "Skip the mobile layouts"? ALternatively, I can create a separate IE CSS sheet, using conditional comments in the source code to call it up. If that's the way to go.
Will the extra style sheet be a drag on the load time for my page? (There's a limit to how far I'll go to accommodate people still on IE8!)
I like the way html5 boilerplate handles conditionals. It attaches ie classes to the html tag like so:
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
It makes it pretty easy to target what you want after that. Paul Irish talks about it. I would probably just stick with one large css file rather than have multiple, unless it's only one page of my site or I want to punish ie users.
Developping for all browsers, then fighting for IE compatibility is a well know step in all web developement process.
Not being a web integrator, do you know any generic compatibility stylesheet that are good to include for IE ( In my case I'm only concerned about IE7, but I'll let the question open for all version )
normalize.css is a good reset that addresses a lot of cross-browser issues.
http://necolas.github.com/normalize.css/
Twitter Bootstrap is good if you want pre-made components. It is IE compatible.
If you decide to use Bootstrap, its reset is actually adapted from normalize.css (so you won't need both)
HTML5 Boilerplate may also help with some best-practice markup if you're getting started from scratch:
https://github.com/h5bp/html5-boilerplate
In particular, I'd recommend using the HTML5BP conditional comments to target specific IE versions, like this:
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
That means in your CSS you can address IE version specific issues with classes:
.lt-ie8 .awesome-component { ... }
Finally, I would recommend AGAINST using javascript polyfills like CSS3PIE. In my experience they just cause more hassle than they're worth, adding unnecessary markup.
Learn a bit about graceful degradation / progressive enhancement.
Another answer mentioned IE7.js which I believe is fine, though I can't remember how useful it is. You'll definitely need to shim missing JS functions (if you're using js) such as Array.indexOf in IE <= 8. I just found this ECMAScript5 shim which looks pretty good:
https://github.com/kriskowal/es5-shim
I generally use Eric Meyer's CSS reset (http://meyerweb.com/eric/tools/css/reset/) which is a good simple starting point.
You may also wish to consider using ie7js (http://code.google.com/p/ie7-js/), which uses JavaScript to get different versions of IE to behave better.
Currently I am working on a webpage and need to set a style only for IE. I am using a conditional comment:
<!--[if IE]>
<link rel="Stylesheet" href="../../IEstyles.css" rel="Stylesheet" />
<![endif]-->
Is this the best way of doing this or would using javascript be the best practice?
That's nearly the best practice. You should probably instead be checking for [if lt IE 9], because IE 9 supports CSS pretty well, but definitely don't use browser-sniffing JavaScript. That's almost always the worst solution to a problem.
Html5Boilerplate is the site for best practices and here's what they suggest:
<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!--[if lt IE 7 ]> <html class="no-js ie6" lang="en"> <![endif]-->
<!--[if IE 7 ]> <html class="no-js ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]> <html class="no-js ie8" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
This allows you to keep one stylesheet and just prepend any of the above classes to target a specific conditional hack.
Not everyone has JavaScript enabled - HTML comments are supported in every mainstream browser that I know of.
As this is just a stylesheet, and therefore a UI concern, I would avoid javascript and just use the conditional comments to target IE. This then also gets around the issue of people who have javascript disabled, should you try and do some kind of browser sniffing.
Use Conditional Comments. They prevent other browsers from having to download/run any scripts, yet have the benefit of always working for IE users.
Using the conditional would be the best idea, as you have no guarantee that the visitor won't have javascript disabled, or scripting disabled. Where as this will only work in IE browsers, other browsers will ignore it, where as all browsers will process Javascript, whether it's for IE or not.
Javascript can be disabled, so I'd say conditional comments are the best way to serve IE-specific CSS.
I want to uses some css attibutes only for IE 6,7,8 in a css file. is it possible?
Is it possible to target specific version of IE for each attribute.
somthing like this:
.mystyle {
top:5px
top:-30px //only if ie6
top:-5px //only if ie8
}
i know about <![If lt IE7]> tags but, i dont want to create one more css file.
This script is tiny, and filled with awesome: http://rafael.adm.br/css_browser_selector/
It will put classes on the HTML element that correspond to the user's browser. That will let you do things like this:
.ie7 .mystyle { top:5px;}
.ie8 .mystyle { top:-30px;}
I wouldn't create a new external javascript file just for this script. Its so small that I usually just add it to the top of my existing external javascript file.
there are a number of hacks you can use in your stylesheets themselves but this is generally considered bad practise. Here is an example
Why don't you want to use multiple stylesheets?
inspired by Stephen's post you could do this (stolen from html5 boilerplate by paul irish):
<!--[if lt IE 7 ]> <html lang="en" class="ie6"> <![endif]-->
<!--[if IE 7 ]> <html lang="en" class="ie7"> <![endif]-->
<!--[if IE 8 ]> <html lang="en" class="ie8"> <![endif]-->
<!--[if IE 9 ]> <html lang="en" class="ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html lang="en"> <!--<![endif]-->
Final edit
should explain. If you add this to the html you will conditionally set an IE overriding class. The final line renders no class if browser is greater than IE9 (none) or not IE
You can use IE hacks, which will achieve what you're looking for. However, it's not advised to do that; long term maintenance will become difficult.
The conditional comments solution is the easiest and cleanest solution, and it's supported by MS. You should use them.
I'm using the proprietry MS 'filter' property to try and create a non ugly equivalent to css3 text-shadow and box-shadow;
I was actually doing really well until I hit this problem. It looks like when I apply a filter to a div inside another div which also has a filter the filter effects end up being combined on the child object.
I've tried using filter:none; to do a reset but no joy. I've also tried different variations on the syntax, ie "-ms-filter: 'progid:...Glow()'", "filter: progid:...Glow()", "filter: Glow()", etc..
Testing in IE8
There is boolean attribute enabled, for which you can set false or true
http://msdn.microsoft.com/en-us/library/ms532997%28v=vs.85%29.aspx
Example:
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(enabled=false)";
The -ms-filter property is a non-standard, browser-specific CSS entry and as such requires that its parameter is enclosed with quotation marks. So -ms-filter: "none" will work just fine.
try this:
filter: -;
I've had some success by positioning the children absolute or relative. This didn't seem to work earlier though so it may break again once I get more complicated
I think once a parent has a filter applied all of it's children essentially become directx surfaces internally. You can still select text but it lags. I think text selection is a hack which makes each letter a seperate surface. It's a shitty mess which goes a long way to explaining why the browser in general and filters in particular are so buggy.
If you're using HTML5 you may want to go down the route of using
<!doctype html>
<!--[if lt IE 7 ]> <html lang="en" class="ie6 oldie"> <![endif]-->
<!--[if IE 7 ]> <html lang="en" class="ie7 oldie"> <![endif]-->
<!--[if IE 8 ]> <html lang="en" class="ie8 oldie"> <![endif]-->
<!--[if IE 9 ]> <html lang="en" class="ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!-->
<html lang="en" class="gtie9 modern">
<!--<![endif]-->
and in your CSS use something like:
.ie9 .element {filter: none; }
Have you tried to enable/disable the filter(s)?
I've found the best way is display:inline-block (applying white-space:nowrap to the container). But it seems to work bad with IE7 and lower