IE issue - background centring and div centring

There is an extra space here after "Areas"

'

But I'm not sure what you are saying, it looks perfect in ie6?

yeah looks pretty much identical to me in both browsers.

'
? is that why?? taking a guess, but if you want to take out teh white line, you have to use repeat-x;?

Or is it "no-repeat"?

there is really a white line at the bottom of IE, you cant do anything about it...

Hmm… don’t think I explained myself properly, I’ve taken a screen shot and highlighted what I mean:

http://www.ajrdesigner.co.uk/work/na/example1.jpg

I know it’s offsetting the background image to the right or the content to the left but why?

http://img468.imageshack.us/img468/8079/example4ee.jpg

Mine doenst look like that.

Ok I see it, but at higher resolutions the problem is not visible, it only shows when I use 800x600 resolution when using ie...

I think it’s only an IE6 issue and the guy use’s a 800x600 screen res – I’ve got an idea on how I could stop it but I don’t know how to implement it:

I reckon that IE6’s idea of centring an image in the body is different to centring a div tag – therefore if I was to attach the image to a div tag it would fix the problem BUT I want the image to continue right down the page instead of cutting off where the div ends and if I set the div height to 100% it doesn’t work.

Is there any way to make a div tag the same height as the screen size even if the content isn’t?

I don't see any real problems @ any resolution IE-6.

one solution is that you should set the width on your #page tag 1 pixel higher meaning like this...

#page {
width: 761px;

And remake that bg image and cut that 1px difference...

these usually happens when the other elements are not set to match or uses position:absolute... you should limit the absolute use to minimize these kinds of problems...

Tried that and it messed it up in FF :/

try this, add 1 px margin left to #banner , #topnav , #content...

margin-left:1px;

then remake the bg image for this, the problem will not show again...

Right, problem solved!

I set a div to 770px wide 100% height and auto margins and put the background on that, then I put another one inside but 760px wide with all the content in – sorted!

Thanks for all your help people – sometimes you just need some ideas to help you think logically.

weapping in multiple divs is a solution, but usually I dont suggest that since its another line of css for semantic markup... Anyways its good that its solved...