cross browser coding

i have just been testing my website and after getting some screen shots of different browsers, there seems to be a couple of problems, mostly in ie.

they seem to be css issues.
1st the content doesnt sit in the center of the screen which it does in firefox, and 2 it has loaded for example the colour settings on my links but not the font. problems with the fonts all round!

the page is zakbentley.com

just wondering if anyone could give me some advice for cross browser coding of css.

just wondering if anyone could give me some advice for cross browser coding of css.

Click to expand...

Patience and lots of coffee!

Start by getting rid of all those tables. Tables are not really used at all in Web Development anymore (apart from emails/newsletters). Use a Doctype and validate your XHTML/CSS as that will sort out some cross browser issues. Sometimes IE6 plays up, so you can have a seperate stylesheet for that if you want and use conditional comments to only have that show in IE6. That's just the very basics of Cross Browser optimization.

AFAIK {margin:0 auto;} on your wrapper doesn't work in older versions of IE. Centering the page in IE can be done by putting {text-align:center} on your body. So like this... body {text-align:center;} #wrapper {margin:0 auto;}

I can't look through your code properly right now but I can have a look at home tonight, or Harry, Sunburn, Jaz, Greg, Tbwcf etc might be able to help you out and probably give you a lot more (and better) advice on cross browser optimization.

To centre your site in IE6, use the margin:0 auto; and ensure you have a (strict) doctype with nothing preceeding it. You shouldn't need an IE specific stylesheet.

Click to expand...

Cheers for clearing that up Harry. So it's only with XHTML strict that margin:0 auto; works in IE6?

I always seem to have issues with some things being a few pixels off in IE6 and can never solve it in any other way than writing IE6 specific code. Usually only happens with sites I do in work though and we use XHTML Transitional so that might explain it.

Cheers for clearing that up Harry. So it's only with XHTML strict that margin:0 auto; works in IE6?

I always seem to have issues with some things being a few pixels off in IE6 and can never solve it in any other way than writing IE6 specific code. Usually only happens with sites I do in work though and we use XHTML Transitional so that might explain it.

Click to expand...

Always use strict for production code.
Anything before the DOCYPE in IE6 will cause it to go into quirks mode, meaning the box model doesn't work.
To fix any minor issues like that try applying display:inline; to the offending div