Can you please tell me why my webpage is displayed differently in IE and how to fix it
I've been going through all the CSS cross-browser questions trying to fix my IE styling issues with no luck. Can anyone tell me how to fix my homepage styles so that it displays in IE the same as it currently does in Firefox? I have used Firebug (which is probably why it looks good in Firefox), but I cannot find any tools for IE that will allow me to modify the stylesheet in real time. I am also interested in the process of figuring out this answer as I am in the answer itself, so posting the steps you took to find out would be helpful. (wish I could do it next time !!!)
AppQandA.com website . Scroll down in IE and notice the footer. This is not the case on every page ..... just a home page and a question page.
a source to share
The problem in IE is related to "border-left: 10px solid # 333333;" edit. If I remove that it works in IE (but obviously breaks in Firefox).
There is a tool similar to Firebug for Internet Explorer:
Potential fixes:
1) Browser defined styles (yuck), this would be a quick fix to get it working. Place another stylesheet AFTER your main stylesheet to override the 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 noticed
Your problem may be caused by incorrect insertion of tags. You can avoid problems like this by validating your HTML with
In particular, it looks like they have a missing div closing tag among several other bugs. Eliminating them might actually fix your problem without much IE hacking.
a source to share
There is a tool for i.e. called a tester tester, which allows you to check how the site looks in all versions of ie. This tool also has a debug panel, doesn't have as many features as firebug, is actually quite limited, but allows you to explore the DOM and styles.
There is also a firebug (firebug lite) version that you can use, for example if you need to create a link in your webpage in order to use it, see Firebug Lite
I think the problem with your page is if you look with firebug, in the #footer rule you have:
#footer{
margin:0 auto 15px
}
Try removing 15 pixels and see how you go.
a source to share