Here's the situation.
I made three style sheets for each of the three pages I am currently working on. One that works in IE8/Safari/Opera/Firefox. One that works in IE7 and one which if used alone works on IE6
I tested everything on www.xenocode.com/browsers and that sites' IE 6 and 7 emulators.
3 I used a variation of the article's suggestions for a way to make all the sheets work. (In the section:
http://www.thesitewizard.com/css/excludecss.shtml
The problem is that while it calls up the proper css for IE 8 and IE 7 online (It works just fine directly off my computer), it can't seem to call up the code for IE6 properly online causing the layout to be messed up in IE 6 (Or at least the emulator on xenocode.com.
Is there a better method?
(Can't show you the full page, due to my client being adamant about not showing it until the project is finished.)
Assuming you are using browser conditional statements...
I would check that the emulator your using is able to interpret browser conditional statements. If unsure you could always disable all other stylesheets and link normally (using the link tag) to just the IE6 stylesheet and then test
You want to have IE6 specific CSS? Also, please consider using Microsoft SuperPreview to locally see how your design looks in various versions of IE6.
You can use these css selection tags for the specific Browser version for IE.
<!--[if IE 6]><link rel="stylesheet" type="text/css" href="/css/ie60.css" /><![endif]-->
<!--[if IE 5.5000]><link rel="stylesheet" type="text/css" href="/css/ie55.css" /><![endif]-->
<!--[if lt IE 5.5000]><link rel="stylesheet" type="text/css" href="/css/ie50.css" /><![endif]-->
http://rafael.adm.br/css_browser_selector/
I love this thing because it lets me define granularly all the changes I want for different browsers / operating systems.
Related
As you can see on this live demo, I have a website with two stylesheets, one for our beloved IE and another one for the normal browsers, set like this on its header:
<link rel="stylesheet" type="text/css" href="stylelab.css">
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="ie_stylelab.css" />
<![endif]-->
Even though I have checked many times its spelling, it seems correct but if you open the link from IE (IE v11, in my case), normal Stylesheet is loaded instead IE one.
To check easily if the other CSS is loaded, in theory, when opening the link from any IE and executing the menu (bottom right button), it has blue background.
What is missing here?
IE stylesheet has the entire normal stylesheed PLUS the additional properties needed for it to work, maybe this is wrong and shoul only have the additional properties..?
Conditional comments are no longer supported
Support for conditional comments has been removed in Internet Explorer
10 standards and quirks modes for improved interoperability and
compliance with HTML5. This means that Conditional Comments are now
treated as regular comments, just like in other browsers. This change
can impact pages written exclusively for Windows Internet Explorer or
pages that use browser sniffing to alter their behavior in Internet
Explorer.
See: http://msdn.microsoft.com/en-us/library/ie/hh801214(v=vs.85).aspx
IE stopped support for conditional comments as of IE10.
At this point a better solution is to target CSS based on features rather than vendors/browsers. Tools like modernizr can really help you with this.
I have designed a web portal, I have made that website good looking at Firefox browser,
But when I started testing with IE, some issues which works in IE 6 may not work in IE 8,
means back ward compatability is not there in the IE.
You can check my website at cricket scores
In this scenario, which IE version do you think to consider and make my website to work normal.
Edit
As per the below suggestions, I understand that need to create the separate CSS file
corresponding to each IE version like 6, 7,8, 9 and so on in future,
if the number of CSS files increases, wont that affect the performance and loading of the web page
please advice,
Unfortunatley IE does not render things the same as Firefox and is a common problem. The best way is to do IE Specific IF statements and have IE 8 Emulate IE 7. This does require a few additional CSS files, edited for each version. Below is the generic way to have it set up for IE/FF (belongs in head). Normally IE 6 & 7 are viewed the same so you do not need to have different CSS files for them.
<meta http-equiv="X-UA-Compatible" content="IE=7" />
<link rel="stylesheet" href="/templates/dchirotemplate/css/style.css" type="text/css" />
<!--[if IE 6]><link rel="stylesheet" href="style_ie6.css" type="text/css" media="screen" /><![endif]-->
<!--[if IE 7]><link rel="stylesheet" href="style_ie7.css" type="text/css" media="screen" /><![endif]-->
You can view a site I created with this style sheet setup by going to http://www.decrescenzochiropractic.com
Tip 1: Don't even bother trying to make things look good on IE6. Make it work on IE6 if you must, but if you start trying to achieve perfection in IE6 you'll be in for a world of pain and frustration.
We have officially dropped support for IE6 on our new site; we're not even testing with it.
Tip 2: Look into using some javascript libraries that provide better cross-browser compatibility for IE. Here are some good ones:
Dean Edwards' IE7.js
CSS3Pie
Whatever:hover
Selectivzr
Modernizr
Also consider using jQuery or similar; this is a bigger jump than just compatibility, since it involves changing your coding style quite considerably, but it does provide very good cross-browser compatibility for most of its functionality.
You should use IE-only conditional comments, in the form
<!--[if IE 6]> <p>hello world of bugs!</p> <![endif]-->
This way you can load custom stylesheets, etc.
You should make your site work with all browsers.
A quick and dirty trick for IE 6 and 7 is also the star selector but don't overuse it:
body{
background-color: blue;
*background-color: red /* Only shown in IE */;
}
Fact is IE will be the most troublesome of browsers.
Traditionally, IE has not been compatible, period.
While most of the other browsers were working to be compatible with the standards coming out, MS was trying to be smarter and better than everyone else and doing their own thing. This has caused a lot of problems for many designers. A lot of design books have an entire chapter on dealing with IE's quirks.
Fortunately, it appears MS is finally starting to see the light. To Microsoft's credit, IE8 defaults to a mode that is more standards-compliant that IE7, breaking sites that targeted earlier versions of IE. And, from what I've read, they're as committed as ever to the standards with IE9.
So to answer your question, I'd try and be compatible with the later versions. That way, your site is likely to remain valid for longer. However, any good website designer will test on all the top browsers. I use IE, Chrome, Opera, and FireFox.
I think you are going about this all the wrong way.
Yes, you could create separate style sheets, and you may still have to. However, the markup on your page is absolutely atrocious. You are sending every browser that hits that page into quirks mode, and getting pages to look the same, or even function the same, between browsers when they are all in quirks mode is a chore in and of itself. Don't get me wrong, it can be done, but it takes quite a bit of duck tape and bailing wire.
You should really fix your markup, then assess your css. You can definitely make a page that looks like yours with a single style sheet, even in IE6.
I've implemented a landing page design for a campaign we are launching at work, and did testing on IE 7 on my XP machine at work and IE 8 on my 7 machine at home. These both worked and so I thought I had beaten IE, but as it turns out, different OS's IE render HTML differently even though they claim to be the same browser.
Anyone who has XP and IE8 will not see the site correctly at all.
I use two different CSS links. One for IE and one for !IE:
<!--[if IE]>
<link href="../images/content/pagebuilder/idop_2010/free-to-believe-IE.css" rel="stylesheet" type="text/css" />
<![endif]-->
<!--[if !IE]><!-->
<link href="../images/content/pagebuilder/idop_2010/free-to-believe.css" rel="stylesheet" type="text/css" />
<!--<![endif]-->
I had to use !IE because IE was still pulling CSS from the good stylesheet, and the IE sheet wouldn't update correctly (a different issue).
If I create IE specific CSS (IE7/IE8 vs just IE) could that fix the problem?
What's a good way to overcome an issue of Operating Systems + IE?
Edit
I installed IE 8 on my work computer and it has the same problem as all the other IE 8 computers. I have Internet Explorer developer tools, and I noticed that IE was running in "IE8 Standards Mode" When I switched it to "IE7 Standards Mode" the layout worked perfectly. I also noticed on my laptop with Windows 7, that the compatibility mode icon was activated. When I turned it off, I was able to duplicate my problem. So now I know for sure it's an IE8 issue in general, not necessarily an OS issue.
I've now created an IE8 specific stylesheet which I'm going to start overhauling to get it looking right.
Here is the site: http://members.opendoorsusa.org/site/PageServer?pagename=IDOP_2010
Anyone who wants to take a look at it and give me suggestions as far as CSS is concerned, I would appreciate it (I didn't do the design, just implementation, so no design critiques please)
Now that I know that this is the problem, I have another question. Why in the world does IE 8 display so different than IE7?!
The best way to overcome IE issues is to use conditional comments:
<!--[if IE 8]>
... link IE 8 specific stylesheet...
<![endif]-->
It seems like you already know about the conditionals so just try an IE8 specific stylesheet and see if it works.
Check this out. In theory, there shouldn't be any differences between different versions of Windows and the same web page on IE 8, but there may be exceptions with ActiveX and possibly the rendering of fonts.
Let me know if an IE8 specific stylesheet works for you.
Did you use the JQuery UI Themeroller? I just discovered a css bug as well that was only in XP, not in Vista. UI tabs and accordions were missing header text. I isolated the issue down to a custom generated theme made by the Jquery UI Themeroller. Replacing the custom theme with a prebuilt theme fixed the problem.
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.
I've seen people doing things like this in their HTML:
<!--[if IE]>
<link rel="stylesheet" href="ie.css" type="text/css" />
<![endif]-->
Does this work across all modern browsers and is there a list of browser types that will work with that kind of if statement?
Edit
Thanks Ross. Interesting to find out about gt, lt, gte, & lte.
This works across all browsers because anything except IE sees <!--IGNORED COMMENT-->. Only IE reads the comment if it contains a conditional clause. Have a look at this article
You can also specify which version of IE. For example:
<!--[if IE 8]>
<link rel="stylesheet type="text/css" href="ie8.css" />
<![endif]-->
If you can use Javascript, there are several options:
navigator.appName
navigator.appVersion
link
Or something more robust by using a library such as jQuery.
Finally, you could use the BrowserDetect object from QuirksMode.
Once you have the browser name and version, you can then insert HTML to link to a style sheet or include other tags.
Conditional comments are purely for IE (version 5 and later). The official Microsoft documentation is here. If you are going to use them the best strategy is to conditionally include external stylesheets or javascript files after your normal includes. This means that on IE your IE-specific code will override everything else. On any other browser the code will be treated as comments and ignored by the parser.
Further to Ross' answer, you can only target the Internet Explorer rendering engine with conditional comments; there is no similar construct for other browsers. For example, you can't write conditional comments that target Firefox, but are ignored by Internet Explorer.
The way I achieve the same effect as your example above is to sniff the user agent string. I then deliver a suitable CSS file for that browser. This isn't perfect because sometimes people change their user-agent string for compatibility.
The other way to target different browsers is to utilise browser specific hacks. These are particularly nasty because they usually rely on bugs in the browser and bugs are liable to be fixed!
User-agent sniffing is the best all-round solution in my opinion.