Design All in One

[PriteshP23]

Hello,
I would like to know the best way to design a website which one can have best view in Chrome, IE, Safari, Firefox, iPhone. In addition, css part should be easy to manage. For the moment, I have found many problems in css and the layout also.

I would like to have some tricks which can avoid mistakes in layout and compatibility on different browsers.

Thanking you in advanced.

[NardCake]

There aren't many tricks, you just have to deal with it really unless you are using a framework of the sorts which normally support all major browsers. Firefox is mostly up to speed so normally everything for chrome and firefox will work fine, the only problem with Opera is some css effects (for me anyways). I have all major browsers, the best way to do it yourself would be just to test everything, unless of course you are using a framework. If a certain css attribute isn't working in firefox or opera your best bet would just to be add the prefix like this, from this:

box-shadow:0px 0px 5px #000000;

To this:

-moz-box-shadow:0px 0px 5px #000000;
-o-box-shadow:0px 0px 5px #000000;

Look up some stuff on google, if you aren't sure! Also to try to avoid more mistakes validate your webpage with the W3C validator with whatever version of HTML you are using.
http://validator.w3.org/
Hope thate helps somewhat.

Good sites to check compatibility:

http://caniuse.com/
http://www.findmebyip.com/litmus/
http://interactiveblend.com/blog/online/cross-browser-compatibility-with-css3/

[<M/>]

Here are some sites that i found that maybe helpful...
http://www.wspromotion.com/allbrowsers.html

http://www.dreamtemplate.com/blog/web-design-guides/make-your-website-compatible-with-multiple-browsers/

http://techtips.salon.com/make-stretch-fit-browsers-2992.html

If the sites weren't all that helpful, Google is a perfect friend. Diafol's and NardCake's solutions are good to follow too.

[PriteshP23]

@diafol, @MICHAEL,

It sounds good. Thank you so much. I have to do it with demo and test.

@NardCake

Thanks a lot. Well, i found this:

html,body,div,ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,pre,form,p,blockquote,fieldset,input,hr {margin:0; padding:0;}
h1,h2,h3,h4,h5,h6,pre,code,address,caption,cite,code,em,strong,th {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;}

It reduces a lot of work in css. Still, i need to find more and make optimized code.