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

[elitis]

*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?

[tracknut]

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

[Rowsdower!]

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