Div positioning screwing with my head across browsers?

Please could a CSS expert tell me why my site looks ok on most browsers but when it comes to IE it screws up. there is nothing special in the CSS just positioning background and border settings..

It screws up on the white border at the right of the nav and the red border on the left of the main box.

Its perfect in FF and Safari and Chrome but IE its out by a few pixels..

How can i get it working across all ??

http://www.uniquegeeks.co.uk/djeurope/

Its almost as if IE 开发者_JAVA百科puts the border on the inside and the rest put it border on the outside... the top and bottoms are curved imgs

Thanks

Lee

Its almost as if IE puts the border on the inside and the rest put it border on the outside

That's exactly what IE does (versions lower that 9 at least, not sure about 9). I find the best approach to something like this is to supply an additional stylesheet using conditional comments that can override the border settings for IE.

<!--[if IE]>
<link href="fix_ie.css" type="text/css" rel="stylesheet" />
<![endif]-->

He is talking about IE 6 :)

For example for you png images use this http://www.dillerdesign.com/experiment/DD_belatedPNG/ just include the file and pass the selectors to it, it will make your png images transparent.

And i would recomend you useing a css reset.

before the body in the css add

* {
  margin: 0;
  padding: 0;
}