Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    Regular Coder
    Join Date
    Sep 2010
    Posts
    331
    Thanks
    9
    Thanked 6 Times in 6 Posts

    [CSS(3)]How to handle browser fragmentation?

    *Not asking for specific help; just general knowledge*
    When viewing my website in firefox, some of the positions (the not so important ones luckily) are slightly off, but when viewed in chrome they are fine. Also, <li> values seem to be positioned fine in chrome, but again in firefox they are off. How would you handle this?
    Coding is a challenge, get used to it
    Always remember to debug
    Try the guess & check method
    Break it down into simple steps

  • #2
    Senior Coder
    Join Date
    Aug 2006
    Posts
    1,260
    Thanks
    10
    Thanked 277 Times in 276 Posts
    I would check the code in some sort of run-time analyzer like Firebug, and find the individual differences. I would look for different default spacing on your <li>'s, or possibly invalid code, or even a missing doctype, to start with.

    Edit: Just noted you said CSS3... another alternative is a browser that doesn't yet support the specific CSS3 that you're using.

    Dave

  • #3
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    Without seeing your specific pages in question, my first thought would be to make certain you are using some sort of browser reset CSS:

    http://yuilibrary.com/yui/docs/cssreset/

    ^That's the "nuclear" method, but even something as simple as *{margin:0;padding:0;} can prevent a lot of headaches. These browser reset examples ensure that the various browser default styles are all "reset" to a default state that you then build from. Essentially, this does its best to start all browsers on equal footing when rendering your pages.

    Secondly, I always make sure my HTML validates. Many (MANY) cross-browser display issues are a result of invalid HTML - and it's usually so easy to correct that there is really no excuse not to do so...

    Then, of course, a lot of people recommend you also validate your CSS for extra certainty (though I usually skip this step).

    After that, the only differences you should see cross-browser are box-model differences and things of that nature, but those should be fairly minimal at this stage.

    Now if you're referring to mobile browsing...well that can always add an element of extra fun.

    And if your specific problems are with CSS3 styles then you should peruse this website from time-to-time to see what things are supported and by which browsers:

    http://caniuse.com
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •