What is the easiest or fastest way to make CSS render the same in all browsers

try using a css reset like the eric meyer reset or the YUI reset. will help but no easy or perfect way to make things look identical in every browser

It is time consuming at first, especially if you are stilling learning the ropes of DIV+CSS. However after you've done enough practice and met enough of problems and got them all solved, you will have the knowledge of what WORKS and what DOESN'T WORK.

It is then you know how to write the most compatible style possible in the first place, thus saving all the time in degugging and rarely have any problems with any of the major modern browsers: IE6, IE7, FF2, FF3, Opera 9, Safari 3 Win / Mac.

Yes, it is possible and as easy as it can get. Practice and conquer them one by one, then you know how to do things right in the first attempt.

Well the only baffling monster should be IE6 I guess. It's inbrowser. Other than that, ff2, ff3, opera 9, safari win / mac, ie7, ie8 are relatively similar in the rendering engine, at least with much less bugs than it has with IE6.

I have a few best practices for you (one who has just begun their trip in CSS) in coding to get the max CSS compatibility:

1. Use a reset first. It clears your mind and makes sure each step of your job.
2. Don't use padding (left and right) and width on the same element unless you know well how that'll work out.
3. If an element is floated, give its parent overflow:hidden and height: 1% if the parent does not already have a height.
4. Don't give an element both margin-top or margin-bottom but only margin-top or margin-bottom. Because margins of adjacent elements collapse into one another, making the positioning somewhat unpredictable for novices.
5. If an element is floated, give it display:inline.
6. Don't rely on z-index unless your scripting needs it.
7. If anything weird happens in IE6, use height:1% on that element.
   answered 2008-12-28T00:58:01.570
   Report
   Add comment