Member Avatar for newbie1234

I am writing html and css to design in php. But when i am opening in ie, chrome and firefox. every where its showing different. Means
all dimension going to change.
I am using % for body wrapper and em for fonts but its not working.
Is here any help??

how to make website that it will open in all browser properly.

  • 4 Contributors
  • 7 Replies
  • 131 Views
  • 6 Days Discussion Span
  • Latest Post Latest Post by Member #690149

Dani AI

Generated

Different rendering in IE, Chrome and Firefox usually comes from a few root causes rather than one-off “pixel hacks.” Common culprits are missing/incorrect DOCTYPE (which can trigger quirks mode), browser default styles (margins, headings, lists), inconsistent box model math, and cascading font-size inheritance that makes percent/em sizing behave unpredictably. ’s use of percent widths and ems is reasonable, but those units need a controlled base (document font-size and box model) to be reliable.

A short, practical checklist:

  • Start with an HTML5 doctype and sensible head meta tags so all browsers use standards mode.
  • Normalize browser defaults with a small reset or normalize.css rather than chasing per-browser hacks.
  • Set a global box model so width calculations match across browsers.
  • Define a base font-size on html, prefer rem for predictable font scaling, and control line-height and margins on core elements.
  • Validate markup (W3C), inspect computed styles in each browser’s devtools, and build a minimal reproducible test case to find the exact difference.

Minimal examples to place near the top of the stylesheet:

/* base document rules */
html { box-sizing: border-box; font-size: 16px; }
*, *::before, *::after { box-sizing: inherit; }
body { margin: 0; line-height: 1.5; font-family: Arial, sans-serif; }

And in the HTML head:

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

Dreamweaver is an editor — it won’t magically fix cross-browser differences. As pointed out, avoid relying on pixel hacks; they mask symptoms and make maintenance harder. ’s quick fixes may appear to work for one browser but usually introduce other issues. The “master stylesheet” idea from is effectively a normalized base + global rules that make percent/em layouts behave consistently. For box-model details see the MDN page on box-sizing: [https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing].

Recommended Answers

All 7 Replies

Member Avatar for BSkiLLs

Using % is half your problem. FYI: all browsers are going to render different. Per sign, Color, Look, position, etc.. All story short but just because the way they are designed & made etc..

position by px and you might still have to put a HTML hack in there so they are the same for each broswer. If you code it perfect standard they will be the same in each broswer.

Member Avatar for BSkiLLs

right: 245px;
margin-left: 50%;
left: -250px;

Member Avatar for newbie1234

t: 245px;
margin-left: 50%

I did not get. Please tell me what to do for that.. I am making according to standard.

Member Avatar for newbie1234

is dreamviewer can make this happen??

Member Avatar for BSkiLLs

yes but prob still might have to have some hacks here & there maybe.

and the way i explained above is standards basic's

Member Avatar for almostbob

Ignore BS kills, BS,
PX Hacks are no way to make the site appear as you wish, they do not work.
current best practice is em & % as layout tools, pixels are device dependent, and change size a 15inch monitor used to be 800px, now a 7inch tablet is 2600px, px are not user friendly
read a 'box model' tutorial and continue what you are trying

Edited by almostbob
Member Avatar for Member #690149

whatever dimensions you use,, it may have still no effect.. because browsers render your code differently and they have defaults on each element you define, and they are different..
the only solution for it is to use a master stylesheet.

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.