layout difference between IE8 and IE9 - html

Question

I have a site (www.jamesalder.co.uk) which is not rendering properly in IE8 and below.
Here it is in IE8:
And in IE9 and everything else:
As you can see, the search box has moved from top right to the wrong place.
The html for the search box is:
<div id="header">
<img src="/media/header_images/ts-hutton_2.jpg" title="Victorian Paintings at James Alder Fine Art" alt="Victorian Paintings at James Alder Fine Art" "="">
<form id="search-form" action="/search">
<label id="search-label">Search the Site</label>
<input type="image" src="/static/images/sign-up.gif" value="search" id="search-button">
<input type="text" name="q" id="search-input">
</form>
</div>
It seems as though it is totally missing out the following CSS, in that if I disable this CSS, it has the same effect:
#search-form {
position: absolute;
right: 0;
top: 0;
background-color: rgba(255, 255, 255, 0.6);
padding: 3px;
}
Does IE9 have some kind of problem with CSS on forms? Should I put it in a div?
As for the images below that which have decided not to float any more, I have no idea.
Are there any best practices or good resources about getting sites to behave across older versions of IE, or should I just use conditionals?

Answer 1

It was actually caused by malformed html. I had tags which looked like this:
<img src="/media/homepage_images/all-paintings-sale.jpg"
alt="All Victorian Paintings for Sale"
title="All Victorian Paintings for Sale" ">
Notice the " at the end, which was causing everything following it to be treated as text.
Bizarrely, IE9 and everything else fixed the error automatically but IE8 and below didn't.

Answer 2

It may cause by <form>.
Put your <form id="search-form" action="/search"> element in a div.
<div id="header">
<img src="..."/>
<div id="search-form">
<form action="/search"></form>
</div>
</div>
Try this please.