Member Avatar for 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.

  • 4 Contributors
  • 4 Replies
  • 180 Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by PriteshP23

Dani AI

Generated

Short, practical checklist and fixes that reduce cross‑browser layout headaches (builds on testing notes from and compatibility pointers from ).

Start with a predictable baseline

  • Use a modern HTML5 doctype and meta tags so mobile browsers (iPhone) and layout engines behave consistently.
  • Establish a single box model early; it prevents many mysterious width/padding bugs.
  • Prefer mobile‑first CSS and media queries so styles cascade naturally from simple to complex.

Example baseline (place in the document head and main stylesheet):

<!doctype html>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">

/* in main stylesheet */
*,
*::before,
*::after { box-sizing: border-box; }

Organize CSS and automate boring bits

  • Break styles into base, layout, components, utilities. That makes regression hunting faster.
  • Use a naming pattern (BEM or similar) so specificity stays low and predictable.
  • Automate prefixes and checks with tools (PostCSS/Autoprefixer, stylelint). Manual prefixing is fragile; it’s what was warning against.

Progressive enhancement and fallbacks

  • Write plain CSS fallbacks first, then enable advanced layouts with feature queries. A small @supports block prevents breaking older engines while using modern Grid/Flex where available.
/* basic fallback */
.container { display: block; }

/* enhance only if supported */
@supports (display: grid) {
  .container { display: grid; grid-template-columns: 1fr 2fr; }
}

Debugging workflow

  • Reproduce the problem in a minimal HTML/CSS test case. Strip unrelated styles until the bug appears.
  • Use browser devtools to inspect computed values and box model; check for quirks mode (missing doctype), inheritance, and specificity.
  • Test on a mix of emulators and at least one real device for iOS/Safari rendering differences.

A final note: the reset block posted by shows awareness of baseline issues; consider a lighter "normalize" approach or scoped resets so native form controls and default fonts don’t get unexpectedly altered. Keeping changes small and reproducible makes cross‑browser bugs far easier to fix.

Recommended Answers

All 4 Replies

Member Avatar for 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.

Member Avatar for <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/

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

Edited by happygeek because: reply to now deleted spam post edited out so as not to confuse readers
Member Avatar for PriteshP23

@diafol, @MICHAEL,

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

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.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.