0

I am fairly new to web development, so forgive me if this is obvious. I have created a site, that is looking good on Chrome and Mozilla, but it appears I can not get the IE version to scroll at the same rate/height that my other versions are. Although I declare the height to be 6000 pixels, I am only able to scroll down to 1700ish, I have it outputting in the console if you wish to see it.

Take a look: http://nick-barth.com/lindylongcon/

If you happen to notice any of my innumerable mistakes, feel free to mention them!

Thank you, Nick Barth

user3086615
  • 99
  • 6
  • What version of IE? Is it static or are you using server-side code (php and whatnot)? Can you share some of your code (specifically your css)? – yuvi Dec 10 '13 at 12:17
  • you've got your #scene div set to height 100%. I don't know if Skrollr needs this, but i would suggest trying to work around that because IE may set the whole page height to whatever these 100% are. – Gotschi Dec 10 '13 at 12:22
  • Please add relevant code instead of a link (which could be broken after while) – Maen Dec 10 '13 at 12:33
  • Here is my fiddle(http://jsfiddle.net/hisownfoot/yy4rL/). I have never used fiddle before, so I'm not sure how to run it properly yet, but there is my css. @yuvi – user3086615 Dec 10 '13 at 12:37
  • @bigood Here is the fiddle, http://jsfiddle.net/hisownfoot/yy4rL/ – user3086615 Dec 10 '13 at 12:38
  • Again - what version of IE? There are major differences, IE 9 is nothing like IE 8 for example – yuvi Dec 10 '13 at 12:53
  • @yuvi Sorry, I'm a bit overwhelmed, but it appears to look the same in IE9 IE8 and IE7. – user3086615 Dec 10 '13 at 12:57
  • Does adding a ` ` at the top of the page help anything? – yuvi Dec 10 '13 at 13:02
  • @yuvi I do have a !DOCTYPE in in my code, not on Fiddle though, It asks me not to include it. – user3086615 Dec 10 '13 at 13:36
  • @yuvi Mother of god... you were right, I didn't have a . I'm very embarrassed. It fixed most of my problems. Thank you. – user3086615 Dec 10 '13 at 13:45
  • You shouldn't be embarrassed. Having a DOCTYPE is not a necessity. I'll explain in a bit – yuvi Dec 10 '13 at 13:47
  • @yuvi Well, I'm embarrassed because I came across it several times on my googles, and I just assumed I had it, even after you posted I responded! Still, the explanation would be appreciated, thank you. – user3086615 Dec 10 '13 at 13:51

1 Answers1

1

As we talked about in the comments, there are major differences between IE version releases. IE6 through 8 are considered legacy browsers, while IE9 and greater are more inline with standard newer web technologies (css3 support only entered with IE10 for example).

When you said that it looked the same using different version I immediatly suspected it had something to do with quirks mode. quirks mode is a technique which allows support for older browsers. And it is the default mode for IE if you are not using <!DOCTYPE html>. By adding that to the top of your page you are saying to IE 'use standards mode' (and check out that link I mentioned for details about different types of DOCTYPE's and what they mean).

It also greatly explains why you were seeing such a specific problem with the css attribute of the width: 100%, to quote the wiki article (emphasis mine):

One prominent difference between quirks and standards modes is the handling of the CSS Internet Explorer box model bug. Before version 6, Internet Explorer used an algorithm for determining the width of an element's box which conflicted with the algorithm detailed in the CSS specification, and due to Internet Explorer's popularity many pages were created which relied upon this non-standard algorithm. As of version 6, Internet Explorer uses the CSS specification's algorithm when rendering in standards mode and uses the previous, non-standard algorithm when rendering in quirks mode.

Today, with a less than 5 percent usage of legacy browsers (which also support the newer width algorithm because it was introduced with the now extremely old IE6), you probably wouldn't need to use quirks mode ever, but it helps to know why adding the doctype is important (rather than doing it blindly).

yuvi
  • 18,155
  • 8
  • 56
  • 93