-2

I am a web developer that works in small projects.

And it seems to be a real hazzle to develop in the latest Chrome-version. Everything looks good, but when viewing the site in Internet Explorer 7 and 8 - than the site is really not working at all with the layouts.

This is a website I am working on: http://norcross.se/historiskmiljo.html

And IE 7 & 8 gives me this as a response, running VirtualBox with ie6-9 installs: http://cl.ly/image/1X0y011p2X3x

Life can be cruel sometimes, but I did not expect this. The background-size: cover - I know. That I did expect - but every other element is really making the whole website so un-appealing.

How can this be? I don't know how to approach the way to get the looks from a modern Chrome-browser into IE 8 (IE 7 is having such a small percentage and is left behind from other global websites).

Do you have any hints to me? So that I can understand why this happens? I want to rescue this project, as well as understand how to act in my next projects.

Thanks for any input that can make me feel calmer, as for now I condemn myself into being in this position. No one in this traditional advertising agency can grasp what I have to deal with ;/

7
  • you can use , chrome.google.com/webstore/detail/ie-tab/… extension in chrome to check compatibility of IE and Mozilla extention also available
    – HackerGK
    Oct 23, 2013 at 12:52
  • and you can use browser specific CSS rules for unsupported rules..
    – HackerGK
    Oct 23, 2013 at 12:52
  • I would suggest reading up on CSS.
    – putvande
    Oct 23, 2013 at 12:53
  • 3
    As a web developer (not just a user), the browser to use is all of them. Including IE. Focus on standards-compliant code and don't use proprietary/non-standard features unless absolutely necessary. Test early and test often, don't wait until you have most of the layout done before you start checking in other browsers. And if you need to support older browsers, you need to make a compromise: you'll have to avoid cutting-edge new tech (most of which is really not required for a layout to work) for example.
    – BoltClock
    Oct 23, 2013 at 12:55
  • The downvotes/hold were a bit too much imo...
    – Mike H.
    Oct 23, 2013 at 12:58

2 Answers 2

1

The real question should be "where do I draw the line?" You can, indeed, create separate versions of pages/modules/actions...but that takes time (and sometimes cannot be done at all).

Older browsers are fading, and to my delight some are being actively run down. Microsoft is trying to kill IE6 because they hate it so much, just like the rest of us! http://www.ie6countdown.com/

You need to decide whether or not it's worth it to pursue compatibility with older browsers, and possible alternatives like telling your users their browser is out of date (this little script is great http://browser-update.org/).

If you absolutely can't compromise and must go for compatibility with older browsers, you need to make calculated sacrifices and/or put a lot of work into graceful degradation.

0

Your IE problem is because the browser is going into Quirks mode. (you can confirm this by pressing F12 to go to the dev tools and check the mode; you'll see it says "Browser mode: Quirks").

Quirks mode is triggered when you don't have a valid DOCTYPE, or when the browser doesn't recognise your doctype.

In this case, the issue is that although you do have a doctype, you also have some code before the doctype -- this is what is causing it to break.

The doctype must be the very first thing on the page. There must be no comments or even white space preceding the doctype, otherwise it may not be recognised.

Solution: Remove (or move) the comment you've got at the top of the code.

1
  • Thank you Spudley! I could do as the others wrote - learn more about CSS. But in this case, that was merely a necessity to have knowledge about things that never turns out as must-know-information in html/css/js-tutorials anywhere. I would never have gotten around to this solution, so a huge thank you! Now there are other small fixes, like the sticky footer behaving slightly different in IE, Chrome and firefox. But other than that - I am happy ;) Thank you!! Oct 24, 2013 at 7:17

Not the answer you're looking for? Browse other questions tagged or ask your own question.