Member Offer
  1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

cross browser coding

Discussion in 'Website Design Forum:' started by bentzak, Jan 29, 2010.

  1. bentzak

    bentzak Senior Member


    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

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


  2. Aarlev

    Aarlev Member

    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. :)
  3. Harry

    Harry Senior Member

    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.
  4. Aarlev

    Aarlev Member

    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.
  5. Harry

    Harry Senior Member

    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

  6. bentzak

    bentzak Senior Member

    cheers for the replies, limited internet access at the mo!

    thought that might be the case!


Share This Page