I am re-designing a website, my new design is on display at

http://www.firstkmh.co.uk/newdesign/elite.html

I have done all the positioning using CSS and it looks fine in IE, but if I look at it in Opera (V7.11) then all the positions are out of proportion and it looks messed up!!

Can you guys help??

Cheers

Opera in IE interpret CSS differently. You have to specify every aspect of every object to get them to be the same (MARGINS, PADDINGS, LINE-HEIGHTs, everything) or you may have to have a different CSS included for each browser.

ok thanks..

Could point out an example in my css code and how to fix it by any chance?

Specify your margins like this:

 MARGIN: 0PX 0PX 0PX 0PX <!-- ORDER IS TOP RIGHT BOTTOM LEFT -->

And your paddings like this

 PADDING: 0PX 0PX 0PX 0PX <!-- ORDER IS TOP RIGHT BOTTOM LEFT -->

Avoid using "em" measuring units they will very alot between fonts (that means different OS's, Browsers different measurment), use pixels (PX).

Specify Font-Sizes in Pixels (PX), pixels are fixed, will always be the same, should use them most often (in everything),"x-small" will vary from browser, resolution etc.

Few suggestions.
That's a huge CSS include, might want to trim it down, make general declars and add specifics to elements when needed, IE

DIV  { FONT: 9PX/9PX "ARIAL"; BACKGROUND: TRANSPARENT }
<DIV STYLE="BACKGROUND: #FFFFFF"> </DIV>

IE doesn't pay as much attention to correct CSS as Opera or Mozilla do. So when writting your code always pay attention to the look on both browsers.

IE is known to support messed up code ;D