General Principles Of Cross-Browser CSS Coding:

1- Use DIVS instead of TABLES.
One of the greatest advantage of CSS is the use of div to achieve total flexibility in terms of styling. div are unlike table where contents are locked within a tds cell. It's safe to say most table layouts are achievable with the use of div and proper styling, well maybe except massive tabular contents.

2- Avoid Image resizing in CSS
Generally browsers do a less than ideal job of dynamically rendering the image and cross-browser it can create inconsistencies. On top of that, and a better reason not to do it, is that you still have to load the full image on that page which makes your page weight (how much stuff has to be downloaded for the page to fully render) much heavier and thus slower. The easy solution is just don't do it, re size your images (and optimize them) with another tool and upload accordingly.

3- Reset CSS:
Due to the fact web browsers define different default styling for html elements, the first thing to do is to always include a CSS reset in your stylesheet.

html,body,div,ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,pre,form,p,blockquote,fieldset,input,hr {<br>margin:0; padding:0;}
h1,h2,h3,h4,h5,h6,pre,code,address,caption,cite,code,em,strong,th {<br>font-size:1em; font-weight:normal; font-style:normal;}
ul,ol {list-style:none;}
fieldset,img,hr {border:none;}
caption,th {text-align:left;}
table {border-collapse:collapse; border-spacing:0;}
td {vertical-align:top;}

4- Keep CSS Codes Clean:
If your CSS codes are messy, you are going to end up coding in confusion and having a hard time refereing the previous code. For starters, you can create proper indentation, comment them properly.

5- Use css clear attribute if you use floating elements:
If you use floating elements in your layout, it often breaks up in Firefox if you don't have an element with CSS "clear" attribute.

6- Use div instead if hr tags:
hr tag doesn't style in a very crossbrowser-friendly way. If you want a horizontal rule than a 1px line, consider using a div instead.

7- Don't use vertical-align property:
IE doesn't support vertical-align + line-height property. Try using relative positioning or margins instead.

8- Internet Explorer does not support the :hover property in any other element than a
If you want to use :hover styles in other elements than links, create a class with the same styles as the hover and use JavaScript onmouseover and onmouseout instead.

9- Internet Explorer does not support CSS attribute selectors (ie. input[type=text])
Use classes instead.

10- Internet Explorer requires text-align:center to center the content of a page
Usually you'd use margin:0 auto to center an element; This doesn't work in IE. To center in IE, give the parent element of the element you want to center the attribute text-align: center. Remember to give the centered element text-align: left, otherwise its contents will be centered too.

11- Use SitePoints CSS Reference:
If you're having trouble getting a particular CSS property to display correctly across all browsers, look up the property in the SitePoint CSS Reference to see if it has any compatibility limitations.

Each compatibility chart is accompanied by a fairly detailed description of the bugs that occur in different browsers, and users are permitted to add comments to document new bugs that come up and to provide further explanations on complex CSS issues.

Using this as a guide, you can narrow down the possibilities, and can usually determine whether or not a CSS issue is due to a browser bug, or due to your own misapplication or misunderstanding of the CSS property in question.

To check how the page looks on different browsers use:
http://www.browsershots.org/

and to test how your page looks on wide screen use:
http://www.infobyip.com/testwebsiteresolution.php