I created an asp.net application and published it sucessfully on a local webserver.
The problem is, that any page of the application looks different in internet explorer.
I know that the look can be different in different browsers like firefox, ie, chrome...
The funny thing is, that it even looks different in the internet explorer on two different pcs.
When I open it on my laptop, the page looks 'normal' (since i wrote the css on my laptop, so i know how it should normally look), but when i open it on a desktop pc connected to the same lan, it looks very different (some objects are wider or higher). Both IE Versions are the same (9.0.8112.16421).
I really don't know how this is happening.
Begging for some help, please!
Several possibilities
IE is in Compatability mode
IE is zoomed in
The screen resolutions are different
The DPI settings are different
Just figured it out.
The Problem was the Quirks-Mode in IE9. I simply added following code inside my head-Element in the SiteMaster:
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
Because of the Quirks-Mode IE9 pretends to be IE5.5 due to backward compatibility.
This is pretty all you need to do the trick. ;-)
I've put up a test page illustrating my problem : http://www.heliopsis.net/var/fontcustom/
I've created a custom font with help from the awesome http://fontcustom.com/ but I have issues displaying it properly in IE8.
It seems that IE8 can use this font with HTML entities but not with CSS generated content. Even more puzzling, it sometimes manages to show the glyphs but loses them on page reload...
Does anybody know what's going on here ?
Here's a screenshot of what I see on IE8 :
In general, generated content doesn't work quite as well as it should (what does?) in IE8.
I played around a bit with your test page, and you might want to check that you aren't getting dumped off into IE8's compatability mode for IE7 or (even worse) Quirks Mode. Both of those seem to break the custom font, but I see it perfectly fine when IE8 runs as IE8.
To ensure that IE always gives to the most recent cababilities if possible add the
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
meta to your header. Also, use the develper tools for IE8 to make sure that your font is being loaded when you see the issue.
Im writing html and css in an old web application that is using the following doctype
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
If i change it to html5 doctype, the menu wont work. My problem is that i cant use some css selectors, like
input[type="radio"]
for instance. But this obviously works with the html5 doctype. Any possible solutions for this? Thanks!
The doctype you mentioned (HTML 4.0 Transitional without URL) triggers quirks mode. This causes that Internet Explorer's rendering is similar to IE5. Your website works fine in quirks mode probably because it's optimized for such old versions of IE: for example, it may assume the border-box box model. Naturally, you cannot use more complicated CSS selectors because IE5 didn't support them. The solution is to rewrite the code for standards mode rendering. The usual approach is to develop the application with HTML5 doctype in standards-compliant browsers like Firefox, Chrome or IE9 and then try to fix bugs that can appear in older versions of Internet Explorer.
I've solved many of my problems with selectors and previous IE version by just including this javascript library (it needs jQuery or some other library to work):
http://selectivizr.com
It worths a shot.
selectivizr is a JavaScript utility that emulates CSS3 pseudo-classes
and attribute selectors in Internet Explorer 6-8.
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 need to fix a ASP.NET website that works in IE6, to work in IE8 browser. I added the EmulateIE7 http header to IIS6 as short term fix, but still the pages are not displayed correctly. the web app was initially designed and developed for IE6, now we are upgrading to IE8, so is there any quick fix available for IE6 website to display correctly in IE8? I thought the EmulateIE7 works for both IE7 and previous versions as well, is that not correct?
regards,
Rama
I can't remember exactly what level of CSS IE6 uses. You could maybe try telling IE8 to render the page as IE5 did by using the following META tag in each page:
<meta http-equiv="X-UA-Compatible" content="IE=IE5" />
If this is site wide, then add it as an HTTP header in the web server itself.