On [my site][1] everything looks great in Firefox/Chrome/Safari (all the same) - but IE7, it's all out of whack.
Any ideas how I can modify my CSS to make IE7 at least somewhat usable?
I've found that this project at Google Code will often clean up major problems with IE(6/7). The relevant parts follow:
Use the following code to get all IE to act like IE9:
<!--[if lt IE 9]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<![endif]-->
Use the following code to get all IE to act like IE8:
<!--[if lt IE 8]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE8.js"></script>
<![endif]-->
Also, as superUntitled pointed out, it would be a good idea to make sure your code is syntactically valid. Your code seems to be a mix of HTML and XHTML, so I've attached the various validation checks to help you to choose one:
HTML 4.01 Strict: 46 Errors, 30 Warnings
XHTML 1.0 Strict: 398 Errors, 183 Warnings
It seems like you started out with XHTML, as evidenced by your link to a XHTML DTD, but your markup is closer to the HTML standard. Finally, note that a simple fix can often clear up several errors, so don't try to fix multiple things at once. Fix, update, then re-check the validator.
A quick glance shows that you've haven't closed your </html> tag. That's probably a few of the errors right there.
I am seeing the same issues in IE 7 and 8.
If I change to standards mode instead of quirks more, I have no issue. I think if you add a doctype, problem solved.
Related
Using a :before CSS to get an image/icon here (see round circle in image below), but in Internet explorer 8+ it is just not showing up.
This is the site:
http://www.websiteprofessioneel.nl
Image link below shows right element (it's the icon in the first post header) as circled on this screendump
http://tinypic.com/view.php?pic=xxd9f&s=5#.Ul_WajZRoWY
this is the CSS for that:
.welpen h2:before {
content: url("/wp-content/uploads/z-welpen-category-small.png") !important;
}
Anything missing perhaps? All other browsers work fine and as far as I know peudo CSS is totally supported in at least IE9, but it's not working in both IE8, 9 and up.
IE is Probably Using Quirks Mode
Internet Explorer can run in quirks or standards mode. The purpose of quirks mode was to make the new standards-compliant IEs (8+) able to read and process the code people had previously written for IE7-.
Likely Reason #1: invalid or absent DOCTYPE declaration
Try specifying this on the first line of your HTML document:
<!DOCTYPE html>
Make sure the <html> element is present. Even though HTML5 specification says it's not needed, older IEs (10 and older) tend to enter quirks mode when it's not specified.
Likely reason #2: site fails (X)HTML validation
If this is present, make sure the W3C validator throws no errors as these can also trigger Quirks Mode in IE. Yours has 15.
Actual reason was more unlikely: deliberately triggering Quirks Mode
After comments discussion, turns out I was right about the quirks mode, but wrong about the reason. Make sure you don't have any meta tags telling IE to run in quirks mode such as this:
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
problem is because of something wrong in doctype, use <!DOCTYPE html> for html5 and to make it working on ie8 use
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
if you don't want html5 then use
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
this will fix the problem i think
I test my pages on IE7, Safari, Firefox and Chrome.
I've adopted the idea of adding a class to html in order to be able to write custom CSS tweaks absolutely, positively there is no other way to do it. In other words, I don't abuse this facility.
I use this:
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js ie-all lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js ie-all lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js ie-all lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
You'll notice that this is a modified version of the HTML5Boilerplate approach in that I am adding ie-all. The reason for doing this is that, per the title, I am only testing on IE7. Without something like an ie-all class I'd have to choose from one of the other classes for ie tweaks. Other than testing on all versions of IE, who else would I handle this problem?
I do realize that ie-all is equivalent to lt-ie9 at the moment. I fully expect to see this code evolve to have a lt-ie10 class which might change things. Not sure what the best approach is here.
EDIT:
In re-reading my question I thought that most might think that the answer is self-evident: Can't test on IE7 and have it work on newer versions of IE. I thought I should clarify with context.
I have been doing exactly that this for the last few years and have not run into any serious issues. To be repetitive. I have been testing on IE7 and my code has worked without issues on newer versions of IE. It was only when I decided to "modernize" my boilerplate and look at other ideas that I realized that, in some cases, there are folks that must be writing custom CSS for each version of IE.
I have not seen the need to tweak for each version of IE. I have wasted countless hours fixing issues with IE7 that do not exist on Chrome, Safari and Firefox. When I have done so it has always worked fine on other versions of IE. Hence my modification to HTML5Boilerplate and the idea to add a single ie-all class to cover these special tweaks.
In addition to this, I am now exploring fancier JQuery UI ideas that, I thought, might not respond well to only testing on IE7.
If you write standards-compliant code with a standards-inducing doctype and use progressive-enhancement, you will be just fine. These practices alone should ensure that your site will work very well in every version of IE today as well as in the last several years. The reason why people have problems with Internet Explorer today (generally speaking), is because they fail to do one (or more) of these things.
Keep in mind that Internet Explorer 10 dropped support for conditional-comments, so try to ween yourself off of those, depending rather on careful coding and good practices.
To greatly reduce the burden of support all of the necessary software (and hardware in some cases) required for testing across various browsers, check out http://browserstack.com. You can quickly pick an OS, a Browser, and a Version and within seconds have a virtual machine up and running in your browser. You can even use this same service to tunnel into your local server/file-system to test local files.
Code well and wise, and IE won't be the pain that many think it to be.
There have been massive changes in Internet Explorer since IE7, so you absolutely cannot test for 7 and assume that newer versions will work as well. IE7 was released in 2006, and was very poor even by the standards of the time.
Unless you want to have classes for each version, I'd create one for <=IE8, and one for IE9 and above.
You could just write code that works in all browsers, like I do - never had a problem with it.
You should ALWAYS test in different versions. Never assume it will work. I fell prey to this once when I assumed that Firefox wouldn't mess around with the contents of an onClick inline attribute, but it did (replaced it with "more correct" JavaScript and broke other code), the same goes for IE versions.
Your best bet is to use IE10. In its Developer Tools, you can test in all versions of IE from 7 upwards.
I'm working on a small website, but of course IE doesn't view it the same as Chrome or Firefox do. I've read around and found using <--[if IE]> should make only IE use the stylesheet I need.
When I was using Microsoft Expression on a different PC earlier, it worked fine. I came home and started editing in Dreamweaver CS5, now it doesn't work as it should.
I researched it a little and I know that Dreamweaver views it as a comment rather than an if function.
So how can I fix/get around this?
Thanks in advance!
P.S. The whole piece of code I'm using is <!--[if IE ]> <link href="IEcss.css" rel="stylesheet" type="text/css"> <![endif]-->
Edit: I found the answer, I had to close the comment tag before referencing the stylesheet. http://www.quirksmode.org/css/condcom.html
You have a space after IE:
<!--[if IE ]>
Should be:
<!--[if IE]>
Other than that, it looks correct. But the space may very well be throwing it off, because conditional comments have to match an exact syntax – otherwise they get interpreted as regular comments and ignored.
Design-Time style sheets allow you to show or hide design applied by a CSS style sheet as you work in a Dreamweaver document. For example, you can use this option to include or exclude the effect of a Macintosh-only or a Windows-only style sheet as you design a page.
http://help.adobe.com/en_US/dreamweaver/cs/using/WScbb6b82af5544594822510a94ae8d65-7e17a.html
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.
I am getting rid of browser compatibilty issues.
so i come up with idea to load the only css according to browser.
So say if user uses IE then only styleIE.css get loaded if firefox styleFF get loaded and so on.
my question is it correct method if not what care should taken to avoid this compatibilty issues.
because when i solve issues for IE then it opens the new issue in a my stable version of FF
That is done frequently although you probably want to use a general CSS file with the shared styles and combine it with the browser dependent CSS file.
But in fact most CSS problems with different browsers can be solved without this trick and by just using the correct markup and styles...
Usually it's enough to create a stylesheet that looks well in normal browsers, and then make a IE-only supplemental stylesheet that fixes the incompatibilities and include it through conditional comments (although IE8+ is kind of OK and IE7 usually works):
<!--[if IE]>
<link rel="stylesheet" href="/ie_sheet.css" type="text/css">
<![endif]-->
Since IE6 is a horrible monster from the dawn of time, which needs its own specific hacks, you can include a different stylesheet for IE6 (and lower) and IE7 (and higher; not really needed most of the time):
<!--[if lte IE 6]>
<link rel="stylesheet" href="/ie6_sheet.css" type="text/css">
<![endif]-->
<!--[if gt IE 6]>
<link rel="stylesheet" href="/ie_newer_sheet.css" type="text/css">
<![endif]-->
Other browsers parse these as HTML comments and ignore them.
See also: a more detailed discussion of conditional comments.
I use a reset stylesheet, a normal stylesheet (i.e., for all standards-compliant browsers) then IE-specific stylesheets that reference the various versions of IE. The IE stylesheets only cover the items that IE has trouble with. I use the Microsoft conditional comments for including those stylesheets, so they are not read by other browsers.
It's not morally reprehensible, but it is less than ideal.You can solve cross-browser compatibility issues by learning a little more about what is going on.
http://hsivonen.iki.fi/doctype/
http://validator.w3.org/
http://jigsaw.w3.org/css-validator/
http://www.positioniseverything.net/explorer.html
Yes, many websites do just that.
That works just fine, the only thing to keep in mind is that, everytime your user loads a page, now the browser has to run through all the conditionals. So as long as it's not excessive (one check for each version of every major browser), nobody will notice.
Now making changes to the css if you've got even just 3 or 4 versions will be a bit of a pain, but everything has it's cost.