CSS Issue in IE 7

Hi, does anyone know why this is happening. My test page at www.fcbs.co.uk/test2.html appears how I want it in Firefox, but when I see it in Internet Explorer 7, it is different.
My drop down menu at the top right of the page is positioned different.

Can someone please help me resolve this issue?

Kind Regards

 

Try to control margins (and paddings)
form{margin:0;}

 

ok, I noticed you are using padding to position it, that's bad way because the IE represents paddings differently than FF/Opera... make it like this:

.topbackground {
...
position:relative; /*This make position absolute usable only inside the div*/ 
}

.topnavigation {
position:absolute;
top:123px; /*position where you want it, itll be the same in all browsers*/
left:123px;
}

Code (markup):

PS: You have nice website, but I would try to center it (wrap everything in one div which would have margin:0 auto 0 auto;)

 

Thanks, i'll give that a try.

 

I am having a little bit of trouble here. Can you please advise.
I've tried to do what you've said and i've made it worse

 

You can't leave there that padding, you have there:

.topnavigation {
	left: 593px;
	top: 44px;
	position: absolute;
	padding-top: 44px;
	padding-right: 13px;
	padding-bottom: 1px;
	padding-left: 593px;
}

Code (markup):

this is right:

.topnavigation {
	left: 593px;
	top: 44px;
	position: absolute;
	
}

Code (markup):

 

Just tried with left:600px; , top:50px; and padding:0; and its positioned well

 

Thanks, i'll give that a try. Do you think it would be better to use all div tags rather than tables?

 

yes, definately tableless

 

Thanks for your help smaug. Much appreciated.