Jump to content

Internet Explorer 8 Compatibility Mode !== Internet Explorer 7


Guest FirefoxRocks
 Share

Recommended Posts

Guest FirefoxRocks

At first I thought that Internet Explorer 8 Compatibility Mode was enough for testing my site to work with Internet Explorer 7. But this is so wrong. For some reason, my list-item menus have thicker (non-collapsed) borders, my floating boxes have expanded heights, some elements mysteriously applies a padding/margin/transparent border/whatever it is and other things have appeared.They all looked fine in Internet Explorer 8 Compatibility Mode (Strict Mode) but in the actual IE 7 that I viewed the page on, it looked a lot different.Does anyone else have this issue?

Link to comment
Share on other sites

At first I thought that Internet Explorer 8 Compatibility Mode was enough for testing my site to work with Internet Explorer 7. But this is so wrong. For some reason, my list-item menus have thicker (non-collapsed) borders, my floating boxes have expanded heights, some elements mysteriously applies a padding/margin/transparent border/whatever it is and other things have appeared.They all looked fine in Internet Explorer 8 Compatibility Mode (Strict Mode) but in the actual IE 7 that I viewed the page on, it looked a lot different.Does anyone else have this issue?
If you want a page to look just like in Internet Explorer 7, open the "Development Tools" bar from the "Tools" menu and then you can check your page as rendered in real Internet Explorer 7. Edited by Ingolme
Link to comment
Share on other sites

Guest FirefoxRocks
If you want a page to look just like in Internet Explorer 7, open the "Development Tools" bar from the "Tools" menu and then you can check your page as rendered in real Internet Explorer 7.
That is what I have been doing, but I use the F12 thing (same thing) and I thought it would look like the real IE7 but it doesn't!!
Link to comment
Share on other sites

Do you have some page that you could give a link to? A screenshot of what it looks like in IE8, EmulateIE7 and in IE7? I'm sure Microsoft would consider creating a patch for such an issue, assuming it's a valid issue.

Link to comment
Share on other sites

Guest FirefoxRocks
Do you have some page that you could give a link to? A screenshot of what it looks like in IE8, EmulateIE7 and in IE7? I'm sure Microsoft would consider creating a patch for such an issue, assuming it's a valid issue.
Internet Explorer 8:IE8HTML.pngGoogle Chrome (for referencing to other browsers):chromeHTML.pngInternet Explorer 8 (IE7 Compatibility Mode):emulateIE7HTML.pngInternet Explorer 7:ie7HTML.pngNotice the difference of the Close button and the size of the text box which does not have a predefined value.All of them are tested on Windows XP. Here is the HTML code (anything irrelevant is stripped out except for the character encoding <meta> tag, the page is valid HTML 4.01 Strict):
<!DOCTYPE html PUBLIC '-//W3C//DTD HTML 4.01//EN' 'http://www.w3.org/TR/html4/strict.dtd'>    <meta http-equiv=Content-Type content='text/html;charset=utf-8'>    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>    <script type='text/javascript'>    $(document).ready(function(){        $("#a").click(function() {$("#i").slideDown();});        $("#b").click(function() {$("#i").slideUp();});    });    </script>    <style type="text/css">    #i{position: relative;margin-left:1%;width:98%;border:1ex solid #16c;}    #b{position:absolute;right:0;}    </style>    <title>Admin</title><body>    <form action="#"><p>Passcode: <input type=text size=48 value=localhost></p><p>Password: <input type=password size=48></p></form>    <div><button type=button id=a>Help</button></div>        <div id=i><button id=b type=button>Close</button><h2>Some dialog thingy</h2><p>A paragraph</p></div>

Edited by FirefoxRocks
Link to comment
Share on other sites

It may be valid, but the way I see it, it's because that it relies on unimplemented features of SGML... or in other words, it relies on improper HTML parsing, which is very touchy, so it's understandable (for me) if there are minor differences between EmulateIE7 and IE7.Have you tried to explicitly add the html, head and body elements? And make the HTML document totally valid?

Link to comment
Share on other sites

Guest FirefoxRocks
It may be valid, but the way I see it, it's because that it relies on unimplemented features of SGML... or in other words, it relies on improper HTML parsing, which is very touchy, so it's understandable (for me) if there are minor differences between EmulateIE7 and IE7.Have you tried to explicitly add the html, head and body elements? And make the HTML document totally valid?
The document is totally valid, and initially I had the html, head and body elements in there even though it was optional. They do not change anything.I have also tried a local file and the exact same file from the Internet and that hasn't changed anything except the local one prompts me to allow JavaScript execution. Edited by FirefoxRocks
Link to comment
Share on other sites

Any chance you could reduce the test page even further? Is jQuery and the rest of the JavaScript really a must for this to happen?BTW, for what it's worth, I find form fields in general to be a gray area for browsers. I think the reason for the difference is simply that the rules for calculating the initial "size" based on the "size" attribute have changed. Perhaps "1" was previously equal to the size of an "X", and was later changed to the size of "*" for passwords. Either way - the HTML spec doesn't specify how should browsers display form elements, so this is (as far as the spec is concerned) allowed.

Edited by boen_robot
Link to comment
Share on other sites

Guest FirefoxRocks

Ok I've reduced the testcase to this:

<!DOCTYPE html PUBLIC '-//W3C//DTD HTML 4.01//EN' 'http://www.w3.org/TR/html4/strict.dtd'><html><head>	<meta http-equiv=Content-Type content='text/html;charset=utf-8'>	<style type="text/css">	#i{		position: relative;		margin-left:1%;		width:98%;		border:1ex solid #16c;	}	#b{		position:absolute;		right:0;	}	</style>	<title>Admin</title></head><body>	<form action="#">		<p>Passcode: <input type=text size=48 value=localhost></p>					<p>Password: <input type=password size=48></p>	</form>		<div id=i>		<button id=b type=button>Close</button>		<h2>Some dialog thingy</h2>		<p>A paragraph</p>			</div></body></html>

And I've added the document structure tags as you requested. Still different.This is only 2 of the few things that appear different. The height of boxes differ between IE8Compat and IE7 when you are changing them through AJAX/jQuery/JavaScript, and there's also a separate padding issue that I can't seem to reproduce effectively at the moment.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...