Looks great in IE8 & IE9, but not IE7

I’m using a popular website script that I’ve changed the html/css and it looks great in IE8 and IE9,
but it seems many changes are needed to make it look good in IE7.
The IE7 pages needs to be much, much wider apparently, and div’s overlap, etc. Why such a discrepancy?

The header file (of the wscript) it shows this line:

<!--[if IE 7]>
      <link rel="stylesheet" href="[var.base_url]/[var.user_theme]/css/ie7.css" type="text/css">
	<![endif]-->

So, I’ve been making changes to the IE7.css file, but it seems endless. Is there a better, easier or more efficient way to go about this?

I’d have to see the site in question, but if you “have” to resort to IE conditional comments for your CSS, there is likely something completely flawed with how you built the site in the first place.

Without seeing the actual code and layout for your site, anything we tell you is a wild guess that’s probably not going to be very helpful. Your problem could range from outdated presentational markup to jumping the gun on HTML/CSS elements and styles that aren’t ready for prime-time.

Thanks for your reply, I’m sure you’re more of an expert then me, but to suggest it might be “completely” flawed, wouldn’t, at least, some flaws show in IE8 and IE9?

Well, I was going to point out that we can hardly expect a website to look substantially correct in IE7 because it was not the most robust or compliant browser ever made… But if you have overlapping divs and things like that, then maybe you do have more serious issues than just the usual degradation of modern design methods. IE7’s usage is surely low enough, however, to serve it with whatever basic CSS or other method that you use for IE6 and older. Let IE7 and lower have only your basic single column CSS rather than trying to make them swallow potentially complex layouts and/or properties or anything else that cannot fail gracefully.

IE8 and IE9 have both improved highly compared to IE7. IE7 has many of the bugs even the fossil (IE6) had.

Without code (a live demo would be better), it’s impossible to guess what is causing your site to hiccup in IE7.

Thanks for all the feedback. Much appreciated.
Would running a markup validator be a cure?

It’s always good to make sure your code is valid to avoid possible syntax or faulty HTML errors. But bugs do not necessarily mean there’s an error in your code. It may simply mean that the method you’ve used to accomplish something triggers bug x in browser y. Here’s a list of some of the more popular bugs in IE7.

No, because cross browser design means taking into account not only that some errors are handled differently by each browser and even versions of the same browser, but also that many techniques for building sites simply don’t work in all browsers reliably, if at all. How’s it work in FF? Opera? Safari? Chrome? ALL of them have oddball behaviors that you have to be prepared to deal with from the START before you even THINK about IE’s oddities… and what’s working fine for you in IE8/IE9 could be broken in other people’s IE8/IE9 because of things like default font size differences.

Resorting to IE conditionals quite often means that choices were made along the way design-wise or code-wise without taking into account your minimum target’s capabilities… it is also a sign of one of the MOST broken of site-building techniques, designing the entire layout and THEN testing; the programming equivalent of closing the barn door after the horse got out. Again the problems could range from outdated presentational markup, to bloating the page out with faulty/broken javascript shiv nonsense to jump the gun deploying HTML 5 before it’s ready for prime time (not that IMHO it’s ever worth using in the first place).

But without SEEING the page in question, NOBODY here is going to be offering anything helpful. You could have broken non-semantic markup, tables for layout, CSS3 elements nothing supports yet, CSS 2.1 elements that are inconsistent cross browser – you could have rendering bugs caused by comment placement, inconsistencies in the default attribute values on elements from a lack of a reset or consistently setting margins/paddings/borders, you could have positioning bugs due to a lack of haslayout where needed or haslayout triggers where they cause harm. You could have quirks mode rendering tripping, list element stagger due to IE7’s special handling of LI… You might be relying on a wysiwyg like the stupid preview pane in Dreamweaver basically flushing ANY chance of making it work cross browser… Shall I go on?

There are THOUSANDS if not hundreds of thousands of things that could be wrong, and without showing what it is you’re working on we can’t help you! It’s like calling the auto mechanic and saying “My car wont start, how do I fix it?” without letting the mechanic see the car or even provide what make/model it is. Problem could range from dead battery to dead alternator to faulty wiring to blown fuse to seized engine block… They can’t diagnose that over the phone with “It’s a car and it won’t start”