Text positioning problem.

Hello.

This is my first attempt CSS so I'm just feeling my way.
Anyway, I'm working on a Mac OS X, and the page below:

http://www.diminishingfish.com/james3/health.html

renders fine in Safari/Firefox...but in Mac IE/5.2 the main text in the right hand col gets squashed in so that it's right edge moves leftwards.. instead of running all the way across my content DIV - like there is extra padding on the right that I don't want and don't think I have specified anywhere. Also, the box with a couple of extra links in that I am floating to the right moves over to the left a bit too. I want it to stay tight to the right inside of DIV content.

Here's my CSS: http://www.diminishingfish.com/james3/layout1.css

Any ideas how I can fix this? If you're not on a Mac I'd be keen to know how things look on a PC...as I haven't managed to take a look on a PC yet...rather scared to to be honest...

All help/tips etc will be very very appreciated.

Cheers

Andrew.

it looks fine in both IE 6.02 and FF 1.0 on PC, unfortunately i dont have a mac but good job on coding well enough to display in FF and IE the same way

Well, to be honest (trust me, if I don't say it, you'll hear it from other Mac coders out there!) I wouldn't even bother with IE Mac. It's long dead, hasn't been upgraded in years, and it has less of a browser share now than NS 4 thanks to OS X.

I like to serve CSS like this:

<style type="text/css" media="screen">
@import 'css/style.css';
</style>

The single quotes keep CSS hidden from IE Mac, giving it a nice text alternative. If you really want to feed IE Mac a stylesheet, you could use this scary-looking hack:

<style type="text/css" media="screen">
@import 'css/style.css';
/*\*//*/
@import "css/iemac.css";
/**/
</style>

That wacky code sends a stylesheet thaat only IE Mac can see, so you could write rules in there that overwrite your other rules to fix the problems.

Hope this helps,

Thanks people..
Playing around with the Box Model hack.
Ta.

Andrew.