Guest FirefoxRocks Posted August 9, 2009 Share Posted August 9, 2009 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 More sharing options...
Ingolme Posted August 9, 2009 Share Posted August 9, 2009 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. Link to comment Share on other sites More sharing options...
Guest FirefoxRocks Posted August 9, 2009 Share Posted August 9, 2009 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 More sharing options...
boen_robot Posted August 9, 2009 Share Posted August 9, 2009 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 More sharing options...
Guest FirefoxRocks Posted August 9, 2009 Share Posted August 9, 2009 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:Google Chrome (for referencing to other browsers):Internet Explorer 8 (IE7 Compatibility Mode):Internet Explorer 7:Notice 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> Link to comment Share on other sites More sharing options...
boen_robot Posted August 9, 2009 Share Posted August 9, 2009 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 More sharing options...
Guest FirefoxRocks Posted August 9, 2009 Share Posted August 9, 2009 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. Link to comment Share on other sites More sharing options...
boen_robot Posted August 9, 2009 Share Posted August 9, 2009 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. Link to comment Share on other sites More sharing options...
Guest FirefoxRocks Posted August 10, 2009 Share Posted August 10, 2009 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 More sharing options...
justsomeguy Posted August 10, 2009 Share Posted August 10, 2009 If you want to fix your text boxes to a certain size, use CSS width, not the size attribute. Like boen said, browsers aren't entirely consistent on size, but they should be on width. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.