I would like to make my website compatible with all types of internet explorer, as at the moment it is only compatible with IE6, and glitches a lot in newer versions. How can I do this? I understand it has something to do with the code below that I found in a file named "ie6.css". Tha code is below.
/* IE6 specific styles */
.extra-wrap, .news li {zoom:1;}
Firstly, make sure you have a valid <!DOCTYPE>. That's the number 1 reason for browser glitches between different browsers/versions.
If you don't have a doctype declaration at the top of your page, the browser will go into Quirks mode, which will cause you problems.
Give it a valid doctype (best go with <!DOCTYPE html>). That might cause other issues in the short term, but once you've fixed those it will be much better at working properly cross-browser.
Secondly, does it work in other browsers (Firefox, Chrome, etc)? Modern IE versions are generally standards compliant, so if it works in other browsers it should work in IE10/11. If it works in other browsers and not IE11, then you probably have some IE-specific hacks that were needed for older IE version but don't need to be there for newer versions. Get rid of those.
Related
Can i have a list of html/css tags which works only for Internet explorer.And these tags/attributes should not work in other browsers especially for chrome and safari.
Thanks,
Shyam
As you didn't mention the version of IE, I am Going with the IE10
this link describes IE 10 Specific Styles
I think the only HTML (non-standard) tag supported by IE and not other browsers is <bgsound> for background sound. Some sites will also mention <marquee> too, but although it is non-standard, it has worked on Chrome and Firefox for a while.
About CSS, I don't know if there are any specific rules/attributes that only work on IE (but I know there are many standard rules/attributes that do NOT work on older versions of IE :P)
I am coding a site in IE 9. The layout looks perfect in IE 9 and IE 8 as well as IE 6 BUT it's completely messed up in IE 7. Also, the issue is when I press the compatibility button in IE 9 - the layout is messed up beyond comprehension..My question is - how can you make the layout ok when one presses compatibilty button in IE 9. Thank you , regards !
It is quite easy to do. Put this code directly after your opening <head> tag:
<meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
What this does is forces the browser to use the highest standards it has available to it.
All versions of Internet Explorer have different sets of rendering bugs, and the older the browser, the more bugs there are.
If you are developing a site so that it looks good in IE, you have most likely taken advantage of some of the rendering bugs. This means that it will look different in another version of IE, and it will look completely warped in any browser that better follows the web standards.
You should not take advantage of the rendering bugs, but instead avoid things that works differently in IE compared to other browsers. That way it's possible to build sites that both work in different IE versions and also in other browsers.
You should have another browser to test in also, like Firefox, Chrome or Opera. Also verifying the HTML and verifying the CSS are also good tools for finding problems with the code.
You should not bother about the compatibility button. That is for pages that can't cope with standards compliance mode. If your page renders correctly in standards compliance mode, then you can add the meta tag that disables the compatibility button.
Will we need to use a CSS Reset if we don't consider any version of IE (Internet Explorer)?
I'm making a website where I don't necessarily to consider any version of IE. Would it be OK to not to reset anything for Safari, Chrome, Firefox and Opera?
Is it only IE which forces us to use a CSS reset, or do other browsers also have inconsistencies?
The point of css reset files isn't solely to make certain functionality work in older versions of internet explorer, it's to make the job of presenting using css the same between browsers.
Yes, you would still need to if you want to support many browsers. It is not only Internet Explorer that needs reset.
Which browser was it, I forgot, but either it was Firefox or Opera that had different default settings too, not just IE.
Nevertheless, it is a safe move to do, and you can rest assured that it will save you a few problems.
Usually, a reset is only about a few kilobytes, which is not much.
I think this post here should give you a good idea WHY to use RESETS and how it isn't ONLY about IE (flavours) that cause problems:
... there are all kinds of
inconsistencies, some more subtle than
others. Headings have slightly
different top and bottom margins,
indentation distances are different,
and so on. Even something as basic as
the default line height varies from
one browser to another—which can have
profound effects on element heights,
vertical alignments, and overall feel.
http://meyerweb.com/eric/thoughts/2007/04/18/reset-reasoning/
You always should use a reset.
I am working on a project which requires IE6 compatibility. Unfortunately, IE6 and IE7 do not support standards mode. Because of this, I am tempted target almost standards in for all browsers and just ignore standards mode completely, so that I am only targeting browsers running in the same standards mode. I figure that because XHTML transitional is so popular, almost standards most is guaranteed to be supported for a long time to come. Is this a good idea?
No, this is not a good idea.
Its not a good idea because eventually IE6 will be obsolete (sooner rather than later) and you will have a messed up site where you have to jump through hoops to get it to look halfway decent.
A better solution is to use progressive enhancement, in a nutshell support the minimum you need for IE6 and give the modern standards following browsers the goodies.
With progressive enhancement you still get your support for IE6 but you're left with a standards based website that is easier to maintain and develop further.
Using "almost standards" mode is dumbing down other browsers for the sake of IE. IE6/7 doesn't support a standards mode because it's incompetent. You should never write markup aiming at incompetence. Write modern markup with a strict doctype and use "conditional comments" to hack and beat IE into the best compliance you can get out of that thing or you will be doomed to a world of darkness and hurt.
Roughly 40% of the user base of my company's software uses IE6 (down from ~60% a couple years ago).
Our master pages have the XHTML 1.1 doctype set. I do all my design work using the latest version of Firefox and then once I have it all working how I want, I test in IE6 using the App Compatibility VMs for Virtual PC that MS releases, and make any necessary changes to my CSS that IE6 requires.
Most of the time I can just use slightly different CSS and don't have to resort to hacks, although sometimes I still do. But the hacks don't affect other browsers, since they're IE6 specific. I haven't gone to the length of using browser-specific CSS files yet, cause the extent of my IE6 hacks are something on the order of 10 lines out of ~1500 lines of CSS. My modified CSS to "support" IE6 still renders fully standards-compliant in Firefox.
EDIT: thanks to Rob's comment I'll be changing my doctype to "HTML 4.01 Strict with system identifier" (provided testing shows that it doesn't break anything). That Quirks Mode chart on Wikipedia shows my current doctype (XHTML 1.1 with system identifier and without XML declaration) results in the same render modes.
Everything I said above still applies, though. I code for standards-compliance in the latest version of Firefox (the Web Developer add-on is my friend) and then "make IE work" without breaking standards-compliance in Firefox.
When IE8 is released, will the following code work to add a conditional stylesheet?
<!--[if IE 8]>
<link rel="stylesheet" type="text/css" href="ie-8.0.css" />
<![endif]-->
I've read conflicting reports as to whether this works with the beta. I'm hoping someone can share their experience. Thanks.
One thing to note:
It does work, BUT if you are loading the page/site local network (e.g. Intranet) it will load in IE7 mode by default! (update - localhost[*] is a special case, that does render in standards mode)
This goes against MSFT's original statement of going STANDARDS by default.
e.g.
http://127.0.0.1/mysite/mypage.php <-- IE8 by default (updated!)
http://localhost/mysite/mypage.php <-- IE8 by default (updated!)
http://machinename/mysite/mypage.php <-- IE7 by default
http://192.168.100.x/mysite/mypage.php <-- IE7 by default
http://google.com/ <-- IE8 by default
[*] - Scott Dickens [MSFT] noted in a comment here on the IE Blog that localhost was a special scenario in the Intranet (often used to develop Internet sites) thus would render in Standards mode by default.
To test what mode a page in IE8 is really rendering in, you can use check the developer tools or use this bookmarklet code (only works in IE8):
javascript:
var vMode=document.documentMode;
var rMode='IE5 Quirks Mode';
if(vMode==8){
rMode='IE8 Standards Mode';
} else if(vMode==7){
rMode='IE7 Strict Mode';
}
alert('Rendering in: '+rMode);
It worked for me – both in quirks mode and in standards compliance mode. However, it does not work when switching to IE8 compatibility mode.
Tools/Compatability view settings
uncheck them all
Thank you for your help. I've discovered the solution, apparently the problem was having each style sheet use its own title attribute. Once I took the title off all but the main style sheet, no prob.
This is a weird issue unique to IE8 - and although I've been told its supposed to work that way, something to do with "Stylesheet Preference" - it only serves to create problems since the solution requires you remove the title which could be helpful when scripting, etc - when you need to call the style sheet.
In any case, not sure if this is a bug, or its supposed to be that way, but I hope Microsoft investigates further.
Thanks
Why even bother writing a separate stylesheet for IE8?
If you've already debugged for IE7, you can force IE8 into compatibility mode, and thus display your code as though IE8 were IE7.
All you gotta do is put this RIGHT BELOW the opening head tag. Anywhere else and it won't work.
And then that's a half hour or so less work on average per project, no intense debugging for IE8 needed!
Even Msn.com does this - kind of ironic, eh?
Wrote a blog post about it recently: http://blog.sankhomallik.com/2009/11/16/stop-wasting-time-debugging-on-ie8-when-you-dont-have-to-or-get-ie8-to-behave-like-ie7/
IE8 renders pretty nice compared to IE7, I have stylesheets for IE6, IE7 and IE8; at first i thought conditional comments were not working for IE8 after a bit of experimentation i found some rules were not beeing applied by IE8 just because i needed to put the ancestor or parent class first, e.g.
i had a class like
.niceclass {some:properties;more:properties;}
it worked only if i changed it for something like:
.parentclass .niceclass {some:properties;more:properties;} or
#parentselector .niceclass {some:properties;more:properties;}
btw in my IE8-only css i have only one overriding rule, the rest is rendered almost like firefox, though thats not making me leave FF anyway!.
For my part I wanted to use rounded borders using css. IE8 on Vista does not support such. And since the graphics were so that the rounded borders would show a nice rounded shadow as well, the page looked terrible in IE8.
I tried using conditional comments, but to no avail, IE8 would not evaluate the if IE expression and thus would not include the external stylesheet.
Then I had a look at putting it into quirks / compatiblity mode, however, this still did not work as the CSS hacks I had used did no longer work for the IE8.
Last but least I found a working CSS hack that will render the page correctly when in compatibility mode.
* + html #test[id] { color:lime }
Now, I do not know if this works for IE7 or below, so you would have at least three
different hacks for each IE release you want to support, e.e.
* + html #test,
html+body #test,
* html body #test
{ color:lime }
I wonder what the next regression of the Internet Exploiter will behold for us.