Can you tell me why my webpage displays differently in IE and how to fix it.

Question

I've been browsing through all of the CSS related cross-browser questions trying to troubleshoot my IE styling issues with no luck. Can anyone tell me how to fix my homepage styles so that it displays the same in IE as it currently does in Firefox? I've used Firebug (probably why it looks good in Firefox) but I can't find any tools for IE that will let me change the stylesheet real time. I'm just as interested in the process of figuring out this answer as I am in the answer itself so posting the steps you took to figure it out would be beneficial. (want to be able to do this myself next time!!!)

Website is AppQandA.com. Scroll down to the bottom in IE and notice the footer. It's not like this on every page.....just the main page and the questions page.

Answer 1

The problem in IE is with the "border-left: 10px solid #333333;" rule. If I remove this, it works in IE (but obviously breaks in Firefox).

There is a tool a bit like Firebug for Internet Explorer:

http://www.stevefenton.co.uk/Content/Blog/Date/200902/Blog/Something-Like-Firebug-For-Internet-Explorer/

Potential Fixes:

1) Browser-specific styles (yuck) this would be a quick fix to get it working. Put another stylesheet AFTER your main stylesheet to override a style:

<!--[if IE]>
    <link rel="stylesheet" type="text/css" href="ie.css" />
<![endif]-->

And inside, override the rule...

#footer { border-left: none; }

EDIT: Potential issue spotted

Your problem may be getting caused by incorrect tag nesting. You can avoid these kind of problems by validating your HTML using

http://validator.w3.org

Specifically, there looks to be a missing closing div tag in these amongst a couple of other errors. Fixing these may actually solve your problem without an IE specific hack.

Answer 2

There is a tool for ie called ie tester that allows you to check how does a site look in all versions of ie. This tool also has a debug bar, does not have as much features as firebug, actually is quite limited but allows you to explore the DOM and styles.

There is also a version of firebug (firebug lite) that u can use on ie, altough you need to create a reference in your webpage to use it, see Firebug Lite

I think the problem with your page if you look with firebug, in the #footer rule you have :

#footer{
  margin:0 auto 15px
}

Try removing the 15 px and see how u go.