Website not appearing correctly in IE8

I have a website which appears fine in most browsers however in IE8 parts of the page are missing! The whole site isn't quite right in IE8 in regards to alignment which we are slowly rectifying by fixing up the css however the worst page is http://www.pocketpayday.co.uk/apply-online.aspx which actually has several DIVs missing. The site appears 100% correctly in all other browsers we have tried, including Firefox, Chrome, Safari.

I realise I haven't posted any code however the form is an asp.net usercontrol within a CMS so as a result there is a lot of code / templates / css and I don't want 开发者_如何学编程to post anything irrelevant and was hoping someone had experienced a similar issue before. Happy to post up anything required - I am currently poking around with firebug and IE dev tools to try and see what could be causing it.

In general when confronted with issues like this:

• take the output of your page (Save as HTML), and
• edit that to pare down your problem to a simple reproducible test case.
  1. Find a piece of CSS, HTML, or JS that looks unrelated to the problem and delete it.
  2. If the problem still exists, repeat step 1.
  3. If the problem went away, put that code back in and delete something else.
  4. If necessary, repeat until there exists no byte of code that can't be removed without ruining your test case.

In the process you will often find the problem yourself. You'll delete something seemingly-unrelated, find that it fixes (or changes) the problem, and as you wonder why that made a difference you'll suddenly be hit by a flash of insight.

If you don't figure out the problem, you still win because you end up with a test case that is very few lines and encourages experts to quickly analyze and fix your problem.

Oh, and: always validate your HTML and validate your CSS first and as you go. :)

I took a look and there isn't any one thing I can say that will magically clear it up.

But, here are some good tips to follow when supporting IE8, IE7:

1) I noticed you had self-closing div tags. Instead, always have a closing tag.

//Use this
<div></div>

//Not this
<div/>

2) You were using float:right. Whenever you use float, you should use and empty clear div so that the float rule doesn't propagate to unintended elements. The clear div MUST be a sibling of the elements that you're floating.

//Whenever you do this...
<div style="float:right;"></div>
<div style="float:right;"></div>

//Add a clear div....
<div style="float:right;"></div>
<div style="float:right;"></div>
<div style="clear:both;"></div>

So give those changes a try and see if they help.